当前位置:首页 > 模板主题 > 正文

文章模板详解!牛叉内容管理系统(NiuXcms) 教程

2014-01-18 13:43:18   来源:www.niuxsoft.com   编辑:牛叉软件

摘要:牛叉内容管理系统(NiuXcms)教程之文章模板详解:NiuXcms模板一共有三种:文章模板,栏目模板,文章内容模板。今天我们讲解最主要的文章模板。栏目模板是文章模板衍生来的,只有几处不同。文章模板是管除了文章内容以外文章文件的所有部分,文章内容模板是就是管内容的模板。文章模板和...

牛叉内容管理系统(NiuXcms)教程之文章模板详解:NiuXcms模板一共有三种:文章模板,栏目模板,文章内容模板。今天我们讲解最主要的文章模板。栏目模板是文章模板衍生来的,只有几处不同。文章模板是管除了文章内容以外文章文件的所有部分,文章内容模板是就是管内容的模板。文章模板和文章内容模板组合就能管理整片文章文件,做出任何形式的文章。这个我们以后再详细讲解,先来看看文章模板!!!

首先,我们用系统自带的“通用文章样板模板”来作实例讲解,先看样板的html代码,如下:我们的详解就写在每行代码后面。所有{%……%}括起来的就是我们NiuXcms模板标签。{%……%}内容不同代表不同的变量。使用模板标签,生成的文章会用实际值替代掉标签的位置。因此,NiuXcms文章模板的设计原则:你就当正常的html网页文件设计,最后用我们的模板标签替换掉需要变化的位置即可。非常简单,无需再学习什么模板标签什么的,无需专门人才。只要会编辑网页,懂html、css、javascript就行!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- w3c规定的文档类型声明,告知浏览器文档使用哪种 HTML 或 XHTML 规范 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 网页的编码是utf-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 启用客户端最高版本的ie内核解释页面,
如果有谷歌浏览器插件,启用谷歌浏览器内核解释页面 -->
<title>{%wzbiaoti%} - {%wzname%}({%wzhost%})</title><!-- 网页标题,根据seo按照文章标题-网站名称排序 -->
<meta name="keywords" content="牛叉内容管理系统NiuXcms教程之文章模板详解,牛叉内容管理系统,NiuXcms,教程,文章模板" /><!-- 网页内容关键字 -->
<meta name="description" content="牛叉内容管理系统(NiuXcms)教程之文章模板详解:NiuXcms模板一共有三种:文章模板,栏目模板,文章内容模板。今天我们讲解最主要的文章模板。栏目模板是文章模板衍生来的,只有几处不同。文章模板是管除了文章内容以外文章文件的所有部分,文章内容模板是就是管内容的模板。文章模板和" /><!-- 网页内容描述 -->
<link href="{%cmsurl%}images/favicon.ico" rel="shortcut icon" /><!-- 网站图标,需要改成你自己的 -->
<link href="{%cmsurl%}templates/wzmb/css/common.css" rel="stylesheet" type="text/css" /><!-- 引入公共css文件 -->
<link href="{%cmsurl%}templates/wzmb/css/gm01.css" rel="stylesheet" type="text/css" /><!-- 引入模板专属css文件 -->
<link href="{%cmsurl%}css/ui-lightness/ui.css" rel="stylesheet" type="text/css" id="themes" /><!-- 引入主题皮肤css文件,修改主题目录就可以变成不同的皮肤 -->
<link href="{%cmsurl%}internals/editor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" /><!-- 引入代码高亮专属css文件,比如我们现在这个html代码高亮显示 -->
<script language="JavaScript" type="text/javascript" src="{%cmsurl%}js/common.js"></script><!-- 引入公共js文件,也就是最新版的jquery库 -->
<script language="JavaScript" type="text/javascript" src="{%cmsurl%}js/common-ui.js"></script><!-- 引入主题皮肤js库文件 -->
<script language="JavaScript" type="text/javascript" src="{%cmsurl%}internals/editor/third-party/SyntaxHighlighter/shCore.js"></script><!-- 引入代码高亮专属js文件 -->
<script language="JavaScript" type="text/javascript">
var niuXurl = '{%cmsurl%}';//定义一个cms系统根url,这样能传递变量到下面的js文件里去。
</script>
<script language="JavaScript" type="text/javascript" src="{%cmsurl%}templates/wzmb/css/common-init.js"></script><!-- 引入公共的初始化js文件 -->
<script language="JavaScript" type="text/javascript" src="{%cmsurl%}templates/wzmb/css/gm01.js"></script><!-- 模板专属js文件 -->
</head>
<body class="ui-widget-content" style="border:0">

