基于nginx + dwz定制一个网站

浏览数：79 / 时间：2015年06月09日

前言

原创文章欢迎转载，请保留出处。
若有任何疑问建议，欢迎回复。
邮箱:[email protected]

稍微花了点时间定制了一个简单的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框架的头部，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我定制的DWZ</title>

<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>
<!--[if IE]>
<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->

<!--[if lte IE 9]>
<script src="js/speedup.js" type="text/javascript"></script>
<![endif]-->

<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.bgiframe.js" type="text/javascript"></script>

<script src="js/dwz.core.js" type="text/javascript"></script>
<script src="js/dwz.util.date.js" type="text/javascript"></script>
<script src="js/dwz.validate.method.js" type="text/javascript"></script>
<script src="js/dwz.regional.zh.js" type="text/javascript"></script>
<script src="js/dwz.barDrag.js" type="text/javascript"></script>
<script src="js/dwz.drag.js" type="text/javascript"></script>
<script src="js/dwz.tree.js" type="text/javascript"></script>
<script src="js/dwz.accordion.js" type="text/javascript"></script>
<script src="js/dwz.ui.js" type="text/javascript"></script>
<script src="js/dwz.theme.js" type="text/javascript"></script>
<script src="js/dwz.switchEnv.js" type="text/javascript"></script>
<script src="js/dwz.alertMsg.js" type="text/javascript"></script>
<script src="js/dwz.contextmenu.js" type="text/javascript"></script>
<script src="js/dwz.navTab.js" type="text/javascript"></script>
<script src="js/dwz.tab.js" type="text/javascript"></script>
<script src="js/dwz.resize.js" type="text/javascript"></script>
<script src="js/dwz.dialog.js" type="text/javascript"></script>
<script src="js/dwz.dialogDrag.js" type="text/javascript"></script>
<script src="js/dwz.sortDrag.js" type="text/javascript"></script>
<script src="js/dwz.cssTable.js" type="text/javascript"></script>
<script src="js/dwz.stable.js" type="text/javascript"></script>
<script src="js/dwz.taskBar.js" type="text/javascript"></script>
<script src="js/dwz.ajax.js" type="text/javascript"></script>
<script src="js/dwz.pagination.js" type="text/javascript"></script>
<script src="js/dwz.database.js" type="text/javascript"></script>
<script src="js/dwz.datepicker.js" type="text/javascript"></script>
<script src="js/dwz.effects.js" type="text/javascript"></script>
<script src="js/dwz.panel.js" type="text/javascript"></script>
<script src="js/dwz.checkbox.js" type="text/javascript"></script>
<script src="js/dwz.history.js" type="text/javascript"></script>
<script src="js/dwz.combox.js" type="text/javascript"></script>
<script src="js/dwz.print.js" type="text/javascript"></script>
<script src="js/dwz.regional.zh.js" type="text/javascript"></script>
</head>
</html>

添加body并设置成不显示滚动条

<body scroll="no">
<div id="layout"><!--告诉dwz使用默认布局-->
   <!--这里要写页面内代码-->
</div>
</body>

自定义主题

首先我们要添加一个横幅为我们显示logo之类的：

<div id="header"> 
            <div class="headerNav"> 
                <a class="logo" href="http://blog.csdn.net/maxwell_nc">标志</a>

                <ul class="nav"> 
                    <li><a href="http://blog.csdn.net/maxwell_nc" target="_blank">博客</a></li>
                    <li><a href="javascript:void(0);">退出(无效)</a></li> 
                </ul> 
                <ul class="themeList" id="themeList"> 
                    <li theme="default"><div class="selected">默认主题</div></li> 
                    <li theme="mytheme"><div>我的主题</div></li> 
                </ul> 
            </div> 

            <!-- navMenu --> 

        </div>

从上面代码可以看出我定义了一个新的主题叫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下添加以下代码：

#header .themeList li.mytheme div { background-position:-40px 0;}/*设置图标偏移 这里设置的是红色 可以参考/themes/default/images/themeButton.png文件 */ 
#header .themeList li.mytheme .selected { background-position:-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添加侧栏代码：

        <div id="leftside"> 
            <div id="sidebar_s"> 
                <div class="collapse"> 
                    <div class="toggleCollapse"><div></div></div> 
                </div> 
            </div> 
            <div id="sidebar"> 
                <div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div> 

                <div class="accordion" fillSpace="sidebar"> 
                    <div class="accordionHeader"> 
                        <h2><span>Folder</span>简单写几个页面</h2> 
                    </div> 
                    <div class="accordionContent"> 
                        <ul class="tree treeFolder"> 
                            <li><a>页面</a> 
                                <ul> 
                                    <li><a href="main.html" target="navTab" rel="index">我的主页</a></li> 
                                    <li><a href="http://blog.csdn.net/maxwell_nc" target="navTab" rel="page1">我的博客(外部页面)</a></li> 
                                    <li><a href="no_exist.html" target="navTab" rel="navTab" fresh="false">不存在的页面错误测试</a></li>
                                    <li><a href="json.html" target="navTab" rel="jsontest">JSON调用测试</a></li> 
                                </ul> 
                            </li> 
                        </ul> 
                    </div> 

                </div> 
            </div> 
        </div>

