nginx SSI(Server Side Include)服务端包含合并拼装静态内容

夜夜夜空

于 2024-07-03 15:38:01 发布

阅读量375

点赞数 5

文章标签： nginx

本文链接：https://blog.csdn.net/zixuanyankai/article/details/140152658

版权

一、什么是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>&nbsp;-&nbsp;<a href="http://www.sogou.com/docs/terms.htm?v=1" target="_blank" class="g">免责声明</a>&nbsp;-&nbsp;<a href="https://fankui.sogou.com/index.php/web/web/index/type/4" target="_blank" class="g">意见反馈及投诉</a>&nbsp;-&nbsp;<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>©&nbsp;2004-2024&nbsp;Sogou.com&nbsp;/&nbsp;<a href="http://www.12377.cn" class="g" target="_blank">网上有害信息举报专区</a>&nbsp;/&nbsp;<span class="g">京网文(2019)6117-724号</span>&nbsp;/&nbsp;<a class="g" href="https://beian.miit.gov.cn/" target="_blank">京ICP证050897号</a>&nbsp;/&nbsp;<a class="g" href="https://beian.miit.gov.cn/" target="_blank">京ICP备11001839号-1</a>&nbsp;/&nbsp;<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   /;
        }
    }
}

合并后的页面

夜夜夜空

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
nginx SSI(Server Side Include)服务端包含合并拼装静态内容

在被传送给浏览器之前，服务器会对 HTML 文档进行完全地读取、分析以及修改，使用SSI指令将文本、图片或代码信息包含到网页中。对于整个页面可以拆分成多个模块，通过SSI指令将几个模块拼接成一个完整的页面，当有内容更新时，只需要更新对应的模块即可，无需更新整个页面的文件，对于公共的模块可以在不同的页面重复利用。
复制链接

扫一扫