<div class="ui-widget-header">
	<div class="scd">
    	<ul class="nav fl" id="access">
        </ul>
    	<ul class="nav fr">
        	<li><a onclick="SetHome()" href="javascript:void(0)" title="设当前页为首页">设为首页</a></li>
            <li><a onclick="AddFavorite()" href="javascript:void(0)" title="加入收藏">加入收藏</a></li>
        </ul>
        <div class="cb"></div>
    </div>
</div>

<div class="scd">
	<div id="logo" class="fl">
    	<a href="{%wzurl%}" title="{%wzname%}({%wzhost%})"><img src="{%cmsurl%}images/logo.png" width="196" height="69" border="0" alt="{%wzname%}({%wzhost%})" /></a>
    </div>
    <div id="aftlogo" class="fr">
	   	<div class="forum-20131212210713"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131212210713.js"></script></div>
    </div>
    <div class="cb"></div>
</div>

<hr class="ui-widget-header" />

<div class="scd">
	<div class="tm4 fl">
    	<p class="cc">当前位置:<a href="{%wzurl%}">首页</a> > <a href="{%wzurl%}{%lmdir%}">{%lmname%}</a> > 正文</p>
	</div>
    <div class="tm4 fr tr">
    	<form method="get" action="{%cmsurl%}internals/search/">
        <input type="text" name="q" class="text ui-widget-content ui-corner-all" size="36" title="在此输入搜索内容。" /><input type="submit" value=" 搜 索 " class="text cup ui-state-default ui-corner-all" title="搜索!" />
        </form>
    </div>
    <div class="cb"></div>
</div>

<div class="scd">
	<div class="content fl">
    	<hr class="ui-widget-header" />
        <h1 class="tc cp lh171">{%wzbiaoti%}</h1>
        <div class="tc cp">
          <span>{% wztime%}</span>&nbsp;&nbsp;
          <span>来源:<a href="http:/ /{% wzlaiyuan%}" target="_blank">{% wzlaiyuan%}</a></span>&nbsp;&nbsp;
          <span>编辑:{% wzbianji%}</span>
          <div class="fr">
          	  <button type="button" id="font_zoomin" class="ui-button ui-widget ui-state-default ui-corner-all" title="减小字号">&nbsp;A<sup>ˉ</sup>&nbsp;</button><button type="button" id="font_zoomout" class="ui-button ui-widget ui-state-default ui-corner-all" title="加大字号">&nbsp;A<sup>﹢</sup></button>
          </div>
          <hr class="cb cp ui-widget-content" />
        </div>
        <div class="tt cp ui-state-default ui-corner-all">
        	{% wzdescription%}...
        </div>
        <div id="artibody" class="tt cp fs117 lh171 maxw">
        	{% wzneirong%}<script type="text/javascript">SyntaxHighlighter.highlight();</script>
        </div>
        <div id="wzfenye" class="tc">{% wzfenye%}</div>
        <div class="cc tr"><div class="fl">标签:{% wztag%}</div>(责任编辑:{% wzbianji%})</div>
        <div style="padding-left:42.4%; margin:12px 0;"><div class="bdlikebutton"></div></div>
        <div class="cc">
        	<div class="fl tm4 lh171">分享收藏:</div>
