当前位置： 文江博客话题详情

静态页面Demo项目，如何将header和footer 像PHP一样 include？

发布于 2022-09-01 13:10:05 字数 52 浏览 15 评论 0

静态页面Demo项目，如何将header和footer 像PHP一样 include？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（15）

陪你到最终 2022-09-08 13:10:05

最简单的用SSI！

Apache httped和Nginx都有配置SSI的方法。

SSI不仅能够设置简单包含，还有变量指令等，做demo足够了。至于Nginx和Apache httped分别如何配置，请百度，不再赘述。

另外推荐一款基于nodejs、gulp的自动化插件 fas ，已集成支持SSI的http服务器 ， 集成node-sass：

https://github.com/fas-team/fas

回复
好多鱼好多余 2022-09-08 13:10:05

最简单是用iframe

<IFRAME NAME="header_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="thefooter.html" ></IFRAME>
回复
过气美图社 2022-09-08 13:10:05

你可以试一下shtml，就是常说的服务器端包含（SSI）。
我以前就是用这种方法来做的个人网站，效果不错。
以下引用百度百科

主要有以下几种用途：
1．显示服务器端环境变量<#echo>
2．将文本内容直接插入到文档中<#include>
3．显示WEB文档相关信息<#flastmod #fsize> (如文件制作日期/大小等)
4．直接执行服务器上的各种程序<#exec>(如CGI或其他可执行程序)
5．设置SSI信息显示格式<#config>(如文件制作日期/大小显示方式) 高级SSI可设置变量使用if条件语句。

回复
伴我老 2022-09-08 13:10:05

可以用jquery的load方法，直接将需要的文件加载到页面中。
$('className').load('page/header.html');

回复
梦毁影碎の 2022-09-08 13:10:05

用前端模板配合js

回复
暖风昔人 2022-09-08 13:10:05

使用fis。有html嵌入功能，可以如下使用。

<link rel="import" href="demo.html?__inline">
回复
妥活 2022-09-08 13:10:05

angularjs

回复
北陌 2022-09-08 13:10:05

grunt+handlebars可以实现

回复
陌路黄昏 2022-09-08 13:10:05

用node打包工具，将每个页面拼起来

回复
我也只是我 2022-09-08 13:10:05

把后缀改为shtml

回复
恍梦境° 2022-09-08 13:10:05
  a.js:


<script type="text/html" id="abc">
  aaaaaaaaaaaaaa
  </script>



  index.html:
  <script src="a.js"></script>
  <script>$('body').prepend($('#abc').html())</script>
回复
银河中√捞星星 2022-09-08 13:10:05

1)在HTML页面中

<html>
    <head>
        <script type="text/javascript" src="script/page_global.js"></script>
    </head>
    <body>
    <div id="page_header">公共header</div>
    <div id="page_main">特定页面内容</div>
    <div id="page_footer">公共footer</div>
    </body>
</html>

2)page_global.JS脚本

$(function(){
    var footerHTML="静态HTML内容";//或者此部分内容通过AJAX动态load
    //$('#page_header').empty().html('~~~~公共Header内容~~~~');
    //$('#page_footer').empty().html('~~~~公共Footer内容~~~~');
    $('#page_header').html('~~~~公共Header内容~~~~');
    $('#page_footer').html('~~~~公共Footer内容~~~~');
));

希望能帮到你~~~

回复
清旖 2022-09-08 13:10:05

装个nginx，开启ssi

回复
妄断弥空 2022-09-08 13:10:05

http://jade-lang.com/reference/includes/
用jade写，支持include的。

回复
~没有更多了~

关于作者

感性

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文