📅 最后修改于: 2023-12-03 15:39:11.606000 🧑 作者: Mango
在网站的页面中，导航栏是相当重要的一部分。一个好的导航栏可以让用户更容易地找到他们想要的内容，提供一个更好的用户体验。
在编写导航栏时，一个重要的问题是如何标记当前活动页面的链接。在 HTML 中，我们可以使用 class 和 id 属性来识别当前页面的链接。但是，当我们使用 Flask 和 Jinja2 模板引擎来构建网站时，我们需要一些不同的方式来标记当前活动页面的链接。
在 Flask 中，我们可以使用 url_for 函数来生成链接。这个函数可以根据视图函数的名称和参数生成 URL。例如，我们可以像这样生成一个链接：
url_for('index')
在 Jinja2 模板中，我们可以使用 {% block %} 和 {% extends %} 来组织我们的页面。我们可以创建一个 base.html 模板，然后在其他页面中扩展这个模板。例如，一个基本的 base.html 模板可能如下所示：
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} - My Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{{ url_for('index') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
<li><a href="{{ url_for('contact') }}">Contact</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
在这个模板中，我们定义了一个导航栏，其中包含了我们的链接。我们使用了 url_for 函数来生成这些链接。在其他页面中，我们可以扩展这个模板，然后定义 title 和 content 块。例如，一个 index.html 页面可能如下所示：
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Welcome to my website</h1>
{% endblock %}
在这个页面中，我们扩展了 base.html 模板，并且定义了 title 和 content 块。在 title 块中，我们设置页面的标题为 "Home"。在 content 块中，我们定义了页面的主要内容。
现在，我们已经有了一个基本的导航栏，并且我们知道如何使用 Jinja2 模板来组织我们的页面。现在，我们需要解决一个问题：如何标记当前活动页面的链接。
一种常见的方法是在当前活动页面的链接上添加一个 active 类。例如，我们可以在 base.html 模板中增加一个 active 类，并使用一个 Jinja2 变量来判断当前页面是否是活动页面。例如：
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} - My Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li{% if active == 'index' %} class="active"{% endif %}><a href="{{ url_for('index') }}">Home</a></li>
<li{% if active == 'about' %} class="active"{% endif %}><a href="{{ url_for('about') }}">About</a></li>
<li{% if active == 'contact' %} class="active"{% endif %}><a href="{{ url_for('contact') }}">Contact</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
在这个模板中，我们增加了一个 {% if active == '...' %} 条件语句，用来判断当前页面是否是活动页面。如果是，我们就在这个链接上增加一个 active 类。
在其他页面中，我们可以设置 active 变量来告诉模板当前页面是哪个。例如，一个 index.html 页面可能如下所示：
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% set active = 'index' %}
{% block content %}
<h1>Welcome to my website</h1>
{% endblock %}
在这个页面中，我们设置了 active 变量为 'index'。这告诉模板当前页面是首页，因此我们要在首页的链接上增加一个 active 类。
在本文中，我们介绍了如何使用 Flask 和 Jinja2 构建导航栏，并如何标记当前活动页面的链接。我们使用了 {% block %} 和 {% extends %} 来组织我们的页面，使用 url_for 函数来生成链接，使用 {% if %} 条件语句来判断当前页面是否是活动页面，并使用 active 类来标记当前活动页面的链接。