discuz模板制作教程，一步一步教你做一个属于自己的模板

洪湖水乡

    discuz系统模版制作教程不多，而真正把模版制作方法讲明白的几乎没有，本文讲解如何从零开始制作制作一套属于自己的模板。discuz系统模板和其他的cms系统模板机制并不太一样，而且更改的代价较高，需要投入的时间和精力绝对是其他cms系统的基本，但是如果理解他的运行机制，再制作模板时也没有那么困难。

    discuz主要分为论坛和门户两个部分，首先是同步论坛和门户的导航部分，使门户文章与论坛的导航菜单一直（不改的话门户的导航会变形），打开discuz的根目录下portal.php文件，找到下面这句代码，把等号后默认的1改为0，如下。

    $_G['disabledwidthauto']=0;

    模板制作步骤，一步一步跟我开启模板制作。

    1、开启开发者模式

    请首先打开config/config_global.php文件，在文件结尾最后“?>”的前面一行添加如下代码，开启模板开发者模式。其实单纯的简单模板制作，这一步开不开启并没有什么问题。

    $_config['plugindeveloper']=1;

    2、新建模板文件目录

    打开template文件夹，新建一个名为“astemplate”的文件夹，然后在astemplate文件夹里面新建一个“common”文件夹，接着打开template\default文件夹，把discuz_style_default.xml、index.htm、preview.jpg、preview_large.jpg这几个文件复制，粘贴到我们新建的template\astemplate文件夹里面；再把default文件夹里面“style”文件夹也复制到我们新建的astemplate文件夹里面。

    discuz模板文件目录

    ①修改配置文件

    必须用记事本（其他软件打开是乱码）打开我们新建的模板文件夹：

    template\astemplate\discuz_style_default.xml这个文件，修改第5~8行的内容：

    风格名称：随便取名，如pc风格

    模板的识别id：只能是数字，如2、40、106等随便，但不能是“1”，因为默认1已经被默认模板占用了。

    后台显示的模板名称：只要和原来的不一样就行，名字随便取。

    模板目录：第8行模板目录，一定要填写正确，填写我们新建的模板文件夹名称即可。

    下图是我的模板和系统模板的配置文件的对比，就改第5~8行即可，其他的保持原来的方式，修改完后保存，可以参照我我的修改。

    discuz模板配置文件

    ②安装新建的模板并启用

    修改完配置文件，就可以安装我们的新模板了，可以看到在新建的astemplate文件夹里面还有两张图没有改，这两张图是模板封面，如果要改的话只要图片尺寸和格式一样就行，我们这里不改了，并不影响功能。

    进入网站后台——模板，点击安装我们刚创建的新模板，安装完成后在新模板上把“电脑版”选上，再提交一次，这样，我们的新模板就启用了（当然只是电脑端）。

    discuz后台模板管理

    3、附加css文件添加

    如需要自定义前端css和修改前端页面的样式，就必须要添加附加css文件，打开新建的模板template\astemplate\common文件夹，在common文件夹里面分别创建extend_common.css、extend_module.css这两个css文件，注意文件名不能是其他的extend_common.css里面记录的事我们自定义或系统css全站的属性，对前端全部页面均起作用；extend_module.css的作用是用于修改系统默认前端样式，仅对前端制定页面起作用，比如只修改帖子内容页的某个地方，我们就可以使用extend_module.css来实现。

    4、模板文件夹解释和使用方法

    我们打开系统默认的default模板文件夹，可以看到下图所示的文件和文件夹。我在图片上写了每个文件夹所代表的前端页面模板，这些文件夹并不是都使用，一般情况下，常用的只有common、forum、portal和touch这几个文件夹模板。

    discuz模板目录解释

    我们在制作模板时一般是按需添加上面的模板文件夹，如果是全站修改，那么上面的都要，同时模板文件夹和模板文件的名称都要和系统默认的一样，不能改变名称，否则系统不能识别。下面通过在logo右边加个文字举例模板的制作。

    分析：这个位置是全站显示的，所以需要用的网页的头部文件。

    ①复制文件：去default\common文件夹里面把header.htm和header_comm.htm这两个文件复制粘贴到新的astemplate\common文件夹里面，下图所示：

    ②修改html排版并添加需要的文字

    打开astemplate\common\header.htm文件，找到logo位置，添加需要的文字，由于要进行排版，需要增加额外的div，同时使用css来控制样式。

    ③使用css样式文件

    由于这个是在logo的旁边，也就时全站显示的样式都是一样的，所以我们要使用能控制全局的css文件，打开astemplate\common\extend_common.css，在里面添加我们自定义的css属性即可。也就说extend_common.css这个样式文件的作用主要用于我们自定义的css样式，修改完后清除缓存、刷新前台就能看点效果了。

    ④内页和列表不同的样式

    比如我希望论坛首页和论坛内页，上面的文字显示颜色不同，首先分析：因为html部分没变，只是内页和首页之分，discuz有专门针对这种设置的功能，这时只需要打开

    astemplate\common\extend_module.css这个文件，在里面分别书写首页和内页的样式即可，下图所示：

    extend_module.css这文件非常好用，他以“注释”的方式来对我们需要控制的页面进行块级和页面级修改：/**forum**/代表的是论坛所有页面，/**forum::index**/代表轮首页，/**portal::view,portal::list**/代表文章详情页和文章列表页，每个注释段都要以/**end**/结束，下面是只针对论坛首页生效的css代码。

    /**forum**/

    .bm.cl{margin:15px0!important;}

    #scbar{box-shadow:0px5px5px-2px#ccc;}

    /**end**/

    要实现论坛首页和内页的颜色不同，只要在extend_module.css文件中分别控制即可。

    /**forum::index**/

    .mn{overflow:inherit}

    /*这里是论坛首页样式*/

    /**end**/

    /**forum::forumdisplay**/

    .pbn{box-shadow:0010px#ccc;}

    /*这里是论坛列表页样式*/

    /**end**/

    /**forum::viewthread**/

    .pl{box-shadow:0010px#ccc;}

    /*这里是论坛帖子详情页样式*/

    /**end**/

    关于控制每个页面的写法可以参考default\common\module.css文件中的说明，比如用户页面、日志等，我们还可以对系统默认的css进行修改，比如想要修改帖子详情页内容的边框，使用浏览器的“审查元素”功能，找到该class或id，然后在extend_module.css文件中直接修改即可，即使我们修改的class和其他页面有重复，但在extend_module.css中的元素只影响指定页面，不会影响全站。

    5、模板运行机制简析

    ①模板文件夹、文件名称要和default一致：介于此，可以直接复制default里面的更方便。

    ②系统默认的css标签不宜更改：系统原有的html标签最好直接使用，这样节省时间，如果要使用全新自定义的css标签，全站都要改，很费时间。

    ③自定义css标签写在extend_common.css或extend_module.css里面，css文件的生效权重由大到小为：extend_module.css>extend_common.css>系统css。

    ④不是每个页面都要制作一个模板：比如论坛只要改帖子详情页，就把default\forum\discuz.htm这个文件复制粘贴到我们的新模板中修改即可，其他的不需要复制，缺省的模板文件系统会自动去default文件夹里面补充的。discuz默认的模板不能删除。

    有了上面这些，制作一套属于自己的模板其实也挺快的，点赞关注，持续分享优质经验。