nginx配置ssi实现页面拆分

在做一个网站时,页面上会有很多重复的内容,每个页面写一遍很冗余,修改时还容易遗漏,所以可以把公共的部分写好,放在单独的HTML中,用时引用就行了。
nginx配置ssi可以将单个页面拆分成一个一个的小页面,访问页面时将多个子页面合并渲染输出,通过cms去管理这些小页面,实现当要更改部分页面内容时只需要更改具体某个小页面.

1. 什么是SSI

SSI:Server Side Include,是一种基于服务端的网页制作技术,大多数(尤其是基于Unix平台)的web服务器如Netscape Enterprise Server等均支持SSI命令。
它的工作原因是:在页面内容发送到客户端之前,使用SSI指令将文本、图片或代码信息包含到网页中。对于在多个文件中重复出现内容,使用SSI是一种简便的方法,将内容存入一个包含文件中即可,不必将其输入所有文件。通过一个非常简单的语句即可调用包含文件,此语句指示 Web 服务器将内容插入适当网页。而且,使用包含文件时,对内容的所有更改只需在一个地方就能完成。

2. nginx 配置ssi实现

以一个页面为例,将其拆分为

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>


配置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时将其他的几个页面中的内容也输出到了index.html

主要步骤如下

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

nginx 中的ssi的配置参数如下:

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

原文地址:https://www.cnblogs.com/ifme/p/12042048.html

时间: 2024-11-02 17:52:01

nginx配置ssi实现页面拆分的相关文章

nginx配置403错误页面

建立403 error 页面, 403.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Error 403</title></head><body&g

Nginx配置SSI

一.什么是SSISSI:Server Side Include,是一种基于服务端的网页制作技术,大多数(尤其是基于Unix平台)的web服务器如Netscape Enterprise Server等均支持SSI命令.它的工作原因是:在页面内容发送到客户端之前,使用SSI指令将文本.图片或代码信息包含到网页中.对于在多个文件中重复出现内容,使用SSI是一种简便的方法,将内容存入一个包含文件中即可,不必将其输入所有文件.通过一个非常简单的语句即可调用包含文件,此语句指示 Web 服务器将内容插入适当

NGINX 配置404错误页面转向

什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是NGINX服务器,那么404页面的内容则为:404 Not Found 为什么要自定义404页面 在访问时遇到上面这样的404错误页面,我想99%(未经调查,估计数据)的用户会把页面关掉,用户就这样悄悄的流失了.如果此时能有一个漂亮的页面能够引导用户去他想去的地方必然可以留住用户.因此,每一个网站都

Ubuntu nginx 配置404错误页面

1.创建自己的404.html页面: 2.更改nginx.conf在http定义区域加入: /etc/nginx# vim nginx.conf 下添加 fastcgi_intercept_errors on; http{ ...... fastcgi_intercept_errors on; ...... } 3.更改/etc/nginx/sites-enabled/default 文件 #error_page 404 /404.html; 改为 error_page 404 = /404.h

apache和nginx支持SSI配置

一. 前言 SSI是一种类似于ASP的基于服务器的网页制作技术.将内容发送到浏览器之前,可以使用“服务器端包含 (SSI)”指令将文本.图形或应用程序信息包含到网页中.例如,可以使用 SSI 包含时间/日期戳.版权声明或供客户填写并返回的表单.对于在多个文件中重复出现的文本或图形,使用包含文件是一种简便的方法.将内容存入一个包含文件中即可,而不必将内容输入所有文件.通过一个非常简单的语句即可调用包含文件,此语句指示 Web 服务器将内容插入适当网页.而且,使用包含文件时,对内容的所有更改只需在一

nginx配置错误页面

有时候页面会遇到404页面找不到错误,或者是500.502这种服务端错误,这时候我们可能希望自己定制返回页面,不希望看到默认的或者是内部的错误页面,可以通过nginx配置来实现. 1 50x错误对于50x错误,通常不会直接将错误内容显示在页面,而是由前台页面来解析错误内容并展示在前台的某个位置.我们可以自己定义一个json返回对象,由页面来解析这个json对象.以500错误为例,在nginx服务器任意目录下(例如,/usr/share/nginx/html)创建一个500.json文件,内容如下

nginx 配置页面压缩

众所周知nginx的请求步骤是:客户端发送请求-->CS建立连接-->服务器响应请求. 在最后一个步骤的过程中 服务器响应客户端的请求会把客户端请求的数据回显到客户端的浏览器中,那么这个过程中我们可以做一下压缩,来提高访问速度 nginx配置如下: http{ gzip  on;    gzip_min_length 1k;    gzip_buffers    4 16k;    gzip_http_version 1.1;    gzip_comp_level 2;    gzip_typ

Nginx配置与应用详解

前言 Nginx是由俄罗斯软件工程师Igor Sysoev开发的一个高性能的HTTP和反向代理服务器,具备IMAP/POP3和SMTP服务器功能.Nginx最大的特点是对高并发的支持和高效的负载均衡,在高并发的需求场景下,是Apache服务器不错的替代品.目前,包括新浪.腾讯等知名网站都已使用Nginx作为Web应用服务器.本文带来的是Nginx配置与应用详解. 基础特性 基本功能 静态资源的web服务器,能缓存打开的文件描述符 反向代理服务器,缓存.负载均衡 支持FastCGI 模块化,非DS

nginx中SSI问题的研究

最近感觉挺爽的,这个项目团队没有一个专门做PHP的,我是第一个进来做PHP(当然还有前端)的,哈哈,我会设计修改出适合我们业务的PHP框架,哈哈,感觉会学到很多东西的样子,前几天在组内20几个前辈面前讲php框架,以及跟大牛们探讨适合我们的php框架,感觉表达能力太差了,知道的东西表达不清楚,还要我的导师去帮我表达,这里感谢下我的导师于洪磊(简称磊哥),磊哥简直就是我的偶像,我没见过那么有深度的程序员,技术牛B这是肯定的了,对技术外的了解超出了我的想象,磊哥看的书很多,涉猎很广泛,尤其在历史和文