在引导程序中生成 HTML

Question

我已经下载了一个网站的引导模板，我正在尝试了解它是如何工作的。到目前为止看起来不错，但是我下载的模板在 5 个主要页面中具有很多相同的内容，并且它不是从一个地方生成或引用的。由于所有网页的导航栏都是相同的，我如何在没有服务器端的情况下引用所有页面以包含相同的标题（或其他 html）？这似乎是一个简单的 HTML 或 JS 解决方案，只是似乎找不到我要找的东西......

假设这是导航栏（另存为/component/navbar.html¿maybe？）：

<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">
                    <b>Your</b>Site
                </a>
                <div class="nav-collapse fr">
                    <ul class="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="active"><a href="work.html">Our work</a></li>
                        <li><a href="about.html">About us</a></li>
                        <!-- <li><a href="plans.html">Pricing</a></li> -->
                        <li><a href="explore.html">Explore</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="alt.html">Alt</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><button class="btn btn-primary">Sign In</button></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!-- end .container -->
        </div><!-- end .navbar-inner -->
    </div><!-- end .navbar -->

如何将页面链接到要包含的这段 HTML？

Answer 1

你可以用 jQuery 做到这一点，它总是出现在 boostrap 中。

将 <div class="navbar"> 中的内容移植到您建议的名为 /component/navbar.html 的文件中 - 所以 HTML 看起来像这样

<div class="navbar" id="navbar"> 
</div>

在脚本中，通过 AJAX 将 navbar.html 中的内容加载到 #navbar 中

$(document).ready(function(){
    $.ajax({
        url : 'component/navbar.html',
        success(html) {
            $("#navbar").html(html);
        }
    });
});

编辑：或者干脆$("#navbar").load('component/navbar.html'); 这可能是您正在寻找的解决方案，它的行为更像是一种可以放在标题中的“包含”。