<!-- 百度分享 begin -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<a class="bds_tsina"></a>
<a class="bds_qzone"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<a class="bds_t163"></a>
<a class="bds_tsohu"></a>
<a class="bds_kaixin001"></a>
<a class="bds_tieba"></a>
<a class="bds_bdhome"></a>
<a class="bds_tfh"></a>
<a class="bds_ty"></a>
<a class="bds_douban"></a>
<a class="bds_sqq"></a>
<a class="bds_taobao"></a>
<a class="bds_fbook"></a>
<a class="bds_twi"></a>
<a class="bds_copy"></a>
<a class="bds_print"></a>
<a class="bds_mshare"></a>
<span class="bds_more">更多</span>
</div>
<!-- 百度分享 end -->
        	<br class="cb" />
        </div>
        <hr class="ui-widget-content cp" />
        <div class="lh171">
        	<div class="fl chw"><p class="h171 ov cc">上一篇:{% prewz%}</p></div>
            <div class="fr chw"><p class="h171 ov cc">下一篇:{% nextwz%}</p></div>
            <br class="cb" />
        </div>
        <hr class="ui-widget-content cp" />
        <div id="xiangguanwz" class="cc fs117 lh171 lis">
        	<p class="tt ui-widget-header ui-corner-all">相关文章:</p>
            <ul class="niuxcms_xgwz">{% xiangguanwz:10%}</ul>
        </div>
        <div class="p4">
        	<div class="forum-20131212214032"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131212214032.js"></script></div>
        </div>
        <div class="cc ui-widget-content ui-corner-all">
<!-- qqwbly begin -->
<div id="qqwb_comment__" data-appkey="801390763" data-width="100%" data-height="300"></div>
<script src="http://mat1.gtimg.com/app/openjs/openjs.js#debug=yes&autoboot=no"></script>
<!-- qqwbly end -->
        </div>
	</div>
    <div class="sidebar fr">
    	<hr class="ui-widget-header" />
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<div class="forum-20131212211408"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131212211408.js"></script></div>
        </div>
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<p class="tt ui-widget-header ui-corner-all">猜你喜欢:</p>
            <ul id="cl01" class="lid cc">
            <script language="JavaScript" type="text/javascript">$("#cl01").load("{%cmsurl%}data/lc.1001.cl.php.htm");</script>
            </ul>
        </div>
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<div class="forum-20131212211831"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131212211831.js"></script></div>
        </div>
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<p class="tt ui-widget-header ui-corner-all">精选文章:</p>
            <ul id="cl02" class="lic cc">
            <script language="JavaScript" type="text/javascript">$("#cl02").load("{%cmsurl%}data/lc.1002.cl.php.htm");</script>
            </ul>
        </div>
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<div class="forum-20131212213738"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131212213738.js"></script></div>
        </div>
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<p class="tt ui-widget-header ui-corner-all">精彩图集:</p>
            <ul id="cl03" class="tm4 niuxcms_piclist">
            <script language="JavaScript" type="text/javascript">$("#cl03").load("{%cmsurl%}data/lc.1003.cl.php.htm");</script>
            </ul>
            <br class="cb" />
        </div>
    	<div class="ui-widget-content ui-corner-all p4 tm4">
        	<div class="forum-20131213153601"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131213153601.js"></script></div>
        </div>
    </div>
    <div class="cb"></div>
</div>

<div class="scd">
	<div class="forum-20131212213658"><script charset="utf-8" language="JavaScript" type="text/javascript" src="{%cmsurl%}plugins/niuxams/data/forum-20131212213658.js"></script></div>
</div>

<br />

<div class="ui-widget-content">
	<div class="scd" style="font-family:Arial;">
		<p>&nbsp;</p>
	    <p class="tc">
	    	Copyright &copy; 2013-2099 {%wzhost%} All Rights Reserved.
		</p>
	    <p class="tc">Powered by <a href="http://www.niuxsoft.com" target="_blank" title="牛叉内容管理系统(NiuXcms)">NiuXcms</a></p>
	    <p>&nbsp;</p>
	</div>
</div>

