使用Flask和jinja2动态设置活动类

因此，首先，我想说，我相当肯定，我正在遵循中提供的说明，以及与文档相呼应的帖子，以及那些提供了一些不同观点的帖子

不管怎样，这对我都不起作用

我的一个问题是，这段代码是如何出现在我的文本编辑器中的。我附上了一张图片来演示jinja2代码是如何被格式化的，

元素中的所有内容都被斜体化了，而double

=

的行为似乎也很奇怪

以下是图像中表示的代码部分：

<ul class="side-link-container center-align">
                {% for href, id, caption in navigation_bar %}
                <li{% if id == active_page %} class="active"{% endif
                %}><a href="{{ href|e }}">{{ caption|e }}</a>
                </li>
                {% endfor %}

{%for href，id，导航栏中的标题%}

{%endfor%}

它与jinja2文档中的内容非常相同（此处未显示此代码的其他部分，即导航栏的for循环和set activate page assignment，在子模板和layout.html中）

任何关于将活动页面分类的建议或帮助，例如我可以在导航中对其进行相应的样式设置？谢谢

---

代码在编辑器中的显示方式不会引起任何问题，但这可能意味着您没有安装语法/语言支持插件/附加组件

如果您没有收到任何模板错误（

TemplateSyntaxError

），可能是

导航栏

或

活动页面

中的数据根本不匹配。是否可以包含这些错误的数据

或者，我的目标是在基本模板和每个页面模板上设置

活动页面

：

{% set active_page = 'home' %}

在导航项目中，我添加了：

<li class="other-styles {{'active' if active_page == 'the page' }}">

代码在编辑器中的显示方式不会引起任何问题，但这可能意味着您没有安装语法/语言支持插件/附加组件

如果您没有收到任何模板错误（

TemplateSyntaxError

），可能是

导航栏

或

活动页面

中的数据根本不匹配。是否可以包含这些错误的数据

或者，我的目标是在基本模板和每个页面模板上设置

活动页面

：

{% set active_page = 'home' %}

在导航项目中，我添加了：

<li class="other-styles {{'active' if active_page == 'the page' }}">

谢谢你的回复！你在“或者，…”后面列出的代码是你正在使用的吗？它很优雅，对我来说很有意义，但是除非有更多，否则它对我不起作用。我在我的learning.html和

类的顶部有
{%extends'layout.html%}{%set active_page=“learning”%}
{{'active'if active_page=='learning'}}“

在指向学习页面的layout.html中的

中（我的所有链接都正常工作）。此外，当我在{}括号内的两侧添加一个%时，我会得到一个TemplateSyntaxError。是的，就是这样。使用

{}

语法对于内联条件是正确的。当你检查html时，它是否添加了活动类？啊，它现在可以工作了！非常感谢。我不得不胡乱处理一些东西，但显然它只在我的CSS中，我指定了

.active a

（因此，链接元素以及类）时才起作用而且不仅仅是

.active

。单独选择类时，它的颜色没有改变，尽管它的大小很奇怪。但是现在一切都正常了。谢谢你的回复！你在“或者，…”后面列出的代码是什么你所使用的一切？它很优雅，对我来说很有意义，但除非有更多，否则它对我不起作用。我有

{%extends'layout.html%}{%set active_page=“learning”%}

就在我的learning.html和

类=“{active if active_page='learning'}”

在我的layout.html中指向学习页面的

内（我的所有链接都正常工作）。此外，当我在{}括号内两侧添加%时，我会得到一个TemplateSyntaxError。是的，就是这样。使用

{}

语法对于内联条件是正确的。当你检查html时，它是否添加了活动类？啊，它现在可以工作了！非常感谢。我不得不胡乱处理一些东西，但显然它只在我的CSS中，我指定了

.active a

（因此，链接元素以及类）时才起作用不仅仅是

.active

。它的颜色在单独选择类时没有改变，尽管它的大小是.will。但是现在一切都按预期工作。