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
 
 

附件列表

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

  1. 5 功能4：个人站点页面设计（ORM跨表与分组查询）

    1.个人站点页面文章的查询 # 个人站点 http://www.cnblogs.com/wh1520577322/ http://www.cnblogs.com/liucong12345/ http: ...

  2. nginx ssi + ngx_pagespeed 实现micro frontends 开发

    nginx 的ssi 功能让我们可以将不同的拼接起来,ngx_pagespeed 是pagespeed 的nginx 模块,可以帮助 我们解决前端的一些性能优化的问题,通过简单的配置就可以搞定 一张参 ...

  3. WEB入门.五 页面设计简介

    学习内容 Ø        XHTML 的发展历程 Ø        XHTML 和 HTML 的区别 Ø        XHTML的DOCTYPE和基本标签 Ø        CSS 常用属性 能力 ...

  4. SSI注入--嵌入HTML页面中的指令，类似jsp、asp对现有HTML页面增加动态生成内容，见后面例子

    SSI注入漏洞总结 from:https://www.mi1k7ea.com/2019/09/28/SSI%E6%B3%A8%E5%85%A5%E6%BC%8F%E6%B4%9E%E6%80%BB%E ...

  5. Nginx主要功能及使用

    Nginx配置详解   序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富, ...

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

    Scrum 3.3 多鱼点餐系统开发进度(下单详细信息页面设计)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点 ...

  7. 1.注册或登录页面设计：UILabel，UIButton,UITextField

    学习iOS开发已经有一段时日了,之前一直没有系统的对iOS开发的相关知识进行归纳总结,导致很多知识点云里雾里在脑子里形不成iOS开发的思想,现将自己在学习过程中遇到的一些知识进行总结,希望能对iOS初 ...

  8. nginx ssi 配置小细节（一）

    最近工作需要使用nginx的ssi (server side include)技术,在这里,将使用中的一点心得分享一下,也是一种备忘! 首先,nginx的ssi启用很简单,就只有三个最基本的指令: s ...

  9. 页面设计--TextBox

    TextBox文本框 主要介绍  输出感应.允许为空.热点提示等功能 输出感应: 在Textbox文本框属性中找到输出感应设置需要感应的字段 在web中显示感应功能: 允许为空:   点击保存此页面时 ...

随机推荐

  1. CCF 201403-3 命令行选项 (STL模拟)

    问题描述 请你写一个命令行分析程序,用以分析给定的命 令行里包含哪些选项.每个命令行由若干个字符串组成,它们之间恰好由一个空格分隔.这些字符串中的第一个为该命令行工具的名字,由小写字母组成,你的程序 ...

  2. HDU 5777 domino （排序，水题）

    题意:小白在玩一个游戏.桌子上有n张多米诺骨牌排成一列.它有k次机会,每次可以选一个还没有倒的骨牌,向左或者向右推倒.每个骨 牌倒下的时候,若碰到了未倒下的 骨牌,可以把它推倒.小白现在可以随意设置骨 ...

  3. lib和dll的例子

    .dll和.lib的区别 lib是静态库,dll一般是动态链接库(也有可能是别的)比如要编译个exe,lib在编译的时候就会被编译到exe里,作为程序的一部分而dll是不被编译进去,是运行的时候才调入 ...

  4. ASP.NET验证控件RegularExpressionValidator的常见表达式

    可以输入非0和0开头的数字:“^(0*[1-9][0-9]*|[1-9][0-9]*)$”只能输入数字:“^[0-9]*$”只能输入n位的数字:“^\d{n}$”只能输入至少n位数字:“^\d{n,} ...

  5. jquery获取kindEditor值

    KE.show({            id: 'txtMessage',            imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...

  6. Java异常处理中finally中的return会覆盖catch语句中的return语句

    Java异常处理中finally中的return会覆盖catch语句中的return语句和throw语句,所以Java不建议在finally中使用return语句 此外 finally中的throw语 ...

  7. VC++内存区域

    转载声明:本文转载自http://blog.csdn.net/sjxbf/article/details/6441730 一.预备知识—程序的内存分配 一个由c/c++编译的程序占用的内存分为以下几个 ...

  8. hdu4291之矩阵快速幂

    A Short problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. ThinkPHP模板（一）

    如何关闭ThinkPHP的模板缓存 ThinkPHP的模板缓存是无奈关闭的,因为内置的模板引擎是一个编译型的模板引擎,必须经过编译后生成一个可执行的缓存文件才能被执行.但是可以设置缓存的有效期,例如设 ...

  10. 巧妙使用Jquery 改变元素的 onclick 事件

    需要点击图片将套组发布, 页面代码: <img width="20px" src=" <s:property value="IMAGES_PATH& ...