住房和城乡建设部网站质保金,商品管理系统,wordpress 桌面,wordpress检查全站链接1.
一个网站中#xff0c;大部分网页的模块是重复的#xff0c;比如顶部的导航栏#xff0c;底部的备案信息。如果在每个页面中都重复的去写这些代码#xff0c;会让项目变得臃肿#xff0c;提高后期的维护成本。比较好的做法是#xff0c;通过模板继承#xff0c;把一…1.
一个网站中大部分网页的模块是重复的比如顶部的导航栏底部的备案信息。如果在每个页面中都重复的去写这些代码会让项目变得臃肿提高后期的维护成本。比较好的做法是通过模板继承把一些重复性的代码写在父模板中子模板继承父模板后再分别实现自己页面的代码。我们首先来看一个父模板 base.html 的例子
!DOCTYPE html
html langen
headlink relstylesheet hrefbase.css /title {% block title %} {% endblock %} /title{% block head %} {% endblock %}
/head
bodydiv idbody{% block body %} {% endbody %} /divdiv idfooter{% block footer %}copy; Copyright 2008 by a hrefhttp://domins.invaild/you/a{% endblock %}/div
/body
/html以上父模板中编写好了网页的整体结构并且把所有子模板都需要用到的样式文件 base.css 也提前引用好了。然后针对子模板需要重写的地方则定义成了 block比如以上定义了 title、head、body、footer 这几个 block子模板在继承了父模板后重写对应 block 的代码即可完成子模板的渲染。这里我们用继承 base.html 的方式实现一个 index.html 文件代码如下
{% extends base.index %}
{% block title %} 首页 {% endblock %}
{% block head %}style typetext/css.detail{color: red;}/style
{% endblock %}
{% block content%}h1这里是首页 /h1p classdetail首页的内容/p
{% endblock %}首先我们通过 extends 语法加载父模板因为 base.html 和 index.html 是在同一级目录下所以直接写“base.html”。这里需要注意的是extends 必须出现在子模版所有代码的最前面。接下来分别实现了 title、head、content 这三个 block实现的 block 中的代码将会被自动填充到父模板指定的位置并且最终会生成一个完成 html 结构的 index.html 文件。
模板中不能出现重名的 block如果一个地方需要用到另外一个 block 中的内容可以使用 self.blockname 的方式进行引用比如
title{% block title %}这是标题{% endblock %}
/title
h1 {{ self.title()}} /h1以上示例代码中h1 标签中通过 {{self.title}} 把 title 这个 block 中的内容引用到 h1 标签中。
如果子模版想要继承父模板中某个 block 的内容比如以上案例中我们想要继承父模板 footer 这个 block 中已有的内容则可以通过 super() 来实现
{% block footer %}{{super()}}// 子模版自己的代码
{% endblock %}如果没有 {{super()}}那么子模版将不能继承父模板 footer 这个 block 中的内容。
2. 使用 Flask-Bootstrap 集成 Bootstarp
Bootstrap 是 Twitter 开发的一个开源 Web 框架它提供的用户界面组件可用于创建整洁且具有吸引力的网页而且兼容所有现代的桌面和移动平台 Web 浏览器。 Bootstrap 是客户端框架因此不会直接涉及服务器。服务器需要做的只是提供引用了 Bootstrap 层叠样式表CSS和 JavaScript 文件的 HTML 响应并在 HTML、CSS 和 JavaScript 代码中实例化所需的用户界面元素。这些操作最理想的执行场所就是模板。 要想在应用中集成 Bootstrap最直接的方法是根据 Bootstrap 文档中的说明对 HTML 模板进行必要的改动。不过这个任务使用 Flask 扩展处理要简单得多而且相关的改动不会导致主逻辑混乱。
初始化 Flask-Bootstrap
from flask_bootstrap import Bootstrap
# ...
bootstrap Bootstrap(app)初始化Flask-Bootstrap 之后就可以在应用中使用一个包含所有Bootstrap文件和一般结构的基模板。应用利用Jinja2的模板继承机制来扩展这个基模板。 例如
{% extends bootstrap/base.html %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
div classnavbar navbar-inverse rolenavigation div classcontainer div classnavbar-header button typebutton classnavbar-toggle data-togglecollapse data-target.navbar-collapse span classsr-onlyToggle navigation/span span classicon-bar/span span classicon-bar/span span classicon-bar/span /button a classnavbar-brand href/Flasky/a /div div classnavbar-collapse collapse ul classnav navbar-nav lia href/Home/a/li /ul /div /div
/div
{% endblock %}
{% block content %}
div classcontainer div classpage-header h1Hello, {{ name }}!/h1 /div
/div
{% endblock %}在这个模板中navbar 区块使用 Bootstrap 组件定义了一个简单的导航栏。content区块中有个 div 容器其中包含一个页头。之前版本中的欢迎消息现在就放在这个页头里。
