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

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

阅读 9.3k
评论
    15 个回答
    • 483

    最简单的用SSI!

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

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

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

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

      • 554

      最简单是用iframe

      <IFRAME NAME="header_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="thefooter.html" ></IFRAME> 
      

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


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

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

              • 5
              • 新人请关照

              用前端模板配合js

                • 819

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

                <link rel="import" href="demo.html?__inline">
                

                  angularjs

                    grunt+handlebars可以实现

                      • 3.4k

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

                        把后缀改为shtml

                            a.js:
                          
                          
                          <script type="text/html" id="abc">
                            aaaaaaaaaaaaaa
                            </script>
                          
                          
                          
                            index.html:
                            <script src="a.js"></script>
                            <script>$('body').prepend($('#abc').html())</script>
                          
                            • 19k

                            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内容~~~~');
                            ));
                            

                            希望能帮到你~~~

                              • -1
                              • 新人请关照

                              装个nginx,开启ssi

                                • 384
                                  撰写回答

                                  登录后参与交流、获取后续更新提醒

                                  相似问题
                                  推荐文章