一、什么是SSI
在被传送给浏览器之前，服务器会对 HTML 文档进行完全地读取、分析以及修改，使用SSI指令将文本、图片或代码信息包含到网页中。对于整个页面可以拆分成多个模块，通过SSI指令将几个模块拼接成一个完整的页面，当有内容更新时，只需要更新对应的模块即可，无需更新整个页面的文件，对于公共的模块可以在不同的页面重复利用。
二、nginx配置实现SSI功能
有如下三个页面
/test/test.html
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<title>搜狗搜索引擎 - 上网从搜狗开始</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="//dlweb.sogoucdn.com/pcsearch/web/index/css/index_style_39e6e10.css">
</head>
<body color-style="white">
<div class="wrapper" id="wrap">
<!-- 下面的内容看起来跟注释一样，但是多了一个#号，就可以识别出改标签并执行对应的嵌入操作-->
<!-- 可以使用如下的绝对路径，也可以使用相对路径 header.html content.html-->
<!--# include file="/test/header.html" -->
<!--# include file="/test/content.html" -->
<div class="ft-v1" id="QRcode-footer" style="padding-bottom:28px"><div class="ft-info"><a uigs-id="mid_pinyin" href="http://pinyin.sogou.com/" target="_blank"><i class="i1"></i>搜狗输入法</a><span class="line"></span><a uigs-id="mid_liulanqi" href="http://ie.sogou.com/" target="_blank"><i class="i2"></i>浏览器</a><span class="line"></span><a uigs-id="mid_daohang" href="http://123.sogou.com/" target="_blank"><i class="i3"></i>网址导航</a><br><a href="//e.qq.com?from=sougou01" target="_blank" class="g">企业推广</a> - <a href="http://www.sogou.com/docs/terms.htm?v=1" target="_blank" class="g">免责声明</a> - <a href="https://fankui.sogou.com/index.php/web/web/index/type/4" target="_blank" class="g">意见反馈及投诉</a> - <a href="https://www.sogou.com/docs/privacy.htm?v=1" target="_blank" class="g" uigs-id="footer_private">隐私政策</a><br><span class="g">药品医疗器械网络信息服务备案：（京）网药械信息备字（2021）第00047号</span><br>© 2004-2024 Sogou.com / <a href="http://www.12377.cn" class="g" target="_blank">网上有害信息举报专区</a> / <span class="g">京网文(2019)6117-724号</span> / <a class="g" href="https://beian.miit.gov.cn/" target="_blank">京ICP证050897号</a> / <a class="g" href="https://beian.miit.gov.cn/" target="_blank">京ICP备11001839号-1</a> / <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000025" class="ba" target="_blank">京公网安备11000002000025号</a></div> <div class="fit-older"></div> </div>
</div>
</body>
</html>
/test/header.html
<!DOCTYPE html>
<html lang="cn">
<head>
<script>
console.log("9999999999999999999999");
</script>
</head>
<body>
<div class="header">
<div class="top-nav">
<ul>
<li class="cur">
<span>网页</span>
</li>
<li>
<span>图片</span>
</li>
<li>
<span>视频</span>
</li>
</ul>
</div>
</div>
</body>
</html>
/test/content.html
<!DOCTYPE html>
<html lang="cn">
<head>
</head>
<body>
<div class="content" id="content">
<div class="pos-header" id="top-float-bar">
<div class="part-one"></div>
<div class="part-two" id="card-tab-layer">
<div class="c-top" id="top-card-tab"></div>
</div>
</div>
<div class="logo2" id="logo-s">
<span></span>
</div>
<div class="logo" id="logo-l">
<span></span>
</div>
<div class="search-box querybox-focus" id="search-box">
<form action="/web" name="sf" id="sf">
<span class="sec-input-box">
<input type="text" class="sec-input active" name="query" id="query" maxlength="100" len="80" autocomplete="off">
</span>
<span class="enter-input">
<input type="submit" value="搜狗搜索" id="stb">
</span>
</form>
</div>
</div>
</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出错时，控制出错信息
ssi_silent_errors on;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 这里我把访问文件放在根目录/test文件夹下了
location /test/ {
root /;
}
}
}
