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. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  2. js 基于函数伪造的方式实现继承

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. Java字面常量与常量池

    Java中的字面常量(区别于final创建的有名常量)通常会保存在常量池中,常量池可以理解为像堆一样的内存区域.但是常量池有一个特性就是,如果常量池中已存在该常量将不会再次为该常量开辟内存 还是看个程 ...

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

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

  5. Emit Mapper官方文档

    概述 优点 快速指导 类型转换 用户配置

  6. C++中C/C++格式化输出

    对于不同的机器,一此格式化输出的函数经常会得不到正确的输出,比方小端上的程序在大端上执行等,另外,在日常程序开发时,也会经常被这种小问题而困扰非常久.终于发现是她的问题.不免有点叹息,以下对print ...

  7. [转]AsyncDisplayKit 教程：达到 60 FPS 的滚动帧率

    [原文:https://github.com/nixzhu/dev-blog/blob/master/2014-11-22-asyncdisplaykit-tutorial-achieving-60- ...

  8. Codeforces Gym 100463E Spies 并查集

    Spies Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments Desc ...

  9. 2013 French Open Semifinal Press

    http://v.youku.com/v_show/id_XNTY4MTgzOTEy.html?firsttime=0 Novak, can you take any confirt   for qu ...

  10. Fitness training

    2014-01-14 第一次跑步,结束后大腿酸. 2014-01-15 第二次跑步,跑的过程中臀部酸痛,结束后大腿酸痛. 已经进行跑步8次了,后6次,每次3000米 2014-02-06  plank ...