如何做一套简易的模板

如何开始制作一套简单的模板？

快速创建自己的风格

1、首先在template目录下建立你的风格文件夹！

2、去默认模板template/default/目录下面去copy一个xml文件，放到你刚才创建好的模板目录下！

3、打开这个xml文件修改，一下几个参数

Xml参数配置说明

1. <item id="name"><![CDATA[默认风格]]></item>
   
2. <item id=“templateid”><![CDATA[1]]></item> (注意这里id一定不要重复，确保唯一性)
   
3. <item id="tplname"><![CDATA[默认模板套系]]></item>
   
4. <item id="directory"><![CDATA[./template/default]]></item>
   
5. <item id="copyright"><![CDATA[康盛创想（北京）科技有限公司]]></item>

复制代码

默认风格图片扩展及其他参数

其他xmL的参数都是记录的默认风格的初始配置参数。

下面我重点要说的是，关于扩展图片的问题！

注意：我们在做的时候尽量保持精简干净的原则，不要重新设置imgdir这个参数，只需要重新指定一下扩展目录就可以了。我们自己的图片单独放到这个文件目录就可以了。

1. <item id="imgdir"><![CDATA[template/ukasky/image/common]]></item>

复制代码

如果你重新配置了这个目录，就要完全copy一份默认的图片，这是完全没有必要的

1. <item id=“styleimgdir”><![CDATA[template/你的模板文件夹名称/你的文件目录(images)]]></item>

复制代码

可以与默认图片目录相同

修改完指定参数后，保存xml文件，然后重命名，xml文件名为discuz_style_你的模板名称.xml
这里最好规范的统一一下，风格文件夹的名称，xml的文件名和xml配置里的模板名统一。

这样一套最简陋的完全copy默认套系模板下过的模板便制作完成了！

复制完毕开始折腾吧

以上xml文件建立后，我们自己的模板就成型了，下面我们在原有模板的基础上开始我们自己的模板制作吧！

我们选择刚刚新建的新套系模板为默认模板，这是我们就可以，以默认模板为基础修改我们自己的默认风格了。

所有的静态展示htm文件，你可以进行修改了。比如最常用的里只是，我们要修改论坛首页，这个页面放置在template/default/forum/discuz.htm文件中。

我们变可以再我们新建的默认模板下面，新建一个forum文件夹然后将，默认的discuz.htm拷贝到我们刚刚建立的forum文件夹。根据discuz默认的机制，先读取当前模板套系的文件，如果没有则引入默认的模板文件。

Common文件夹是我们经常用到的默认的常用公共文件的存储地。

在这里我们扩展css的时候，只要新建一个extend_XXX.css文件，他就会在解析的时候自动追加到对应的css文件底部。所以大家不要再重新copy一个多余的css文件到这里了。

---

看看具体的模板文件

大家看看discuz.htm文件，了解一下常用的discuz模板文件构成！

如何制作频道模板？

经常看到网上有人想copy别人的首页门户，在此我给大家介绍下如何去模仿别人的diy首页。如果你没有一点前端基础的话，就需要自己一点一点默认的diy了。不过我们还是比较习惯接受自己通过搭建起自己的htm结构，在搭建好的架子上开始diy，这样可控性更好一些。首先你我来们来做一些必要的diy首页时的一些准备工作，这些工作都是必须的，这样才不至于在以后的调试中避免不必要的错误。

首先不能缺少的几个部分如下：

1、引入头部文件代码

如果你的头部和默认的头部是不一样的，你只要把自己做好的头部放到common目录下，之后把下面的header文件改成你自己命名的文件名就可以了。注意，请尽量不要遗漏一些必要的代码。Header中的代码大部分都很关键，如果没有非常必要，尽量少的去删减，以免造成不必要的麻烦。

1. <!--{subtemplate common/header}-->

复制代码

2、diy的样式代码

我经常碰到很多的diy首页中，有人遗漏这段代码，他基本上前期对你的diy页面有很少影响，不过如果你diy的时候选择样式的话，点击就会无效。前台diy的时候div的样式是写在这个id的div里面的，如果没有你是无法对你的div指派一些样式的值。

1. <style id="diy_style“ type="text/css"></style>

复制代码

3、引入自己diy的css代码

1. <link href="$_G['setting']['csspath']template/default/portal/index/style/style.css" rel="stylesheet" type="text/css" />

复制代码

4、尾部文件的导入

这个文件也存在大量的系统处理程序，请尽量少的删减它的代码。如果你的尾部和默认的不同，那你可以自己重新copy一份文件就可以了然后去掉必要的html代码。

1. <!--{subtemplate common/footer}-->

复制代码

以上就是要做的的基本步骤。