一、什么是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;# 开启SSIssi 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 /;}}
}
