javascript – django – 使用带有一些动态元素的通用标头

我打算用django创建一个网站,整个网站都有一个共同的标题.我已经阅读了django关于模板继承的文档,但我似乎无法找到一个优雅的解决方案,用于标题中的“动态”元素.

例如,网站中的标题将包含标签,类似于http://www.google.com/(其中包含“Web”,“图像”等),其中所选标签将描述您在网站中的当前位置.

使用django模板继承,看起来你会像这样创建一个基本模板:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My Amazing Site{% endblock %}</title>
</head>
<body>
<div id="header">
    {% block header %}
     .... html to create tabs ...
    {% endblock header %}
</div>

然后在我的所有其他页面中,我会这样做:

{% extends "base.html" %}
{% block header % }
 .... html to create tabs with one tab "selected" ...
{% endblock header %}

这看起来很烦人,因为我的每一页都必须有标题信息的重复HTML,但略有不同.因此,当需要添加新选项卡时,我必须修改每个HTML文件.

在进一步阅读时,似乎其他一些可能的解决方案是:

1 – 创建一个自定义模板标记,该标记接收当前选中的选项卡,在我刚调用的每个HTML页面中都采用这种方式:
    {%block header%}
    {%mycustomtag abc%}
    {%endblock header%}

我不喜欢这个解决方案,因为它需要将HTML放入python代码中来创建这个自定义标记.

2 – 创建X数量的base.html子模板,所有子模板都选中了相应的选项卡.然后,每个页面将根据他们想要选择的选项卡从相应的子模板继承.

这个解决方案看起来很好,除了它需要X数几乎完全相同的HTML,并且仍然遇到在添加或删除选项卡时必须修改所有文件的问题.

3 – 使用javascript(如jquery)修改页面加载时的标题以“选择”正确的选项卡.

这个解决方案很好,但是需要记住将这个功能添加到每个页面的javascript中.好的部分是标题HTML只存在于一个HTML文件中.

还有其他建议吗?

谢谢!

最佳答案
我假设每个标签都是模板base.html中的列表项.

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    ...
</ul>

为每个li添加一个额外的块.

<ul>
    <li class="{% block class_tab1 %}inactive{% endblock %}">Tab 1</li>
    <li class="{% block class_tab2 %}inactive{% endblock %}">Tab 2</li>
    <li class="{% block class_tab3 %}inactive{% endblock %}">Tab 3</li>
    ...
</ul>

然后在模板中选择选项卡1:

{% extends "base.html" %}

{% block class_tab1 %}active{% endblock %}
...

所以为Tab 1呈现的html是:

<ul>
    <li class="active">Tab 1</li>
    <li class="inactive">Tab 2</li>
    <li class="inactive">Tab 3</li>
    ...
</ul>

你可以根据自己的意愿编写CSS来定位li .active.

转载注明原文:javascript – django – 使用带有一些动态元素的通用标头 - 代码日志