快捷導(dǎo)航

Nginx ssi合并頁面的具體實(shí)現(xiàn)

更新時(shí)間：2024年05月07日 10:41:50 作者：老貓喜歡今日爬山

nginx的ssi模塊是一種類似于ASP的基于服務(wù)器的網(wǎng)頁制作技術(shù),本文主要介紹了Nginx ssi合并頁面的具體實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下

nginx配置ssi可以將單個(gè)頁面拆分成一個(gè)一個(gè)的小頁面,訪問頁面時(shí)將多個(gè)子頁面合并渲染輸出，通過cms去管理這些小頁面，實(shí)現(xiàn)當(dāng)要更改部分頁面內(nèi)容時(shí)只需要更改具體某個(gè)小頁面。

1. 什么是SSI

SSI：Server Side Include，是一種基于服務(wù)端的網(wǎng)頁制作技術(shù)，大多數(shù)（尤其是基于Unix平臺(tái)）的web服務(wù)器如Netscape Enterprise Server等均支持SSI命令。

它的工作原因是：在頁面內(nèi)容發(fā)送到客戶端之前，使用SSI指令將文本、圖片或代碼信息包含到網(wǎng)頁中。對(duì)于在多個(gè)文件中重復(fù)出現(xiàn)內(nèi)容，使用SSI是一種簡便的方法，將內(nèi)容存入一個(gè)包含文件中即可，不必將其輸入所有文件。通過一個(gè)非常簡單的語句即可調(diào)用包含文件，此語句指示 Web 服務(wù)器將內(nèi)容插入適當(dāng)網(wǎng)頁。而且，使用包含文件時(shí)，對(duì)內(nèi)容的所有更改只需在一個(gè)地方就能完成。

2. nginx 配置ssi實(shí)現(xiàn)

以一個(gè)頁面為例，將其拆分為

index.html  首頁主體內(nèi)容
include/header.html 頭部區(qū)域
include/banner.html 輪播圖區(qū)域
include/footer.html 頁面尾部區(qū)域

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區(qū)域</h1>
</body>
</html>

banner.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>這是輪播圖區(qū)域</h1>
</body>
</html>

footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>這是尾部區(qū)域</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時(shí)將其他的幾個(gè)頁面中的內(nèi)容也輸出到了index.html

主要步驟如下

1. 編寫子頁面

2. 使用 將子頁面插入到主頁面中

3. 配置nginx 開啟ssi

nginx 中的ssi的配置參數(shù)如下：

ssi on： 開啟ssi支持 
ssi_silent_errors on：默認(rèn)為off，設(shè)置為on則在處理SSI文件出錯(cuò)時(shí)不輸出錯(cuò)誤信息 
ssi_types：默認(rèn)為 ssi_types text/html，如果需要支持shtml（服務(wù)器執(zhí)行腳本，類似于jsp）則需要設(shè)置為ssi_types text/shtml

到此這篇關(guān)于Nginx ssi合并頁面的具體實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Nginx ssi 合并頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: