SSI 網頁內嵌技術

引子

通常來講咱們開發網頁的時候，大多都會以一個大的HTML頁面來作，來開發，來發布，來維護。初期可能就1-2人維護，隨着業務發展，功能迭代，一個首頁會至關複雜，那麼就有可能會有一個團隊來維護，首頁包含的功能會有不少，好比，輪播圖，分類，商品推薦，廣告等等，能夠看一下京東：




以上三張圖中的紅框部分，其實都是每一個頁面中的一個小功能，他們均可以單獨拿出來做爲一個單獨的頁面，隨後再嵌入到頁面中，如此一來，就更加便於團隊的開發和維護了，同時也能提供公用化的功能，減小重複代碼。

SSI

那麼如何進行網頁內嵌呢，我相信經歷過jsp時代的應該會知道include，其實咱們這裏使用的原理也是同樣的。

SSI就是server side include，網頁服務端內嵌技術，像Apache，Nginx都支持。能夠把頁面拆分紅小頁面後，再合併聚合在一塊兒顯示給用戶。

ssi的可定義擴展名爲：.stm、 .shtm、 .shtml

標籤使用

以下，看似和jsp的include是相似的，道理也是同樣的

<!--#include virtual="/pages/index/abc.html"  -->

在nginx中配置ssi

• 如何安裝nginx的，很少說了。
  
  

• 準備以下頁面，主要是配置首頁的include標籤：

• nginx中的ssi配置以下：
  

• nginx.conf 配置：

  server {
      listen       80;
  
      server_name  localhost;
  
      # 開啓 ssi
  
      ssi on;
  
      # ssi 出錯是不會打印日誌
  
      ssi_silent_errors on;
  
      # 默認的靜態頁面後綴爲 html，若是想自定義，好比使用shtml則開啓下方註釋
  
      # ssi_types text/shtml;
  
      location / {
  
          # root   html;
  
          # 指定靜態文件所在位置
  
          root        ssi;
  
          # 默認首頁，若是你的後綴在上方修改成 *.shtml，則下方也須要跟着修改
  
          index       index.html index.htm;
  
      }
  
  }

• html以下：
  
  

• github地址：https://github.com/leechenxiang/ssi-demo

精品推薦

若是你是一名java開發人員，在如此激烈的競爭中，爲親愛的你推薦以下架構師進階課程噢~
https://class.imooc.com/sale/javaarchitect