如何制作Discuz模板?

2015-12-09 21:34 阅读 36 次 评论关闭

Discuz!X的模版位于根目录/template 文件夹里面,在这里面每一个文件夹都会被识别成一个新模版。如果你有想要安装的模版,只需要把模版的整个文件夹复制到这个目录然后进入后台-界面-风格设置里面找到对应的模版然后安装。安装好以后勾选为默认模版以后提交即可。

创建模版的时候我们需要把default(默认模版)文件夹里面的discuz_style_default.xml复制到你的模版目录/discuz_style_你的模版名.xml。然后安装官方的模版xml去修改里面的内容。

<?xml version="1.0" encoding="ISO-8859-1"?>
<root>
 <item id="Title"><![CDATA[Discuz! Style]]></item>
 <item id="Data">
  <item id="name"><![CDATA[默认风格]]></item>
  <item id="templateid"><![CDATA[1]]></item>
  <item id="tplname"><![CDATA[默认模板套系]]></item>
  <item id="directory"><![CDATA[./template/default]]></item>
  <item id="copyright"><![CDATA[<a href="https://www.baidu.com/s?wd=%E5%BA%B7%E7%9B%9B%E5%88%9B%E6%83%B3&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPHFhmyR3nHP-Phw9Pjbk0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtYrHRLP1R3P1Dsn1TLnHcsnjf" target="_blank" class="baidu-highlight">康盛创想</a>(北京)科技有限公司]]></item>
  <item id="style">
   <item id="smfont"><![CDATA[Arial]]></item>
   <item id="threadtitlefontsize"><![CDATA[14px]]></item>
   <item id="threadtitlefont"><![CDATA[Tahoma,'Microsoft Yahei','Simsun']]></item>
   <item id="smfontsize"><![CDATA[0.83em]]></item>
   <item id="tabletext"><![CDATA[#444]]></item>
   <item id="midtext"><![CDATA[#666]]></item>
   <item id="lighttext"><![CDATA[#999]]></item>
   <item id="link"><![CDATA[#333]]></item>
   <item id="highlightlink"><![CDATA[#369]]></item>
   <item id="noticetext"><![CDATA[#F26C4F]]></item>
   <item id="bgcolor"><![CDATA[#FFF background.png repeat-x 0 0]]></item>
   <item id="msgfontsize"><![CDATA[14px]]></item>
   <item id="sidebgcolor"><![CDATA[ vlineb.png repeat-y 0 0]]></item>
   <item id="headerborder"><![CDATA[0]]></item>
   <item id="headerbgcolor"><![CDATA[]]></item>
   <item id="inputborderdarkcolor"><![CDATA[#848484]]></item>
   <item id="stypeid"><![CDATA[1]]></item>
   <item id="inputbg"><![CDATA[#FFF]]></item>
   <item id="commonborder"><![CDATA[#CDCDCD]]></item>
   <item id="commonbg"><![CDATA[#F2F2F2]]></item>
   <item id="specialborder"><![CDATA[#C2D5E3]]></item>
   <item id="specialbg"><![CDATA[#E5EDF2]]></item>
   <item id="dropmenuborder"><![CDATA[#DDD]]></item>
   <item id="floatmaskbgcolor"><![CDATA[#000]]></item>
   <item id="dropmenubgcolor"><![CDATA[#FEFEFE]]></item>
   <item id="floatbgcolor"><![CDATA[#FFF]]></item>
   <item id="lightlink"><![CDATA[#FFF]]></item>
   <item id="menuhoverbgcolor"><![CDATA[#005AB4 nv_a.png no-repeat 50% -33px]]></item>
   <item id="titlebgcolor"><![CDATA[#E5EDF2 titlebg.png repeat-x 0 0]]></item>
   <item id="fontsize"><![CDATA[12px/1.5]]></item>
   <item id="font"><![CDATA[Tahoma,'Microsoft Yahei','Simsun']]></item>
   <item id="styleimgdir"><![CDATA[]]></item>
   <item id="imgdir"><![CDATA[]]></item>
   <item id="boardimg"><![CDATA[logo.png]]></item>
   <item id="available"><![CDATA[]]></item>
   <item id="headertext"><![CDATA[#444]]></item>
   <item id="footertext"><![CDATA[#666]]></item>
   <item id="menubgcolor"><![CDATA[#2B7ACD nv.png no-repeat 0 0]]></item>
   <item id="menutext"><![CDATA[#FFF]]></item>
   <item id="menuhovertext"><![CDATA[#FFF]]></item>
   <item id="wrapbg"><![CDATA[#FFF]]></item>
   <item id="wrapbordercolor"><![CDATA[#CCC]]></item>
   <item id="contentwidth"><![CDATA[630px]]></item>
   <item id="contentseparate"><![CDATA[#C2D5E3]]></item>
   <item id="inputborder"><![CDATA[#E0E0E0]]></item>
  </item>
  <item id="version"><![CDATA[<a href="https://www.baidu.com/s?wd=X3&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPHFhmyR3nHP-Phw9Pjbk0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtYrHRLP1R3P1Dsn1TLnHcsnjf" target="_blank" class="baidu-highlight">X3</a>.1]]></item>
 </item>
</root>

需要注意的是这里的Title值不能改,必须保持原样才能够被安装和运行。version代表你这个模版能适用的Discuz!版本。可以用逗号分隔,例:

<item id="version"><![CDATA[X2.5,<a href="https://www.baidu.com/s?wd=X3&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPHFhmyR3nHP-Phw9Pjbk0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtYrHRLP1R3P1Dsn1TLnHcsnjf" target="_blank" class="baidu-highlight">X3</a>.0,X3.1,X3.5]]></item>

templateid是模版的标识符,这个如果是本地模版的话直接删掉这行即可。不然会识别错误。如果想自定义参数必须在style下面添加行。例如:

<item id="diyxml"><![CDATA[diydiydiytext]]></item>

Discuz!的这个自定义的参数非常好用,在之后的内容里面会被提及。 需要导入自定义模版的时候只需要在后台的界面-风格选项里面上面有个导入标签,点入以后会提示你一步一步导入你已经上传的模版。你也可以直接在对应的模版设置里面修改好参数然后到模版列表页导出你自定义好的模版XML文件。 所谓制作模版就是复制官方文件到自己的模版文件夹里面然后加以修改。 Discuz!额外提供了一些便利设置方便我们设置CSS样式,那就是extend_。我们可以用添加这个 前缀的CSS来达到不替换原有CSS文件的情况下追加或者覆盖原CSS内容。添加的位置就是根目录/template/你的模版文件夹/common/extend_common.css。 要注意的是module.css里面的注释能起到划分区域的效果,优先级比extend_common.css还要高,但是common.css里面的!important依旧优先级比没有!important的module.css的对应内容要高。例:

/** forum::viewthread,group::viewthread,forum::trade,forum::misc **/
.pls {background:rgba(0,0,0,0.03);border-right:none;width:200px;}
.ad .pls {background#ffffff;}
.ad .plc {background#ffffff;}
.pls .avatar img {width145px;padding:8px;background#FFF;box-shadow:0px 0px 10px rgba(0,0,0,0.2);}
.pls .avatar {<a href="https://www.baidu.com/s?wd=text-align&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPHFhmyR3nHP-Phw9Pjbk0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtYrHRLP1R3P1Dsn1TLnHcsnjf" target="_blank" class="baidu-highlight">text-align</a>:center;}
.pls p, .pls .pil, .pls .o {margin10px 20px;<a href="https://www.baidu.com/s?wd=text-align&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPHFhmyR3nHP-Phw9Pjbk0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtYrHRLP1R3P1Dsn1TLnHcsnjf" target="_blank" class="baidu-highlight">text-align</a>: center;}
.dvbg {background#fff;}
/** end **/

这些代码只在区域是forum::viewthread,group::viewthread,forum::trade和forum::misc生效。

<!--{template common/header}-->

你在模版文件会看见这样的注释代码,这代码实际上能调用模版文件夹里面的网页文件,要求后缀是.htm,例如我在forum文件夹里面添加了一个timeline.htm,那么就可以添加如下代码在响应位置调用timeline这个页面

<!--{template forum/timeline}-->

我们现在掌握了这些知识以后可以考虑开始初步为网站添加点料了。   我们都很喜欢在网站上面添加一个大大的图片横幅,当然不一定是广告,也会喜欢添加一些美图。这个时候我们需要自己定义一个div,而不是用导航条上面那片区域的背景图片来解决。因为那会导致一些背景和插件色块重叠,看起来不美观。而且本例还要达成让用户来自定义这个背景图片的效果。 这里我们就得说一下Discuz!一个很有意思的地方。在模版里面,注释的内容并不是没用的,相反,注释的内容是可以被当作是PHP代码运行的。让用户自定义图片,我们就需要调用cookie.在Discuz!里面提供了一个调用COOKIE的一个标准方法:$_G['cookie']['cookiename'],这样我们就能调用名为cookiename的cookie了。具体实现代码如下(需要你有基本编程基础): 在discuz.htm中第一段注释下面添加:

<!--{if isset($_G['cookie']['sttbg'])}-->
<div id="headerpic" class="headerpic" style="background:url($_G['cookie']['sttbg'])"></div>
<!--{else}-->
<div id="headerpic" class="headerpic"></div>
<!--{/if}-->

然后去DIY添加静态模块,选择自定义HTML模版。添加如下代码:

<ul>
<li>
<span style="float:left">顶部<a href="https://www.baidu.com/s?wd=%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYPHFhmyR3nHP-Phw9Pjbk0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtYrHRLP1R3P1Dsn1TLnHcsnjf" target="_blank" class="baidu-highlight">图片链接</a></span>
<form name="setdiyoptbg" onsubmit="setcookie('sttbg',setdiyoptbg.sttbg.value,60*60*24*30*12);">
 <input type="text" name="sttbg" />
 <input type="submit" value="设置" />
</form>
</li>
</ul>

然后在common文件夹内新建extend_common.css,添加如下代码:

.headerpic {background:url({STYLEIMGDIR}/{HEADERBG}) no-repeat right 0 transparent;background-size:cover;background-position:0% 10%;height:220px;box-shadow:0 0 15px #8f8f8f;}

最后在模版设置里面的最下方添加自定义参数HEADERBG,内容指向想添加为默认头部图片的图片文件地址。图片文件前面添加了STYLEIMGDIR,这样就可以直接把图片放在模版文件夹里面的扩展图片文件夹里,不会搞乱格式。

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:如何制作Discuz模板? | 猎微网

评论已关闭!