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

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

1. 什么是SSI

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

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

2. nginx 配置ssi实现

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

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/banner.html"--> <h1>这是主页面的body</h1>
<!--#include virtual="/include/footer.html"-->
</body>
</html>

header.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是header区域</h1>
</body>
</html>

banner.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是轮播图区域</h1>
</body>
</html>

footer.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是尾部区域</h1>
</body>
</html>



配置nginx.conf


worker_processes 1; events {
worker_connections 1024;
} http {
include mime.types;
default_type application/octet-stream; sendfile on; keepalive_timeout 65; server {
listen 80;
server_name localhost;
# 开启ssi
ssi on;
ssi_silent_errors on; location / {
# 这里路径记得修改
root D:\\imooc\\test;
index index.html index.htm;
}
} }

重启nginx

nginx -t
nginx -s reload

访问页面如下图所示



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

主要步骤如下

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

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

ssi on: 开启ssi支持
ssi_silent_errors on:默认为off,设置为on则在处理SSI文件出错时不输出错误信息
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. AcWing:99. 激光炸弹(前缀和)

    一种新型的激光炸弹,可以摧毁一个边长为 RR 的正方形内的所有的目标. 现在地图上有 NN 个目标,用整数Xi,YiXi,Yi表示目标在地图上的位置,每个目标都有一个价值WiWi. 激光炸弹的投放是通 ...

  2. 微信小程序获得unionid

    一.微信小程序中app.js中: wx.login({ success: res => { if(res.code){ var code = res.code; wx.getSetting({ ...

  3. js版的虚线框

    要求:实现鼠标点击面板的一个点,拖动到固定的位置,出现虚线框 样图:   具体的代码实现: js文件   <script> window.onload = function(){ docu ...

  4. 日志框架之Logger

    概述 在我们日常的开发中,肯定是少不了要和 Log 打交道,回想一下我们是怎么使用 Log 的:先定义一个静态常量 TAG,TAG 的值通常是当前类的类名,然后在需要打印 Log 的地方,调用 Log ...

  5. Docker在CentOS下的安装

    工欲善其事,必先利其器. 在我们以后的Docker学习中,都推荐使用CentOS6.5作为学习平台,毕竟Docker的内核也是基于Linux的.本文主要分享笔者在CentOS下的安装Docker的过程 ...

  6. MySQL SQL查询优化技巧详解

    MySQL SQL查询优化技巧详解 本文总结了30个mysql千万级大数据SQL查询优化技巧,特别适合大数据里的MYSQL使用. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ...

  7. Codeforces--C2. Good Numbers (hard version)

    题目链接http://codeforces.com/contest/1249/problem/C2.这是道进制转换题,我们的目的是找到最小的一个每个位都是1的三进制数来表示一个十进制数n.做法是,先将 ...

  8. 组件推荐Forloop.HtmlHelpers 用来实现MVC的js加载顺序

    最近在开发的时候遇到js加载顺序的问题,layui在底部声明了js,但是我想在页面其他地方使用分布视图,分布视图内有自己的js逻辑,发现不能执行,一看就发现,这里的js应该加在layui后面执行才能有 ...

  9. vue项目中使用组件化开发

    最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...

  10. php composer 开发自己的包

    以往都是在项目直接写自己的包文件,并没有把他放在packagist上面,以composer来管理使用. 今天没事来整一下,供大家一起学习 一,在github和packagist分别注册自己的账号,这里 ...