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. CodeForces 709C Letters Cyclic Shift (水题)

    题意:给定一个字符串,让你把它的一个子串字符都减1,使得总字符串字典序最小. 析:由于这个题是必须要有一个字串,所以你就要注意这个只有一个字符a的情况,其他的就从开始减 1,如果碰到a了就不减了,如果 ...

  2. ebj笔记

    所有EJB3.0开发商都必须提供一个JMS provider的实现,JMS provider对于message-driven bean而言绝对是必须的.JMS是一套用于访问企业消息系统的开发商中立的A ...

  3. Java日期格式化

    翻译人员: 铁锚 翻译时间: 2013年11月17日 原文链接:   Simple example to show how to use Date Formatting in Java 代码示例如下, ...

  4. 浏览器判断及IE版本区分

    备注:在火狐下和IE下,js的执行不一致,很多语句结果不一致,其他浏览器也可能,注意验证,多用if else包括window.onload: ①只用来区分IE和非IE内核的浏览器,由于只有IE支持Ac ...

  5. WebService《JavaEE6权威指南 基础篇第4版》

    [Web服务] 为运行在不同平台和框架之上的软件提供了互操作的标准方式.良好的互操作性和可扩展性.消息采用自包含文档的形式. ——解决异构系统之间交互.解决异构系统通信问题:  1.通过XML,JSO ...

  6. 移动端轮播图插件（支持Zepto和jQuery）

    一. 效果图 二. 功能介绍 1. 支持图片自动轮播和非自动轮播 2. 支持点击和滑动. 三. 简单介绍 代码都有注释,逻辑简单,不做更多赘述. 1. 在你的html中添加一行. <sectio ...

  7. Mysql用户密码设置修改和权限分配

    我的mysql安装在c:\mysql 一.更改密码 第一种方式: 1.更改之前root没有密码的情况 c:\mysql\bin>mysqladmin -u root password " ...

  8. CloudSTack4.2 查看所有虚拟机API测试

    http://192.168.153.34:8080/ client/api? command=listVirtualMachines &response=json &sessionk ...

  9. zookeeper的安装和启动

    最近的手上一个项目要用到dubbo,顺便研究下zookeeper 1.下载 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,下载解压到D:\t ...

  10. cocos2dx 网络编程（CCHttpRequest和CURL两个方式）

    转自:http://blog.csdn.net/sg619262284/article/details/20144087 在使用之前需要设置一些参数:参考:http://blog.csdn.net/w ...