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. 行为类模式（一）：职责链（Chain Of Responsibility）

    定义 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系. 将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. UML 优点 将请求的发送者和接收者解耦 可以 ...

  2. CSS Hack技术（一）

    这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技 ...

  3. Linux 上的基础网络设备详解

    抽象网络设备的原理及使用 网络虚拟化是 Cloud 中的一个重要部分.作为基础知识,本文详细讲述 Linux 抽象出来的各种网络设备的原理.用法.数据流向.您通过此文,能够知道如何使用 Linux 的 ...

  4. PHP网址

    15个魔术方法的总结: http://blog.csdn.net/bossdarcy/article/details/6210794 PHP代码重构:http://blog.csdn.net/tony ...

  5. 复选框输入Android Studio 如果修改LogCat的颜色，默认全是黑色看着挺不舒服的

    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...

  6. Educational Codeforces Round 4 B. HDD is Outdated Technology 暴力

    B. HDD is Outdated Technology 题目连接: http://www.codeforces.com/contest/612/problem/B Description HDD ...

  7. HDU 5573 Binary Tree 构造

    Binary Tree 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5573 Description The Old Frog King lives ...

  8. (高精度运算4.7.26)POJ 1220 NUMBER BASE CONVERSION(高精度数的任意进制的转换——方法:ba1----->10进制----->ba2)

    package com.njupt.acm; import java.math.BigInteger; import java.util.Scanner; public class POJ_1220_ ...

  9. Linux进程通信之System V消息队列

    System V消息队列是Open Group定义的XSI,不属于POSIX标准.System V IPC的历史相对很早,在上个世70年代后期有贝尔实验室的分支机构开发,80年代加入System V的 ...

  10. Redis 安装与简单示例 <第一篇>

    一.Redis的安装 Redis下载地址如下:https://github.com/dmajkic/redis/downloads 解压后根据自己机器的实际情况选择32位或者64位.下载解压后图片如下 ...