前端Scripts模块问题

来源:互联网 发布:c语言socket网络编程 编辑:程序博客网 时间:2024/05/29 19:32

base.html
代码如下:

{% extends "bootstrap/base.html" %}{% block title %}Flasky{% endblock %}{% block head %}{{ super() }}<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"><link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">{% endblock %}{% block navbar %}<div class="navbar navbar-inverse" role="navigation">    <div class="container">        <div class="navbar-header">            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" href="{{ url_for('main.index') }}">Flasky</a>        </div>        <div class="navbar-collapse collapse">            <ul class="nav navbar-nav">                <li><a href="{{ url_for('main.index') }}">Home</a></li>                {% if current_user.is_authenticated %}                <li><a href="{{ url_for('main.user', username=current_user.username) }}">Profile</a></li>                {% endif %}            </ul>            <ul class="nav navbar-nav navbar-right">                {% if current_user.can(Permission.MODERATE_COMMENTS) %}                <li><a href="{{ url_for('main.moderate') }}">Moderate Comments</a></li>                {% endif %}                {% if current_user.is_authenticated %}                <li class="dropdown">                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">                        <img src="{{ current_user.gravatar(size=18) }}">                        Account <b class="caret"></b>                    </a>                    <ul class="dropdown-menu">                        <li><a href="{{ url_for('auth.change_password') }}">Change Password</a></li>                        <li><a href="{{ url_for('auth.change_email_request') }}">Change Email</a></li>                        <li><a href="{{ url_for('auth.logout') }}">Log Out</a></li>                    </ul>                </li>                {% else %}                <li><a href="{{ url_for('auth.login') }}">Log In</a></li>                {% endif %}            </ul>        </div>    </div></div>{% endblock %}{% block content %}<div class="container">    {% for message in get_flashed_messages() %}    <div class="alert alert-warning">        <button type="button" class="close" data-dismiss="alert">&times;</button>        {{ message }}    </div>    {% endfor %}    {% block page_content %}{% endblock %}</div>{% endblock %}{% block scripts %}{{ super() }}{{ moment.include_moment() }}{% endblock %}

index.html
代码如下:

% extends "base.html" %}{% import "bootstrap/wtf.html" as wtf %}{% import "_macros.html" as macros %}{% block title %}Flasky{% endblock %}{% block page_content %}<div class="page-header">    <h1>Hello, {% if current_user.is_authenticated %}{{ current_user.username }}{% else %}Stranger{% endif %}!</h1></div><div>    {% if current_user.can(Permission.WRITE_ARTICLES) %}    {{ wtf.quick_form(form) }}    {% endif %}</div><div class="post-tabs">    <ul class="nav nav-tabs">        <li{% if not show_followed %} class="active"{% endif %}><a href="{{ url_for('.show_all') }}">All</a></li>        {% if current_user.is_authenticated %}        <li{% if show_followed %} class="active"{% endif %}><a href="{{ url_for('.show_followed') }}">Followers</a></li>        {% endif %}    </ul>    {% include '_posts.html' %}</div>{% if pagination %}<div class="pagination">    {{ macros.pagination_widget(pagination, '.index') }}</div>{% endif %}{% endblock %}{% block scripts %}{{ super() }}{{ pagedown.include_pagedown() }}{% endblock %}


如下代码中的block scripts代码块,不能放在block content等代码块里面

{{ super() }}{{ moment.include_moment() }}{% endblock %}
{% block scripts %}{{ super() }}{{ pagedown.include_pagedown() }}{% endblock %}

解释说明:
{{ super() }}的意思是继承了原来的scripts扩展,包括jQuery这类东西。
{{ moment.include_moment() }}是引入moment.js

{{ super() }}这句话如果在content内就无法起作用,{{ moment.include_moment() }}就算在content内也可以起作用;

{{ moment.include_moment() }}是自己引入的,放在哪个都可以,但是放在在{% block scripts %}里面的话以后继承的话就会继承这个属性,放在外面的话就不继承这个属性。

注意不要把眼光局限在jinja2模板中,jinja2也是方便HTML编写的,HTML怎么引入css和js的,jinja2也是这样。

0 0
原创粉丝点击