使用多个 child 模板构建 jinja/flask 模板?
Structuring jinja/flask templates with multiple child templates?
我希望设计一个网站,提供来自数据库的不同数据视图。我是 jinja/flask 的新手,一般来说是模板,所以我很可能以错误的方式解决这个问题,我正在寻找一些反馈或 "lordy lord no, you don't ever do that" 反馈也有效。 :)
该页面的基本结构是:一个带有快速链接的 header 菜单,一个指向不同数据源的导航栏菜单,下方的另一个导航栏为数据提供不同的视图。视图的第二个导航栏会因在初始导航栏中选择的选项而异。
我设想的结构如下:
|-base.html (header menu)
|--navbar1.html (extends base.html, first navbar)
|---navbar2.html (and 3 and 4, etc. - extends navbar1)
|----data_view1.html (and 2, 3, etc. - the returned query, extends navbar2)
这会将每个 html 基本上视为一个框架,在我看来这似乎是正确的做法,并使用变量来跟踪要通过其他块突出显示的导航栏选项。
虽然看起来很乱,但实现上述目标的最佳方法是什么?是否只有一个 html 文件和一系列 elif 会根据用户选择显示 navbar2/3/4 和 view1/2/3 页面?
非常感谢。
你当然可以这样做,但它很快就会变得复杂。更好的解决方案几乎肯定是将所有导航包含在一个 include 中:
<nav class="top-navigation">
<ul class="nav nav-first-level">
{{ nav_entry("1st_ds", "1st Data Source", page, sub_page) }}
{{ nav_entry("2nd_ds", "2nd Data Source", page, sub_page) }}
{{ nav_entry("3rd_ds", "3rd Data Source", page, sub_page) }}
</ul>
</nav>
{% macro nav_entry(identifier, title, page_id, sub_page_id) %}
{% set attrs = {"class": "nav-selected"} if identifier == page_id else {} %}
<li{{ attrs | xmlattrs }}><a href="#goes-somewhere">{{ title }}</a>
<ul class="nav nav-second-level">
<li{{ set_if_selected('1st_sub_entry', sub_page_id) }}>1st Sub-Entry</li>
{# Other set_if_selected calls left off for clarity) #}
<li>2nd Sub-Entry</li>
<li>3rd Sub-Entry</li>
</ul>
</li>
{% endmacro %}
{% macro set_if_selected(identifier, to_match) %}
{{ {"class": "nav-selected"} if identifier == to_match else {} | xmlattrs }}
{% endmacro %}
如果所有这些导航条目都是动态的,那就更容易了:
<nav class="top-navigation">
<ul class="nav nav-first-level">
{% for nav_item in navigation %}
{{ nav_entry(nav_item) }}
{% endfor %}
</ul>
</nav>
navigation
可以像元组列表一样简单:
# Tuples are in the form
# (Link Title, URL, Is Selected?, Sub Menu Items)
# And sub menu items are tuples in the form
# (Link Title, URL, Is Selected?)
navigation = [("1st Data Source", "/some/url", true, []),
("2nd Data Source", "/some/url/2", false, [("A", "/a", false)]),
("3rd Data Source", "/some/url/3", false, [("B", "/b", false),("C", "/c", false)])]
nav_entry
的更新留作 reader 的练习:wink:
我希望设计一个网站,提供来自数据库的不同数据视图。我是 jinja/flask 的新手,一般来说是模板,所以我很可能以错误的方式解决这个问题,我正在寻找一些反馈或 "lordy lord no, you don't ever do that" 反馈也有效。 :)
该页面的基本结构是:一个带有快速链接的 header 菜单,一个指向不同数据源的导航栏菜单,下方的另一个导航栏为数据提供不同的视图。视图的第二个导航栏会因在初始导航栏中选择的选项而异。
我设想的结构如下:
|-base.html (header menu)
|--navbar1.html (extends base.html, first navbar)
|---navbar2.html (and 3 and 4, etc. - extends navbar1)
|----data_view1.html (and 2, 3, etc. - the returned query, extends navbar2)
这会将每个 html 基本上视为一个框架,在我看来这似乎是正确的做法,并使用变量来跟踪要通过其他块突出显示的导航栏选项。
虽然看起来很乱,但实现上述目标的最佳方法是什么?是否只有一个 html 文件和一系列 elif 会根据用户选择显示 navbar2/3/4 和 view1/2/3 页面?
非常感谢。
你当然可以这样做,但它很快就会变得复杂。更好的解决方案几乎肯定是将所有导航包含在一个 include 中:
<nav class="top-navigation">
<ul class="nav nav-first-level">
{{ nav_entry("1st_ds", "1st Data Source", page, sub_page) }}
{{ nav_entry("2nd_ds", "2nd Data Source", page, sub_page) }}
{{ nav_entry("3rd_ds", "3rd Data Source", page, sub_page) }}
</ul>
</nav>
{% macro nav_entry(identifier, title, page_id, sub_page_id) %}
{% set attrs = {"class": "nav-selected"} if identifier == page_id else {} %}
<li{{ attrs | xmlattrs }}><a href="#goes-somewhere">{{ title }}</a>
<ul class="nav nav-second-level">
<li{{ set_if_selected('1st_sub_entry', sub_page_id) }}>1st Sub-Entry</li>
{# Other set_if_selected calls left off for clarity) #}
<li>2nd Sub-Entry</li>
<li>3rd Sub-Entry</li>
</ul>
</li>
{% endmacro %}
{% macro set_if_selected(identifier, to_match) %}
{{ {"class": "nav-selected"} if identifier == to_match else {} | xmlattrs }}
{% endmacro %}
如果所有这些导航条目都是动态的,那就更容易了:
<nav class="top-navigation">
<ul class="nav nav-first-level">
{% for nav_item in navigation %}
{{ nav_entry(nav_item) }}
{% endfor %}
</ul>
</nav>
navigation
可以像元组列表一样简单:
# Tuples are in the form
# (Link Title, URL, Is Selected?, Sub Menu Items)
# And sub menu items are tuples in the form
# (Link Title, URL, Is Selected?)
navigation = [("1st Data Source", "/some/url", true, []),
("2nd Data Source", "/some/url/2", false, [("A", "/a", false)]),
("3rd Data Source", "/some/url/3", false, [("B", "/b", false),("C", "/c", false)])]
nav_entry
的更新留作 reader 的练习:wink: