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. ASP.NET读取配置文件发送邮件

    之前写过一篇文章C#使用SMTP发送邮件 后来做了改进,改成读取独立的配置文件,本文只记录读取配置文件的部分,发送部分见上面的链接. 读取配置文件C#代码: using System; using S ...

  2. easyui datagrid 的分页刷新按钮

    datagrid  刷新bug: 情形: 当用户A,B  同时操作 datagrid时(记录1,记录2.记录3).如果A如果删除记录1,  B此时已选中了记录1 ,记录2 , 这时B点击分页中的刷新按 ...

  3. .net基础知识

    1.private.protected.public.internal修饰符的访问权限  Private:私有成员,只能在当前类中才可以访问  Protected:保护成员,在当前类和继承类中访问  ...

  4. ......那么Win8.1怎么去掉文件夹?

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-11) 细心的朋友会发现,在Win8.1这台电脑(计算机)中,除了我们最熟悉的磁盘外,还新增了视频.图片.文档.下载.音 ...

  5. CSS复合样式

    关于font OK,我们先从font来谈起. 如下一段代码: div{ font-size: 14px; font-family: '\5FAE\8F6F\96C5\9ED1'; font-weigh ...

  6. 高斯混合和EM算法

    首先介绍高斯混合模型: 高斯混合模型是指具有以下形式的概率分布模型: 一般其他分布的混合模型用相应的概率密度代替(1)式中的高斯分布密度即可. 给定训练集,我们希望构建该数据联合分布 这里,其中是概率 ...

  7. jquery 预览提交的表单

    预览表单,查看后确认提交或者返回重填 演示 XML/HTML Code <form class="mform" id="myform" method=&q ...

  8. Codeforces Round #306 (Div. 2) E. Brackets in Implications 构造

    E. Brackets in Implications Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/conte ...

  9. Shadow Mapping 的原理与实践(二)

    3) 定义并生成Shadow Map纹理 texture2D Lamp0ShadowMapColor : RENDERCOLORTARGET < float2 ViewPortRatio = { ...

  10. 007_尚学堂_高明鑫_android 之项目的打包apk与apk的反编译

    http://www.tudou.com/programs/view/kMQlxff8evM/