discuz怎么添加⾃定义模板
Discuz!X3是Discuz!建站程序系列的最新版本，提供了易于DIY的环境，很多新⼈喜欢问：我看见了那么多好看的模版，但是不符合我当前⽹站的需求，如何⾃⼰去DIY？
当 然他们肯定去过官⽅论坛教程，去看了那么多⽂字以后依旧不知道如何去编辑。其实最快开始DIY模版的道路是下载⼀个符合你⼼⽬中要求的框架的模版。例如 我喜欢PHPWIND那种导航条置顶的风格，我就去下载了⼀个导航条置顶的模版，在这基础之上去DIY会相对容易⼀点。
⾸先我们需要了解的不是怎样开始DIY，⽽是需要知道，这页⾯是属于HTML代码制作的，HTML是⼀种标记语⾔，这就意味着你想加⼊什么功能的时候就要去搜索相关的功能标记。要了解HTML是如何运作的，是如何展现样式的，我们这⾥可以提供⼀个最基本的DIV代码。
<div id="headerp"class="cssheader">headerpic</div>
这 个div会显⽰headerpic这⼏个字，这个div的标识符是headerp，其他代码和程序可以通过这个表⽰符来访问这个div；这个div引⽤了cssheader这个css样式，并且除⾮cssheader⾥⾯相关样式(当前相关样式:background)后⾯加上了!important重要 标记，headerp这个div都会显⽰background(背景)为⾊板⼗六进制代码ccc的颜⾊(灰⾊)。
这 ⾥强调⼀下!important重要标记，在Discuz!⾥⾯，有很多运⽤到!important标记的地⽅。其中最常⽤的地⽅就是DIY模块，在 DIY模块⾥⾯设定的边距等等数据会被加上!important标记，出现这样标记的时候除⾮有⽐这个!important更⾼级的!important 声明，否则你设定的其他同样的样式都会被这!important前⾯的语句盖住。例:
<div id="headerp"class="cssheader">headerpic</div>
.cssheader{ background:#aaa!important;}
#headerp{ background:#bbb;}
在 这个案例中，由于css样式.cssheader被添加了!important标记，所以即使 element.style(background:#ccc)⽐.cssheader在样式优先顺序⾥⾯更⾼级，background属性也会使 ⽤.cssheader⾥⾯加了!important的数据。
记住了这些以后让我们来真正去DIY属于⾃⼰的模版吧。
Discuz!X的模版位于 根⽬录/template ⽂件夹⾥⾯，在这⾥⾯每⼀个⽂件夹都会被识别成⼀个新模版。如果你有想要安装的模版，只需要把模 版的整个⽂件夹复制到这个⽬录然后进⼊后台-界⾯-风格设置⾥⾯到对应的模版然后安装。安装好以后勾选为默认模版以后提交即可。创建模版的时候我们需要
把default(默认模版)⽂件夹⾥⾯的discuz_l复制到你的模版⽬录/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[康盛创想（北京）科技有限公司]]></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="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[X3.1]]></item>
</item>
</root>
需要注意的是这⾥的Title值不能改，必须保持原样才能够被安装和运⾏。version代表你这个模版能适⽤的Discuz!版本。可以⽤逗号分隔，例:
<item id="version"><![CDATA[X2.5,X3.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 {width: 145px;padding:8px;background: #FFF;box-shadow:0px0px10px rgba(0,0,0,0.2);}
.pls .avatar {text-align:center;}
.pls p, .pls .pil, .pls .o {margin: 10px20px;text-align: center;}
.dvbg {background: #fff;}
/** end **/
这些代码只在区域是forum::viewthread,group::viewthread,forum::trade和forum::misc⽣效。
<!--{template common/header}-->
你在模版⽂件会看见这样的注释代码，这代码实际上能调⽤模版⽂件夹⾥⾯的⽹页⽂件，要求后缀是.htm，例如我在forum⽂件夹⾥⾯添加了⼀个timeline.htm，那么就可以添加如下代码在响应位置调
⽤timeline这个页⾯
<!--{template forum/timeline}-->
我们现在掌握了这些知识以后可以考虑开始初步为⽹站添加点料了。
css怎么创建我 们都很喜欢在⽹站上⾯添加⼀个⼤⼤的图⽚横幅，当然不⼀定是⼴告，也会喜欢添加⼀些美图。这个时候我们需要⾃⼰定义⼀个div，⽽不是⽤导航条上⾯那⽚区 域的背景图⽚来解决。因为那会导致⼀些背景和插件⾊块重叠，看起来不美观。⽽且本例还要达成让⽤户来⾃定义这个背景图⽚的效果。
这⾥我们就 得说⼀下Discuz!⼀个很有意思的地⽅。在模版⾥⾯，注释的内容并不是没⽤的，相反，注释的内容是可以被当作是PHP代码运⾏的。让⽤户⾃定义图⽚， 我们就需要调⽤cookie.在Discuz!⾥⾯提供了⼀个调⽤COOKIE的⼀个标准⽅法：$_G['cookie']
['cookiename']，这样我们就能调⽤名为cookiename的cookie了。具体实现代码如下(需要你有基本编程基础)：
在discuz.htm中第⼀段注释下⾯添加：
<!--{if isset($_G['cookie']['sttbg'])}-->
<div id="headerpic"class="headerpic"></div>
<!--{else}-->
<div id="headerpic"class="headerpic"></div>
<!--{/if}-->
然后去DIY添加静态模块，选择⾃定义HTML模版。添加如下代码：
<ul>
<li>
<span >顶部图⽚链接</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 right0transparent;background-size:cover;background-position:0% 10%;height:220px;box-shadow:0015px#8f8f8f;}
最后在模版设置⾥⾯的最下⽅添加⾃定义参数HEADERBG，内容指向想添加为默认头部图⽚的图⽚⽂件地址。图⽚⽂件前⾯添加了STYLEIMGDIR，这样就可以直接把图⽚放在模版⽂件夹⾥⾯的扩展图⽚⽂件夹⾥，不会搞乱格式。
⾄此，添加⾃定义内容的教程结束。
这个教学旨在去学会如何学习制作，⽽并不是学习制作⽅法，就是授⼈以鱼不如授⼈以渔的意思。概念会⽐较泛，必须要⾃⼰去动⼿做才能理解。
我 们很多时候不⽌要添加元素，还需要修改已有的元素。这个时候我们就需要开发者模式了，不然很多时候你会⼀头雾⽔。这⾥推荐chrome和ie10以上的开 发者模式，都⽀持页⾯编辑，即时让代码⽣效。满意了以后直接去修改对应⽂件即可，不过你要熟悉那部分的代码，就如同上⼀步添加模块⼀样你需要知道所有代码 的意思，不然很可能导致失败效果。
这⾥特殊说⼀下plugin接⼝，当你在修改元素的时候，可能会导致⼀些插件⽆法 被正常使⽤，这个时候你就需要尝试修改⼀下插件接⼝的位置。例如我把viewthread_node.htm⾥⾯的⽤户名移动到了头像下⽅，这个时候某插 件的橙名功能失效了，联系插件作者⽆果以后决定⾃⼰亲⼿来修改模版以达到适应插件的效果。
⽹页跟我们平时所知道的顺序阅读载⼊⽅式有点不⼀样，⽹页的代码只会读取已经载⼊好的地⽅，所以接⼝不能放在程序代码前⾯，经过分析插件源⽂件 ，我把那个接⼝放在了修改了以后的⽤户名那段代码的后⾯，成功修复了橙名不显⽰的问题。代码如下
<!--{if $_G['setting']['authoronleft']}-->
<div class="anc">
<div class="authi"><a href="home.php?mod=space&uid=$post['authorid']"target="_blank"class="xw1
"{if $post[groupcolor]} style= "color: $post[groupcolor]"{/if}>$post[author]</a>$authorverifys</div>
</div>
<!--{/if}-->
<!--{hook/viewthread_profileside $postcount}-->
注意这⾥⾯最后的hook注释句，这就是Discuz插件的⼊⼝。通过移动它来调整插件载⼊的位置。
⾄此，我独家的Discuz⾃定义模版教程编写完毕。以上内容均为原创纯⼿打，你在⽹络上⽆法到第⼆份⽐这篇⽂章还要早的同内容⽂章，如有不懂请在评论⾥⾯追问。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论