Flask 在烧瓶中设置活动元素菜单的样式
我在烧瓶中有以下模板结构:Flask 在烧瓶中设置活动元素菜单的样式,flask,Flask,我在烧瓶中有以下模板结构: templates/ /posts list.html base.html index.html my base.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ITV</title> <!-- Latest compiled and minified CSS -
templates/
/posts
list.html
base.html
index.html
my base.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITV</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
{%- block topbar -%}
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">САПР</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Головна</a></li>
<li><a href="/posts">Новини</a></li>
<li><a href="/schedue">Розклад занять</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
{%- endblock -%}
<div class="container">
<div class="content">
{% block page_header %}{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
如何在base.html中设置活动元素菜单
<li class="active"><a href="/">Головна</a></li>
<li><a href="/posts">Новини</a></li>
<li><a href="/schedue">Розклад занять</a></li>
当我呈现list.html时,无法将数据直接传递到Flask中的base.html?中,
request
变量位于模板中,因此您只需在base.html
中检查request.path
,并调整链接即可
<li {% if request.path == '/' %}class="active"{% endif %}>
<a href="/">Головна</a>
</li>
也可以使用三元数…只是稍微短一点,更好一点
<li {{ 'class="active"' if request.path == '/' else '' }}>
<a href="/">Головна</a>
</li>
对于使用url\u比只使用文本'/'
更好。这样,如果更改路由端点,只需在一个位置进行更改。另一方面,如果您更改该端点的方法名称,现代IDE(如PyCharm)也将在HTML模板中的url_中重构调用的方法名称。
<li {{ 'class="active"' if request.path == '/' else '' }}>
<a href="/">Головна</a>
</li>