Nginx ssi合并页面的具体实现

 更新时间:2024年05月07日 10:41:50   作者:老猫喜欢今日爬山  
nginx的ssi模块是一种类似于ASP的基于服务器的网页制作技术,本文主要介绍了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

到此这篇关于Nginx ssi合并页面的具体实现的文章就介绍到这了,更多相关Nginx ssi 合并页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Nginx实现动静分离的示例代码

    Nginx实现动静分离的示例代码

    Nginx动静分离是旨在将静态页面与动态页面或静态内容接口与动态内容接口分开,本文主要介绍了Nginx实现动静分离的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • CentOS7系统下用YUM安装Nginx详解

    CentOS7系统下用YUM安装Nginx详解

    相信大家都知道Nginx ("engine x") 是一个高性能的 HTTP和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。这篇文章将详细给大家介绍在CentOS7系统下用YUM安装Nginx的方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • Nginx-Proxy-Manager可视化管理平台的使用

    Nginx-Proxy-Manager可视化管理平台的使用

    Nginx-Proxy-Manager是一个基Web的Nginx服务器管理工具,它允许用户通过浏览器界面轻松地管理和监控Nginx服务器,本文主要介绍了Nginx-Proxy-Manager可视化管理平台的使用,感兴趣的可以了解一下
    2024-08-08
  • Nginx的nginx.conf配置文件中文注释说明

    Nginx的nginx.conf配置文件中文注释说明

    这篇文章主要介绍了Nginx的nginx.conf配置文件中文注释说明,本文是个人注释版,在生产环境中经常使用,需要的朋友可以参考下
    2014-12-12
  • nginx location语法使用介绍

    nginx location语法使用介绍

    Nginx 中的 Location 指令 是NginxHttpCoreModule中重要指令。Location 指令,是用来为匹配的 URI 进行配置,URI 即语法中的”/uri/”,可以是字符串或正则表达式。但如果要使用正则表达式,则必须指定前缀
    2015-01-01
  • Nginx离线安装的保姆级教程

    Nginx离线安装的保姆级教程

    为了确保gcc-c++和Nginx的正确安装,建议使用yum工具在线下载rpm包,避免手动下载安装时出现依赖缺失的问题,本文就来介绍一下如何离线安装,感兴趣的可以了解一下
    2024-09-09
  • Linux系统下nginx日志每天定时切割的脚本写法

    Linux系统下nginx日志每天定时切割的脚本写法

    本篇文章给大家分享使用Linux系统自带的命令logrotate对Nginx日志进行切割的方法,对nginx日志切割脚本感兴趣的朋友一起学习吧
    2016-11-11
  • Nginx服务器下配置使用索引目录的教程

    Nginx服务器下配置使用索引目录的教程

    这篇文章主要介绍了Nginx服务器下配置使用索引目录的教程,包括自带的auto_index和使用fancy插件美化的用法,需要的朋友可以参考下
    2016-01-01
  • 服务器部署之虚拟机安装nginx并部署web网页

    服务器部署之虚拟机安装nginx并部署web网页

    本文提供了一个关于Nginx的安装与配置的简单入门教程,涵盖从安装所需插件(如gcc、zlib、pcre、openssl等),到下载、解压、编译安装Nginx的完整过程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • 为Nginx添加SPDY功能

    为Nginx添加SPDY功能

    我也开始尝试着给自己的论坛加上SPDY协议,WEB服务器本人选择的是nginx,在过去,Nginx并没有内置SPDY协议,需要打开的话还要下载开发版然后手动编译,很不方便
    2014-12-12

最新评论