nginx配置ssi实现页面拆分
2024-09-05 22:50:19
在做一个网站时,页面上会有很多重复的内容,每个页面写一遍很冗余,修改时还容易遗漏,所以可以把公共的部分写好,放在单独的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
最新文章
- [No00009D]使用visual studio 2015 update3打包程序安装包的简单方法(不需要InstallShield)
- JQuery异步提交
- Walking Ant(bfs)
- 阶乘相关<;同余与模算术>;
- php获取checkbox数组的表单数据
- cf B. Mishka and trip (数学)
- linux中iptables配置文件及命令详解
- Hero Patterns - 聚合各种 SVG 背景纹理素材的网站
- 项目管理软件 GanttProject 节日表
- [转]TFS2010 Team Project Collections
- 并发之AQS原理(三) 如何保证并发
- Windows phone 自定义用户控件(UserControl)——ColorPicker
- DWZ学习记录--关闭loading效果
- Hypothesis Testing
- 【Error】 : make 不是内部或外部命令,也不是可运行的程序
- wxpython Menus and toolbars
- Centos7下zabbix部署(三)自定义监控项
- JSP(Java Server Pages,即:Java服务器页面
- scrapy 一些设置和问题
- python之道05
热门文章
- CTF MD5之守株待兔,你需要找到和系统锁匹配的钥匙
- [BZOJ2730]:[HNOI2012]矿场搭建(塔尖)
- springMVC中的ModelAndView说明
- C++入门经典-例6.23-字符串数组赋值与string
- SRS之SrsRtmpConn::service_cycle详解
- lockfree buffer test
- Button.OnClientClick
- 二、WebSphere Application Server上部署war包并访问
- Host key verification failed
- JS进阶学习<;一>;