这里我设置了一个目录4个页面，分别是dwz创建新网页的3种情况：

普通打开
外部打开
不存在网页时情况。

另外设置了一个页面调用JSON数据。然后我们添加右侧内容部分，代码如下：

        <div id="container"> 
            <div id="navTab" class="tabsPage"> 
                <div class="tabsPageHeader"> 
                    <div class="tabsPageHeaderContent"><!-- 显示左右控制时添加 class="tabsPageHeaderMargin" --> 
                        <ul class="navTab-tab"> 
                            <li tabid="main" class="main"><a href="javascript:;"><span><span class="home_icon">介绍页面</span></span></a></li> 
                        </ul> 
                    </div> 
                    <div class="tabsLeft">left</div><!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" --> 
                    <div class="tabsRight">right</div><!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" --> 
                    <div class="tabsMore">more</div> 
                </div> 
                <ul class="tabsMoreList"> 
                    <li><a href="javascript:;">我的主页</a></li> 
                </ul> 
                <div class="navTab-panel tabsPageContent layoutBox"> 
                    <div class="page unitBox">
                        <div class="accountInfo"> 
                            <p>我的博客:<a href="http://blog.csdn.net/maxwell_nc" target="_blank">http://blog.csdn.net/maxwell_nc</a></p>
                            <p>通过dwz简单定制一个自己的网站</p>
                        </div>   
                    </div> 

                </div> 
            </div> 
        </div> 

    </div>

这里有一个默认的主页，你可以自己修改。
还可以添加一个footer的div标签来完善页面：

    <div id="footer">Copyright &copy; 2015 <a href="demo_page2.html" target="dialog">我定制的DWZ</a> </div>

这里基本修改完成，我们先预览下效果，首先修改nginx配置

技术分享

直接修改vi /etc/nginx/conf.d/default.conf配置文件，把root改成我们的dwz-diy目录，重启nginx，具体配置方式参考我之前的文章
http://blog.csdn.net/maxwell_nc/article/details/45199071
然后在浏览器输入localhost：

技术分享

通过点击修改皮肤的按钮来切换成自己的皮肤，剩下的就是把其他网页完成。

自定义页面

这里可以自己定制，我给出我写的网页源码供大家参考：

主页代码

main.html（这里要注意，target="navTab"的网页需要添加两个div标签表明他是嵌入到navTab中的，其他body标签、head标签之类的不用写），代码如下：

<div class="accountInfo"> 

    <div class="right"> 
        <p>2015年4月29日制作</p> 
    </div> 
    <p><span>DWZ富客户端框架定制</span></p>
    <p><span><pre>http://blog.csdn.net/maxwell_nc<pre></span></p> 
</div> 

<div class="pageCentent"> 
<textarea layoutH="80" style="width:98%"> 
个人定制的dwz 
</textarea> 
</div>

JSON查询页代码

然后我们写一个json数据文件，起名data.json：

{
    "name":["zhangsan","lisi","wangwu"],
    "addr":["beijing","guangzhou","shanghai"],
    "lang":["Chinese","English","Unknown"]
}

读取JSON的网页源码，主要利用jQuery.ajax获取数据，代码如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(function(){
         var DWZ = {
            frag:{}, //page fragment
            _msg:{},
            jsonurl:"../data.json"
         };

        jQuery.ajax({
            type: ‘GET‘,
            url: DWZ.jsonurl,
            dataType: ‘json‘,
            timeout: 50000,
            cache: false,
            error: function(xhr){
                alert( "Http status: " + xhr.status + " " + xhr.statusText);
            }, 
            success: function(json){ 
                document.getElementById("result0name").innerHTML+=json.name[0];
                document.getElementById("result0addr").innerHTML+=json.addr[0];
                document.getElementById("result0lang").innerHTML+=json.lang[0];

                document.getElementById("result1name").innerHTML+=json.name[1];
                document.getElementById("result1addr").innerHTML+=json.addr[1];
                document.getElementById("result1lang").innerHTML+=json.lang[1];

                document.getElementById("result2name").innerHTML+=json.name[2];
                document.getElementById("result2addr").innerHTML+=json.addr[2];
                document.getElementById("result2lang").innerHTML+=json.lang[2];

            }

        });
    }
)

</script>
<div class="accountInfo">
    <p><span>JSON测试</span></p>
    <p><div>所有记录是：</div></p>     
</div>
<table class="table" layoutH="68"> 
    <thead> 
        <tr> 
            <th width="300px">姓名</th>                   
            <th width="300px">地点</th>
            <th width="300px">语言</th> 
        </tr> 
    </thead> 
    <tbody>
        <tr>
            <td id="result0name"></td> 
            <td id="result0addr"></td> 
            <td id="result0lang"></td> 
        </tr> 
        <tr> 
            <td id="result1name"></td> 
            <td id="result1addr"></td> 
            <td id="result1lang"></td> 
        </tr> 
        <tr> 
            <td id="result2name"></td> 
            <td id="result2addr"></td> 
            <td id="result2lang"></td> 
        </tr>        
    </tbody> 
</table>