Javascript django-使用带有一些动态元素的公共头_Javascript_Python_Django

Javascript django-使用带有一些动态元素的公共头

javascript python django

Javascript django-使用带有一些动态元素的公共头,javascript,python,django,Javascript,Python,Django,我计划创建一个网站使用django，将有一个共同的头在整个网站。我已经阅读了django关于模板化继承的文档，但是我似乎找不到一个优雅的解决方案来解决头部中的“动态”元素例如，网站中的标题将包括选项卡，例如类似于（其中有“Web”、“图像”等），其中所选选项卡将描述您在网站中的当前位置使用django模板继承，您似乎可以创建如下基本模板： <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <

我计划创建一个网站使用django，将有一个共同的头在整个网站。我已经阅读了django关于模板化继承的文档，但是我似乎找不到一个优雅的解决方案来解决头部中的“动态”元素

例如，网站中的标题将包括选项卡，例如类似于（其中有“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>

@register.inclusion_tag('snippets/navigation.html')
def navigation(cat=None):
    return {'cats':Category.objects.order_by('sort_order'),
            'cat':cat
            }

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

进一步阅读后，似乎还有其他一些可能的解决方案：

1-创建一个自定义模板标记，该标记采用当前选中的选项卡，这样在我刚刚调用的每个HTML页面中： {%块头%} {%mycustomtag abc%} {%endblock头%}

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

2-创建X个base.html子模板，所有子模板都选择了相应的选项卡。然后，每个页面将根据希望选择的选项卡从相应的子模板继承

这个解决方案看起来不错，只是它需要X个几乎完全相同的HTML，并且在添加或删除选项卡时仍会遇到必须修改所有文件的问题

3-使用javascript（如jquery）修改页面加载的标题以“选择”正确的选项卡

这个解决方案很好，但需要记住将此功能添加到每个页面的javascript中。好的方面是，头HTML将只存在于单个HTML文件中

还有其他建议吗

谢谢

一个版本的#1就可以做到这一点——为标签提供一个单独的模板文件

假设您有模型“类别”和“文章”

在视图中，您可以将正在查看的类别传递给模板：

@render_to('cat_index.html')
def category_view(request,string):

    cat = Category.objects.get(slug=string)
    articles = Article.objects.filter(category = cat).order_by('date')
    return {
             'articles':articles,
             'category':cat,
             }

（注意：使用

render\u to

-decorator–与

render\u to\u响应相同

）

在模板中，您可以这样调用包含标记：

<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>

@register.inclusion_tag('snippets/navigation.html')
def navigation(cat=None):
    return {'cats':Category.objects.order_by('sort_order'),
            'cat':cat
            }

通过在基本模板（通常称为base.html）中使用它

现在，在Includes_标记的模板（

snippets/navigation.html

）中，您可以循环使用

cats

，如果其中一个等于

cat

，您可以指定其他样式

    <ul>    
      {% for c in cats %}
          <li{% ifequal c cat %} class="active"{% endifequal %}>
              <a href="{{c|url}}">{{ c }}</a>
          </li>
      {% endfor %}
    </ul>


{cats%%中c的百分比}

{%endfor%}

我假设每个选项卡都是模板

base.html

中的列表项

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

如果要选择选项卡1，则在模板中：

{% extends "base.html" %}

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

因此，为选项卡1呈现的html为：

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


选项卡1
表2
表3
...

您可以根据自己的意愿编写CSS以定位

li.active

。

这是一个相当常见的问题，我已经想出了一些解决方法

既然你在寻求选择，这里有3种其他方法可以达到这个效果。你提到的选项和下面列出的选项都有它们的优点和缺点。这真的是由你来决定哪一个是最合适的

备选方案1-使用正则表达式和哈希表

这可以在客户端（不太有利）或服务器端（更好的选择）执行。要做到这一点，您可以有一个具有1个输入的标记：正则表达式。在使用中，它看起来像这样

// In base.html...

<li class="tab {% is_tab_active r'^/cars/' %}"><a>Cars</a></li>
<li class="tab {% is_tab_active r'^/trucks/' %}"><a>Trucks</a></li>

对于您的基本模板

<body class="{% block category %}{% endblock %}">

...

<ul class="navigation">
    <li id="cars_tab"><a>Cars</a></li>
    <li id="trucks_tab"><a>Trucks</a></li>

备选方案3-有一些臃肿的中间件

Django允许您编写中间件来影响您想要的任何东西的行为。这似乎是一条臃肿而复杂的路线，可能会对性能产生负面影响，但我想我至少应该把它作为一个选项来提。

我使用的是“Alternate 2-Use CSS”，效果非常好。我认为这是最好的办法。没有几个逻辑块，你只有一个！谢谢

// In base.html...

<li class="tab {% is_tab_active r'^/cars/' %}"><a>Cars</a></li>
<li class="tab {% is_tab_active r'^/trucks/' %}"><a>Trucks</a></li>

body.cars_section .navigation #cars_tab { color: #00000; }
body.truck_section .navigation #trucks_tab { color: #00000; }

<body class="{% block category %}{% endblock %}">

...

<ul class="navigation">
    <li id="cars_tab"><a>Cars</a></li>
    <li id="trucks_tab"><a>Trucks</a></li>

{% extends "base.html" %}

...

{% block category %}cars_section{% endblock %}