nginx configuration to achieve a page split ssi

When doing a website, there will be a lot of duplicate content on the page, each page to write again very redundant, modify Shihai easy to miss, so you can put the public part of the written, in a separate HTML, references when used on the line .
nginx configuration ssi may be split into a single page of a small page, access the page will render the combined output of several sub-pages, cms to manage through these small pages to achieve when you want to change part of the page content only need to change a small concrete page.

1. What is SSI

SSI: Server Side Include, is a web-based server production technology, most (particularly those based on Unix platforms) web server such as Netscape Enterprise Server Dengjun support SSI command.
The reason it works is: before sending it to the client, text, images or code information using SSI directives included in the page content into a Web page. For repeated content in multiple files, using SSI is an easy way to contain the contents into a file, it is not necessary to enter all the files. By a very simple statement can be called include files, this statement indicates the Web server content into the appropriate page. Furthermore, when using an include file, the contents of all of the changes can be done in just one place.

2. nginx configuration to achieve ssi

To a page, for example, it is broken into

index.html  首页主体内容
include/header.html 头部区域
include/banner.html 轮播图区域
include/footer.html 页面尾部区域

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区域</h1>
</body>
</html>

banner.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是轮播图区域</h1>
</body>
</html>

footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是尾部区域</h1>
</body>
</html>

Configuration 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;
        }       
    }

}

Restart nginx

nginx -t
nginx -s reload

Shown below to access the page

may see when accessing the contents of several other index.html page is also output to the index.html

The main steps are as follows

# 1. 编写子页面
# 2. 使用<!--#include virtual="/include/header.html"--> 将子页面插入到主页面中
# 3. 配置nginx 开启ssi

The ssi nginx configuration parameters are as follows:

ssi on： 开启ssi支持 
ssi_silent_errors on：默认为off，设置为on则在处理SSI文件出错时不输出错误信息 
ssi_types：默认为 ssi_types text/html，如果需要支持shtml（服务器执行脚本，类似于jsp）则需要设置为ssi_types text/shtml