<a href="javascript:void(0)" id="toTop" class="ui-widget-header" title="返回顶部" onclick="window.scrollTo(0,0);return false"><h1>∧</h1></a>
<!-- 百度赞分享按钮 begin -->
<script id="bdlike_shell"></script>
<script>
var bdShare_config = {
	"type":"medium",
	"color":"blue",
	"uid":"586892",
	"share":"yes"
};
document.getElementById("bdlike_shell").src="http://bdimg.share.baidu.com/static/js/like_shell.js?t=" + Math.ceil(new Date()/3600000);
</script>
<!-- 百度赞分享按钮 end -->
<!-- Baidu Button begin -->
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=586892" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button end -->
<!-- 百度图片分享 begin -->
<script id="bdimgshare_shell"></script>
<script>
var bdShare_config_imgshare = {
	"type":"list"
	,"size":"small"
	,"pos":"top"
	,"color":"black"
	,"list":["qzone","tsina","tqq","renren","t163"]
	,"uid":"586892"
};
document.getElementById("bdimgshare_shell").src="http://bdimg.share.baidu.com/static/js/imgshare_shell.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>
<!-- 百度图片分享 end -->
<!-- 划词分享 begin -->
<script type="text/javascript">
	window._qzone_share_pick_cfg = {
		url:location.href,
		summary:'',/*分享摘要(可选)*/
		title:'',/*分享标题(可选)*/
		site:'',/*分享来源 如:腾讯网(可选)*/
		pics:'', /*分享图片的路径(可选)*/
		drag_pick:{
				'@style':101,
				body:{}
			}
	};
</script>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/app/qzshare/script/qzshare.plus.pick.js" async="true" charset="utf-8"></script>
<!-- 划词分享 end -->
</body>
</html>

文章模板标签就那么二十四个,我们分别解释一下:

1、 {%wzurl%}:网站url,通用模板试用,自己网站就用自己网站的url即可。格式:http://www.niuxsoft.com/ 最后有斜杠“/”。

2、 {%wzname%}:网站名称,通用模板试用,自己网站就用自己网站名称即可。格式:牛叉软件。

3、 {%wzhost%}:网站主机名,通用模板试用,自己网站就用自己的。格式:www.niuxsoft.com

4、 {%cmsurl%}:NiuXcms安装目录根url地址,通用模板试用,自己网站就用自己的。格式:http://www.niuxsoft.com/cms/

5、 {%pddir%}:频道目录。通常和网站url联合使用。例如:{%wzurl%}{%pddir%}/ 表示频道网址

6、 {%pdname%}:频道名称。每个频道会替换成本频道的频道名称。根据seo我们不建议使用频道。

7、 {%lmdir%}:栏目目录。通常和网站url联合使用。例如:{%wzurl%}{%lmdir%}/ 表示栏目网址

8、 {%lmname%}:栏目名称。每个栏目会替换成本栏目的栏目名称。

9、 {%wzID%}:文章ID值。在需要用到文章ID值作为变量的时候用。会替换成当篇文章的ID值。

10、{%wzfilename%}:文章文件名。不包括后缀。例如:2014/01/18/145532

11、{%wzfileext%}:文章后缀名。不包括“.”例如:html

注意:以下标签我们都用空格隔开了,否则发布文章的时候会被替换掉。

12、{% wzkeywords%}:文章关键词。格式:niuxcms,牛叉内容管理系统

13、{% wzdescription%}:文章内容摘要。不超过140个字。

14、{% wzslt%}:文章标题缩略图。格式:<img class="niuxcms_slt" src="……" alt="……" />你可以对niuxcms_slt类进行css的编写,让图片按你要的形式。

15、{% wzbiaoti%}:文章标题。

16、{% wzneirong%}:文章内容。

17、{% wzfenye%}:文章分页导航。格式:

<div class="niuxcms_fenye"><span class="niuxcms_begin_page">首页</span><span class="niuxcms_prepage">上页</span><span class="niuxcms_num niuxcms_current_page">1</span><a class="niuxcms_num niuxcms_page" href="……_2.html">2</a><a class="niuxcms_num niuxcms_page" href="……_3.html">3</a><a class="niuxcms_num niuxcms_page" href="……_4.html">4</a><a class="niuxcms_num niuxcms_page" href="……_5.html">5</a><a class="niuxcms_num niuxcms_page" href="……_6.html">6</a><a class="niuxcms_nextpage" href="……_2.html">下页</a><a class="niuxcms_end_page" href="……_6.html">尾页</a></div>

