css - 在几个 html 静态网页上重复引导菜单

Question

我正在使用 Foundation 构建一个简单的静态网站。

我想知道如何在不重复每个 html 页面上的菜单代码的情况下编写站点的菜单导航代码(以便将来更容易维护)？我可以在菜单中包含 Javascript，但我无法更改每个菜单项的导航类外观(例如:突出显示“关于我们”)。

或者是否有一种工具可以帮助在纯静态网站上维护大型菜单项？

Answer 1

实际上我最近只是想解决这个问题，尽管我最终使用了 PHP。如果您想使用 PHP，这里是我使用的以下代码片段:

创建一个函数

            <?php

        function echoActiveClassIfRequestMatches($requestUri) {
            $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

            if ($current_file_name == $requestUri)
                echo 'class="active"';
        }

        ?>

然后，将这些添加到您的 <li>标签:

<li <?php echoActiveClassIfRequestMatches("about-us")?>>
                    <a href="about-us.php">About Us</a></li>

希望这对您有所帮助。如果我能找到我找到此解决方案的链接，我会尽量给予信任。