前言原创文章欢迎转载，请保留出处。若有任何疑问建议，欢迎回复。邮箱:Maxwell_nc@163.com
稍微花了点时间定制了一个简单的dwz网站，主要利用框架制作了主界面和简单地调用了jQuery.ajax查询json。
利用dwz框架模板
之前已经搭建好dwz了，由于之前搭建的dwz后来使用的时候出现了bug，所以这里我使用新版的dwz 1.4.6，可以到https://code.google.com/p/dwz/downloads/list下载。这里我们只是使用dwz框架而已，所以暂时不需要修改nginx的配置文件。
首先我们要创建一个网站根目录，我这里起名为dwz-diy，从演示文件夹里面复制js目录、themes目录、uploadify目录和dwz.frag.xml文件（这些是dwz框架的核心文件）到我们的网站根目录，如下图所示：
接下来新建一个文件，改名为index.html（作为网站首页），我们编辑这个文件， 首先，添加包含dwz框架的头部，代码如下：
==>我定制的DWZ========”text/css” media=”screen”/><!–[if IE]><link href=”themes/css/ieHack.css” type=”text/css” media=”screen”/><![endif]–><!–[if lte IE 9]><script src=”js/speedup.js” type=”text/javascript”></script><![endif]–>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=></head></html>
添加body并设置成不显示滚动条
=></body>自定义主题
首先我们要添加一个横幅为我们显示logo之类的：
====>=>====>>
从上面代码可以看出我定义了一个新的主题叫mytheme，这里我们通过分析dwz的源码实现自己定制一个主题。 从/js/dwz.theme.js文件可以看到，dwz寻找主题是通过寻找themes目录下对应的主题名目录下的style.css来实现的，所以我们也可以自己定义一个主题。
根据上面的分析，理论上我们应该进入到themes目录下然后创建一个mytheme目录，然后手动编写style.css然后导入资源图片，这样显得比较繁琐，我们不是做企业项目，不需要这么做，我们复制一个目录，改名为mytheme（我这里选的是green）作为我们的主题模板，然后通过修改实现自己的主题。 这里我们简单修改下（其实只要懂CSS的基本想怎么改就怎么改了），就以修改logo为例，要选一张alpha通道透明的png文件，这样可以使效果更完美。 放到mytheme的images目录下，注意我这里选的是green目录作为模板，所以本身没有logo.png，如果选择default作为模板，那么应该会提示覆盖。
接下来我们修改mytheme目录下的style.css使logo生效，首先替换关键字/green为/mytheme（如果选择其他目录作为模板自行修改），顺便把#header .logo的背景图片地址改成mytheme目录下的（默认是default目录下的logo），如下图所示：
修改后我们要让dwz识别我们的主题，打开dwz-diy/themes/css下的core.css文件，在#header .themeList下添加以下代码：
::-40px -20px;}
如下图所示：
这样配置文件就能识别了，但是还需要在网页启动的时候加载dwz主题等等资源，在head标签中添加javascript：
<script type=”text/javascript”>$(function(){DWZ.init(“dwz.frag.xml”, {debug:false, // 调试模式 【true|false】 callback:function(){initEnv();$(“#themeList”).theme({themeBase:”themes”}); // themeBase 相对于index页面的主题base路径 }}); }); </script>
修改到这里dwz已经可以识别我们的主题了，不过我们还缺少一些div标签来作为测边栏和内容部分，我们在index.html添加侧栏代码：
===>>=>收缩==>Folder==>页面>=>==>==>=>>></div>
这里我设置了一个目录4个页面，分别是dwz创建新网页的3种情况：
另外设置了一个页面调用JSON数据。然后我们添加右侧内容部分，代码如下：
=======>>====>===>>></div>
这里有一个默认的主页，你可以自己修改。 还可以添加一个footer的div标签来完善页面：
=>
这里基本修改完成，我们先预览下效果，首先修改nginx配置
直接修改vi /etc/nginx/conf.d/default.conf配置文件，把root改成我们的dwz-diy目录，重启nginx，具体配置方式参考我之前的文章 然后在浏览器输入localhost：
通过点击修改皮肤的按钮来切换成自己的皮肤，剩下的就是把其他网页完成。
自定义页面
这里可以自己定制，我给出我写的网页源码供大家参考：
主页代码有的事情现在不做，就一辈子也不会做了。
