基于nginx + dwz定制一个网站

前言

原创文章欢迎转载,请保留出处。
若有任何疑问建议,欢迎回复。
邮箱:[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>

最终效果

我们再到浏览器浏览localhost就可以看到网站已经搭建完成。

通过上面的例子和dwz给的demo,搭建一个管理系统是十分轻松的,由于时间有限,我就不一一演示了。

所以的源码我上传在:http://download.csdn.net/detail/maxwell_nc/8651959

时间: 2024-10-25 16:18:26

基于nginx + dwz定制一个网站的相关文章

jWriter一个基于jQuery的阅读写作网站的效果库

看了一下据上次更新已经四个月了,时间过的好快.自从上次面试前端岗时js的能力遭到深深的鄙视后,就在补js的坑了.先是各种看书,接着是期末考试,然后家里有事又耽搁了.在此期间想把用来练手的网站的前端部分重构一下,于是手写了一些jQuery的效果,也就是jWriter了.话说扔了几个月又捡起来的结果就是,看书时都感觉清楚无比的方法什么的全部都忘了,三天不练手生,真理啊. jWriter,一个基于jQuery的阅读写作网站的效果库,用到了部分js原生代码不过都有注释.全部代码都没进行封装过,看起来可能

相信很多朋友遇到过网站换服务器的问题,或成功或失败!今天3A网络小钱给大家讲的是自己的一个亲身经历,原先小钱有一个网站是在linux服务器上运行,所用的web服务为nginx+mysql+php,但由于服务器到期,新服务器用的是win2008系统,那就需要只能做好迁移! 前期做的准备 1、必须了解自己网站所用的PHP和MySQL的版本 2、网站大小

相信很多朋友遇到过网站换服务器的问题,或成功或失败!今天3A网络小钱给大家讲的是自己的一个亲身经历,原先小钱有一个网站是在linux服务器上运行,所用的web服务为nginx+mysql+php,但由于服务器到期,新服务器用的是win2008系统,那就需要只能做好迁移! 前期做的准备 1.必须了解自己网站所用的PHP和MySQL的版本 2.网站大小 3.数据库大小 由于网站过于巨大90G,而linux服务器上磁盘空间不够无法压缩,最后我选择的办法是使用FTP传,没想到什么好办法. 网站的数据库大

基于Perl的一个网站监控脚本

朋友给了我一个课题,就是用perl实现一个网站监控的脚本. 这个脚本主要实现的功能就那么几点,每间隔一段时间获取网站的应答状态.网站的响应时间. 如果应答出错,通过邮件的形式将应答状态码发送过来. 首先先处理一下应答状态. 这个可以使用LWP::UserAgent实现. 实现很简单,通过查看CPAN的例子可以看到 http://search.cpan.org/~mschilli/libwww-perl-6.08/lib/LWP/UserAgent.pm require LWP::UserAgen

基于Nginx dyups模块的站点动态上下线

简介 今天主要讨论一下,对于分布式服务,站点如何平滑的上下线问题. 分布式服务 在分布式服务下,我们会用nginx做负载均衡, 业务站点访问某服务站点的时候, 统一走nginx, 然后nginx根据一定的轮询策略,将请求路由到后端一台指定的服务器上. 这样的架构是没有问题的, 但是我们这里考虑几个问题, 1. 网站上下线问题:我们网站平时更新站点的时候是直接覆盖文件,然后重启, 那这样会造成一些请求中断,如果是非核心逻辑那还好, 如果是核心逻辑,那请求中断,会影响一些数据一致性,比如资金, 交易

linux学习笔记——搭建基于nginx的web服务器、多核配置、nginx配置参数

############ 认识nginx #############Nginx:(发音同 engine x)是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,最初供俄国大型的入口网站及搜寻引擎Rambler(俄文:Рамблер)使用.  其优点是轻量级(占有内存少),高并发(并发能力强),事实上nginx的并发能力确实在同类型的网页伺服器中表现较好.目前中国大陆使用ngi

构建基于Nginx的web服务器

构建基于Nginx的web服务器 一.简介 Nginx("engine x") 是一个高性能的HTTP 和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器. Nginx 是由Igor Sysoev为俄罗斯访问量第二的Rambler.ru站 点开发的,它已经在该站点运行超过四年多了.Igor 将源代码以类BSD许可证的形式发布.自Nginx 发布四年来,Nginx 已经因为它的占有内存少.并发能力强.稳定性.丰富的功能集.示例配置文件和低系统资源的消耗而闻名了.目前国内各大

通过浏览器访问一个网站的背后到底经历了什

通过浏览器访问一个网站的背后到底经历了什么 HTTP-Principle-01 前言 来吧,随我一起来整理下HTTP与DNS协议吧,无论你是Dev or Ops这些都是你必须要知道的基础网络知识,如上图所示,我们把用户访问网站的流程大概分为了两大部分: DNS(用于解析域名的IP地址) HTTP(得到IP地址之后从服务器获取数据) 基于上面的两个点,就让我么来深刻的讨论下到底什么是DNS and HTTP把. What is DNS? 域名系统(Domain Name System,缩写:DNS

浏览器访问一个网站的背后到底经历了什么?

如题,通过浏览器访问一个网站的背后到底经历了什么? 内容来自:https://www.cnblogs.com/yangliheng/p/6112955.html 前言 来吧,随我一起来整理下HTTP与DNS协议吧,无论你是Dev or Ops这些都是你必须要知道的基础网络知识,如上图所示,我们把用户访问网站的流程大概分为了两大部分: DNS(用于解析域名的IP地址) HTTP(得到IP地址之后从服务器获取数据) 基于上面的两个点,就让我么来深刻的讨论下到底什么是DNS and HTTP把. Wh

做好一个网站都有哪些步骤?我来谈谈我的经验

一个明确的目标(核心价值) 如果只想做一个网站,却不知道该做什么,那我建议你做一个博客,或者不做网站. 一个好的开始(域名) 要想让搜索引擎和主流app待见,就要选择主流后缀,如.com,.net,.cn这三个后缀在国内服务商网站注册,需要实名认证,如果需要解析到国内服务器,还需要备案,有些后缀不支持备案,这三个后缀都是支持备案的. 如果想要获得免费便捷的备案服务,最好域名和服务器都在腾讯云购买. 如果想让用户记住你的域名,就要购买一个好记的域名,可以是拼音简称,或者是拼音全称,或者是其他谐音,