如何创建指示活动链接的导航栏？答案

【问题标题】：How do I create a navbar that indicates the link that is active?如何创建指示活动链接的导航栏？
【发布时间】：2021-05-22 15:40:23
【问题描述】：

使用 HTML 和 CSS 创建一个对所有页面都是全局的并自动突出显示活动页面的导航栏的最佳方法是什么？我正在使用 PHP 和 Symfony 的模板引擎，twig。

我在想我可以创建一个navigation.json，路由器可以从中读取，然后在渲染时发送到模板。然后在模板方面，我可以让它遍历链接列表并将它们呈现为 html li 项。然后当它转到当前页面的链接时，它可以添加一个“活动”类。我不确定这是否是正确的方法。我非常感谢您的任何建议！谢谢

这是我正在使用的简单路由器。

<?php
include 'vendor/autoload.php';

$loader = new \Twig\Loader\FilesystemLoader('static/templates/');
$twig = new \Twig\Environment($loader, []);

if (!isset($_GET['q'])) {
    echo $twig->render('home.html');
} else if ($_GET['q'] == 'curriculum') {
    echo $twig->render('curriculum.html');
} else {
    echo $twig->render('404.html');
}
?>

这是所有其他模板扩展的 base.html 模板。

<!DOCTYPE html>
<html lang="en">
    <head>
        
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{% block title %}{% endblock %}</title>

        <!-- Favicon -->
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4e9b4d">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        
        <!-- Font Awesome Icons-->
        <script src="https://kit.fontawesome.com/e1c18cc05e.js" crossorigin="anonymous"></script>

        <!-- Custom CSS -->
        <link rel="stylesheet" href="static/styles/main.css" />

        {% block head %}{% endblock %}
    </head>
    <body>
        <header class="navbar">
                <a class="content" href="/">
                    <img src="static/assets/logo.png" alt="Education Transformation Centre Logo"/>
                </a>
        </header>

        {% block content %}{% endblock %}

        <footer class="footer">
            //footer content here
        </footer>
    </body>
</html>

【问题讨论】：

标签： php html frontend

【解决方案1】：

我认为最好的方法是直接在导航栏中使用当前路线将链接设置为启用/禁用，例如：

<li{% if app.request.get('_route') == '_myRoute' %} class="active"{% endif %}>
    <a href="{{ path('_adminIndex') }}">Admin Home</a>
</li>

【讨论】：

我会从路由器传递一个参数来指示当前页面吗？我只使用 Symfony 2 中的模板渲染。我编写了自己的简单路由器来根据请求 url 渲染页面。
不，app 变量应该已经存在了。
但问题是……我自己写了路由器。我只是在使用 $twig->render(template)。我目前是 PHP 的菜鸟。
它不应该是隐含发送的东西，如果你在你的页面上放一个 {{ dump(app.request.get('_route')) }} 你可以看到你的路线。
好的...我会试试的。谢谢！