使用Nginx SSI功能辅助HTML页面设计

SSI,Server Side Include,支持html静态文件内以

<!--#include file="/layout/header.html"-->  的方式引入其他html静态文件,这一功能特性有助于页面设计的碎片化和效率效果提升(设计页面主要关心content内容的设计,而且碎片不会在多个页面存在N个copy,而是一次性都可以修改更新),demo内容见附件qingbo_design_demo

demo目录文件结构:

设计页面目录在svn的同步管理下,可以使用eclipse或者dreamwaver等修改html页面,然后同步提交到svn即可

readme文件内容

1,解压安装nginx windows版本

2,配置eclipse的external tool configuration

Location,选择Browse File System,找到nginx.exe

Working Derectory,选择nginx解压目录

Arguments,运行nginx 空,停止nginx -s quit,重启nginx -s reload

3,将nginx/conf/nginx.conf链接到eclipse,方便编辑配置nginx

配置http,或server,或location

ssi on;

配置默认服务的根

location / {

root E:\sapling\demo\qingbo_design_demo; #设计页面路径

index index.html;

}

4,运行nginx,访问http://localhost/index.html

5,编辑html,并按碎片划分,按以下方式拼接碎片代码

<!--#include file="/layout/header.html"-->

6,一级页面的布局,

/layout/head.html,引入资源css+js等(一定要是公共的资源)

/laytou/header.html,导航区

/layout/footer.html,尾部

7,二级页面的布局和菜单

/user/layout/head.html,二级页面可以有自己的特有碎片(引入特有的样式和脚本),也可以使用一级页面的碎片

/user/layout/left.html,二级页面可能有菜单,甚至是两级菜单

8,index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<meta name="keywords" content="Demo,Index">

<meta name="description" content="Demo HTML design">

<title>index</title>

<!--#include file="/layout/head.html"-->

<!-- 还可以引入页面特有的资源和样式 -->

</head>

<body>

<!--#include file="/layout/header.html"-->

index body content

<br/>

<button onclick="clickme()">Click Me</button>

<!--#include file="/layout/footer.html"-->

</body>

</html>

效果图:http://localhost/index.html

index+about,全局布局碎片

 

用户中心+我的账户,特有布局碎片

 

eclipse配置图:

配置nginx.conf

来自为知笔记(Wiz)

附件列表

时间: 2024-08-29 08:21:29

使用Nginx SSI功能辅助HTML页面设计的相关文章

5 功能4:个人站点页面设计(ORM跨表与分组查询)

1.个人站点页面文章的查询 # 个人站点 http://www.cnblogs.com/wh1520577322/ http://www.cnblogs.com/liucong12345/ http://www.cnblogs.com/kin1492/ (1)用户未找到,404页面构建 url # 个人站点页面设计 re_path(r'^(?P<username>\w+)$', views.home_site, name='home_site'), view 404.html <!DOC

UI设计之页面设计的九个要点!

刚入行的UI设计师,会做一些辅助的工作,大多数时间做的都是等待安排,完成工作.主要就是根据主设计师的设计和规范来制作下层页面,而在这个过程中有很多需要注意的地方,今天就和大家一起细数下层页面设计过程中必须要注意的要点.希望今天的UI设计教程能够帮助到大家. 在平时的工作中,会接触到很多"下层页面设计".下层页面设计就是,根据主设计师设计的主页面进行下层页面的制作.对于页面较多的网站,会经常这样分工协作.在拿到首页设计时,首先要对整体仔细确认.如果这一步没有认真做,接下来的页面就会陷入不

Nginx主要功能及使用

序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器.支持FastCGI.SSL.Virtual Host.URL Rewrite.Gzip等功能.并且支持很多第三方的模块扩展. Nginx的稳定性.功能集.示例配置文件和低系统资源的消耗让他后来居上,在全球活跃的网站中有12.18%的使用比率,大约为2220万个网站.

模块管理常规功能自定义系统的设计与实现(28--多个模块之间的关联[4])

多个模块之间的关联(4) 前面搭建了客户以及客户父模块的一个分支,另一个分支是产品线,还有一个是业务员,然后这三条线归并到订单之上. 前面我贴了我要搭建系统的一张图,现在贴一下数据库的表和其之间的关系情况. 上图中表和我设计的简易销售管理系统是完全一致的.再看一下的模块图,稍微记下下其中的关系,对于看懂下面的内容很有必要. 对于业务员,产品,订单三条分支我建立的过程就不介绍了.现在来看看架构好的菜单: 再看看加好的各个模块的页面: 1.部门和业务员: 2.商品类别 3.商品 4?订单 订单明细

跨终端响应式页面设计入门

跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里有点要提到的是,我们常规会将PC版的页面和移动端设备的页面独立开来设计,这样会让PC端的页面布局更灵活和好维护.如果你希望你的页面能适配包括PC端在内的任何设备,那么下面几个小工具可以方便你顾及旧版本IE所存在的困扰: ⑴ IE8-不能识别HTML5的<hearder>.<article&g

[课程设计]Scrum 3.3 多鱼点餐系统开发进度(下单详细信息页面设计)

Scrum 3.3 多鱼点餐系统开发进度(下单详细信息页面设计)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统WEB 5.Sprint 3时间:12.09-12.18 重案组成员   姓名 学号 博客链接 Github链接 队长 黄冠锋 201406114134 http://www.cnblogs.com/hgf520/ https://github.com/crown999   卢利钦 20140

模块管理常规功能自定义系统的设计与实现(11--Grid导航设计初步[1])

Grid导航设计(初步)[1] 这一节讲一下Grid导航设计.在前面的章节中有看到Grid导航的样子,那是一个模块的父模块(ManyToOne)对子模块的导航操作.现在对于一个"省份"模块,其没有父模块,我们能对其设计成怎么样的导航呢? 只需一步,将一个字段定义为导航字段.进入"模块字段" 点击修改 保存后,刷新页面.再进入"省份模块"后,可以看到grid的左边就会有一个导航列表. 具选中某个导航值,Grid列表中显示的值就会以此值作为条件进行约

写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

我保证你一分钟就能看完这篇文章! 真的.. 角色解释: 需求方:有钱大爷 设计人员:美工殿下 前端工程师:前端文艺青年 一个HTML5页面从提出到完成上线的流程: 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给予反馈 5.设计人员与H5人员根据反馈进行适当调整 6.发布推广 如何提出一个合理的微信HTML5页面设计诉求? 合理分析诉求与公司团队拥有的资源: 1.需求完成时间: 时间给的越多,项目做的

ASP.NET中登录功能的简单逻辑设计

 ASP.NET中登录功能的简单逻辑设计                               概述                               逻辑设计                               1.接收参数                               2.判断参数合法性                               3.访问数据库                               4.保存Session