在做一个网站时,页面上会有很多重复的内容,每个页面写一遍很冗余,修改时还容易遗漏,所以可以把公共的部分写好,放在单独的HTML中,用时引用就行了。

nginx配置ssi可以将单个页面拆分成一个一个的小页面,访问页面时将多个子页面合并渲染输出,通过cms去管理这些小页面,实现当要更改部分页面内容时只需要更改具体某个小页面.

1. 什么是SSI

SSI:Server Side Include,是一种基于服务端的网页制作技术,大多数(尤其是基于Unix平台)的web服务器如Netscape Enterprise Server等均支持SSI命令。

它的工作原因是:在页面内容发送到客户端之前,使用SSI指令将文本、图片或代码信息包含到网页中。对于在多个文件中重复出现内容,使用SSI是一种简便的方法,将内容存入一个包含文件中即可,不必将其输入所有文件。通过一个非常简单的语句即可调用包含文件,此语句指示 Web 服务器将内容插入适当网页。而且,使用包含文件时,对内容的所有更改只需在一个地方就能完成。

2. nginx 配置ssi实现

以一个页面为例,将其拆分为

  1. index.html 首页主体内容
  2. include/header.html 头部区域
  3. include/banner.html 轮播图区域
  4. include/footer.html 页面尾部区域

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <!--#include virtual="/include/header.html"-->
  9. <!--#include virtual="/include/banner.html"-->
  10. <h1>这是主页面的body</h1>
  11. <!--#include virtual="/include/footer.html"-->
  12. </body>
  13. </html>

header.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>这是header区域</h1>
  9. </body>
  10. </html>

banner.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>这是轮播图区域</h1>
  9. </body>
  10. </html>

footer.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>这是尾部区域</h1>
  9. </body>
  10. </html>



配置nginx.conf


  1. worker_processes 1;
  2. events {
  3. worker_connections 1024;
  4. }
  5. http {
  6. include mime.types;
  7. default_type application/octet-stream;
  8. sendfile on;
  9. keepalive_timeout 65;
  10. server {
  11. listen 80;
  12. server_name localhost;
  13. # 开启ssi
  14. ssi on;
  15. ssi_silent_errors on;
  16. location / {
  17. # 这里路径记得修改
  18. root D:\\imooc\\test;
  19. index index.html index.htm;
  20. }
  21. }
  22. }

重启nginx

  1. nginx -t
  2. nginx -s reload

访问页面如下图所示



可以看到 在访问index.html时将其他的几个页面中的内容也输出到了index.html

主要步骤如下

  1. # 1. 编写子页面
  2. # 2. 使用<!--#include virtual="/include/header.html"--> 将子页面插入到主页面中
  3. # 3. 配置nginx 开启ssi

nginx 中的ssi的配置参数如下:

  1. ssi on 开启ssi支持
  2. ssi_silent_errors on:默认为off,设置为on则在处理SSI文件出错时不输出错误信息
  3. ssi_types:默认为 ssi_types text/html,如果需要支持shtml(服务器执行脚本,类似于jsp)则需要设置为ssi_types text/shtml

nginx配置ssi实现页面拆分的更多相关文章

  1. Nginx配置SSI

    一.什么是SSISSI:Server Side Include,是一种基于服务端的网页制作技术,大多数(尤其是基于Unix平台)的web服务器如Netscape Enterprise Server等均 ...

  2. NGINX 配置404错误页面转向

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  3. NGINX 配置404错误页面转向

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  4. Ubuntu nginx 配置404错误页面

    1.创建自己的404.html页面: 2.更改nginx.conf在http定义区域加入: /etc/nginx# vim nginx.conf 下添加 fastcgi_intercept_error ...

  5. Let's Encrypt泛域名使用和Nginx配置拆分

    上一期写了 使用Let's Encrypt实现网站https化 ,随着二级域名的增多,每个二级域名需要一张 SSL 证书,这可太不优雅了,泛域名表示我可以更优雅. 作者:IT王小二 博客:https: ...

  6. apache和nginx支持SSI配置

    今天发现了一种新的语言格式:.shtml 一. 前言 SSI是一种类似于ASP的基于服务器的网页制作技术.将内容发送到浏览器之前,可以使用"服务器端包含 (SSI)"指令将文本.图 ...

  7. nginx配置错误页面

    有时候页面会遇到404页面找不到错误,或者是500.502这种服务端错误,这时候我们可能希望自己定制返回页面,不希望看到默认的或者是内部的错误页面,可以通过nginx配置来实现. 1 50x错误对于5 ...

  8. Nginx 核心配置-自定义错误页面

    Nginx 核心配置-自定义错误页面 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 生产环境中错误页面一般都是UI或开发工程师提供的,他们已经在软件中定义好了,我们这里就简单写个h ...

  9. 通过web页面修改nginx配置

    资源路径:https://download.csdn.net/download/song_yan_/12002460 nginx动态配置 一.页面展示 二.前端代码 (1)jsp页面(nginxCon ...

随机推荐

  1. bzoj3990

    排序 HYSBZ - 3990 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N) ...

  2. jQuery事件之绑定事件

    语法: $(selector).bind(eventType[, eventData], handler(eventObject)); 参数解释: eventType(String): 一个包含一个或 ...

  3. python3 selenium使用

    其实这个就相当于模拟人的点击事件来连续的访问浏览器.如果你玩过王者荣耀的话在2016年一月份的版本里面就有一个bug. 安卓手机下载一个按键精灵就可以在冒险模式里面设置按键,让手机自动玩闯关,一局19 ...

  4. Eclipse改变成炫酷黑色主题

    有一个款Eclipse插件EclipseColorTheme,其官网地址是http://eclipsecolorthemes.org/,可以直接使用大量内置的样式主题模板,如果还不能满足你自己的个性化 ...

  5. Amaple.js框架详细介绍

    Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓库)是专为单页web应用而设计的基于页面模块化的JavaScript框架,它可使开发者快速开发单页web ...

  6. springboot 热部署替代方式

    因为使用的 idea springboot2.2.0 snapshot版本, 常规的devtools方法实在是实现不了热部署,所以采用手动update的方法更新,测试可以成功更新resource里面的 ...

  7. JS基础_对象操作

    1.in 运算符 通过该运算符可以检查一个对象中是否含有指定的属性,如果有,返回true 语法: “属性名” in 对象 var obj = { name:"hello" } co ...

  8. LeetCode 179. 最大数(Largest Number)

    题目描述 给定一组非负整数,重新排列它们的顺序使之组成一个最大的整数. 示例 1: 输入: [10,2] 输出: 210 示例 2: 输入: [3,30,34,5,9] 输出: 9534330 说明: ...

  9. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  10. Less相关的用法以及Vue2.0 中如何使用Less

    (一)less的用法: (二)vue 2.0中如何使用less插件 1:vue先安装less插件 npm install less less-loader --save 2:修改webpack.bas ...