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