html - 我是否必须使用 Bootstrap 在每个页面上复制导航栏代码？

Question

我目前正在制作一个包含多个页面的 Bootstrap 网站。我的方法是创建多个 html 文件，例如Index.html、Products.html、Contact.html。

现在，我是否必须在每个文件中复制导航栏的代码？这看起来相当麻烦，因为当我想在导航栏中更改某些内容时，我必须在每个文件中进行更改。

(当然代码不会完全重复，例如每个 html 页面上的 active 类都不同，但大约 99% 是通用代码)

我当然知道我可以使用像 Joomla 这样的 CMS 来为我处理这个问题。但如果我不想迈出那一步，Bootstrap 是否可行？或者这不是 Bootstrap 的用途？ 奇怪的是，我的查询无法在该主题上搜索到任何谷歌搜索结果。也许我遗漏了什么。

Answer 1

即使您不打算使用它的后端方面，我也建议将文件切换为 .php 并使用包含。

示例

PHP(页面)

<?php
    $active = "ID-THAT-CORRESPONDS-WITH-ID-IN-NAV-ANCHOR"; 
    include '_includes/header.php';
?>

    page body here

<?php
    include '_includes/footer.php';
?>

PHP( header )

<nav class="<?php echo $active; ?>">
    <a href="#" id="home">Home</a>
    <a href="#" id="about">About</a>
    <a href="#" id="contact">Contact</a>
</nav>

CSS/LESS

nav {
    /* if nav has class of home, style id of home to active state */
    &.home #home {
        ...
    }

    /* if nav has class of about, style id of about to active state */
    &.about #about {
        ...
    }
}

在您的 header.php 文件中，您将拥有导航/标题/等。让您更新一个文件并让它更新跨站点。