你可以对class类进行css的编写。我们common.css公共css里有例子。

.niuxcms_fenye span{
	display:inline-block;
	border:1px solid #aaa;
	padding:4px 6px;
	margin:12px 2px;
	color:#aaa;
}
.niuxcms_fenye a{
	display:inline-block;
	border:1px solid #333;
	padding:4px 6px;
	margin:12px 2px;
	color:#333;
}
.niuxcms_fenye a:hover{
	color:#fff;
	background-color:#903;
	text-decoration:none;
}
.niuxcms_fenye span.niuxcms_current_page,.niuxcms_fenye a.niuxcms_current_page:hover{
	color:#fff;
	background-color:#903;
	font-weight:bold;
}

18、{% xiangguanwz:10%}:相关文章。数字10表示最多10条相关文章。格式如下:文章有缩略图就会出现缩略图链接。没有就不会显示。

    <li>
        <a href="文章链接" title="文章标题">
            <img class="niuxcms_slt" src="标题缩略图" alt="文章标题" />
            <span class="niuxcms_span">文章标题</span>
        </a>
    </li>
    <li>
        <a href="文章链接" title="文章标题">
            <span class="niuxcms_span">文章标题</span>
        </a>
    </li>
    ……循环10次

你应该在两边加<ul></ul>,并对class类进行css的编写。图片相关文章可以控制图片显示方式。例子如下:

.niuxcms_xgwz li{
	float:left;
	position:relative;
	list-style-type:none;
	margin:8px 0 0 8px;
}
.niuxcms_xgwz li .niuxcms_slt{
	display:block;
	width:188px;
	height:100px;
}
.niuxcms_xgwz li .niuxcms_span{
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1.71em;
	overflow:hidden;
	z-index:100;
	background:#000;
	color:#fff;
	line-height:1.71em;
	text-align:center;
	filter:alpha(opacity=60);
	opacity:.6;
}

19、{% wztime%}:文章时间。格式:2014-01-02 17:33:15

20、{% wzbianji%}:文章编辑。

21、{% wzlaiyuan%}:文章来源。

22、{% wztag%}:文章标签。格式:

<a class="niuxcms_tag" href="……/internals/search/?q=标签1" title="标签1">标签1</a><a class="niuxcms_tag" href="……/internals/search/?q=标签2" title="标签2">标签2</a>

你可以对niuxcms_tag类进行css的编写。编写文章时候关键词一栏填写的小于6个汉字、16个字符单词会自动生成标签。

23、{% prewz%}:前一篇文章。格式:前一篇文章有缩略图就会出现缩略图的图片,否则不会出现。

<a class="niuxcms_prewz" href="……" title="标题"><img class="niuxcms_slt" src="……" alt="标题" /><span class="niuxcms_span">标题</span></a>

你可以对niuxcms_prewz类进行css的编写。

24、{% nextwz%}:下一篇文章。格式:下一篇文章有缩略图就会出现缩略图的图片,否则不会出现。

<a class="niuxcms_nextwz" href="……" title="标题"><img class="niuxcms_slt" src="……" alt="标题" /><span class="niuxcms_span">标题</span></a>

你可以对niuxcms_nextwz类进行css的编写。


好了,文章模板标签我们已经讲完了,顺便提一句,大家可以看到样板代码里用了几个社会化分享工具,这样有利于社会化分享,提高网站流量。像计数统计,留言,分享收藏,投票、站内搜索等等功能,我们建议都用专业化的网站提供的服务,即节省了服务器流量负担,减少了人力,还能获得社会化流量。何乐而不为呢?


(责任编辑:牛叉软件)

上一篇:没有了



^

 

客服中心 | 授权中心 | 购买授权 | 付款方式 | 广告合作 | 联系我们 | 关于我们

Copyright © 2013-2099 NiuXsoft.com All Rights Reserved. 湘ICP备11016562号-1

Powered by NiuXcms