Blog 项目源码：https://github.com/JmilkFan/JmilkFan-s-Blog

前文列表

扩展阅读

Bootstrap 中文网

使用 Bootstrap

Bootstrap: 是一个基于 HTML/CSS/JavaScript 的前端框架, 兼容大部分的 jQuery 插件, 它简洁灵活, 提供了大量内置的样式接口，使得 Web 开发更加简单快捷.

下载 Bootstrap
- 点这里进入 Bootstrap 官方网站
- 点击 Download Bootstrap
- 再点击 Download Bootstrap
使用 Bootstrap: 将下载的 ZIP 文件解压到项目文件夹下, 并重命名为 static.

NOTE 1: 该 static 目录需要跟 main.py 在同一目录下, 这样 main.py 才能够找到这些文件.

NOTE 2: 该 static 目录也会成为该项目中存放所有 CSS 文件/字体文件/图片文件/Javascript文件 的目录.

(env)fanguiju@fanguiju:/opt/JmilkFan-s-Blog$ ll static/

total 20

drwxrwxr-x 5 fanguiju fanguiju 4096 Nov 23 14:35 ./

drwxr-xr-x 7 fanguiju fanguiju 4096 Nov 23 14:35 ../

drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 css/

drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 fonts/

drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 js/

编写 Jinja 模板文件

在对每个路由页面进行渲染时, 都会使用到一个 Jinja 模板, 而每一个 Jinja 模板文件中都含有类似的 HTML 代码(样式表/网页 meta 信息/共用的JS库文件). 我们当然不希望每次编写一个 Jinja 模板时, 都重复的编写这些 HTML 代码. 所以这里会应用到 Jinja 最强大的功能之一: 模板继承.

先创建一个 templates 目录, 用于存放所有的 Jinja 模板文件
创建一个 base.html 基础模板, 用于实现一个高重用的 HTML 文件基础代码.

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,, initial-scale=1">

  <!-- Will be replace the page title -->

  <title>{% block title %}Home{% endblock %}</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">

  <!-- Macro: `render paginate` -->

  {% macro render_pagination(pagination, endpoint) %}

    <nav>

      <ul class="pagination">

        <li>

        {% if pagination.has_prev %}

          <a href="{{ url_for('home', page=pagination.prev().page)

            }}" aria-label="Previous">

        {% else %}

          <a href="{{ url_for('home', page=1) }}" aria-label="Previous">

        {% endif %}

            <span aria-label="true">&laquo;</span>

          </a>

        </li>

        {% for page in pagination.iter_pages() %}

          {% if page %}

            {% if page != pagination.page %}

              <li>

                <a href="{{ url_for(endpoint, page=page) }}">

                  {{ page }}

                </a>

              </li>

            {% else %}

              <li><a href="">{{ page }}</a></li>

            {% endif %}

          {% else %}

            <li><a>...</a></li>

          {% endif %}

        {% endfor %}

        <li>

          <a href="{{ url_for('home', page=pagination.next().page )

            }}" aria-label="Next">

            <span aria-hidden="true">&raquo;</span>

          </a>

        <li>

      </ul>

    </nav>

  {% endmacro %}

</head>

<body>

  <div class="container">

    <div class="jumbotron">

      <!-- Replace the route function to URL: `/` -->

      <h1><a href="{{ url_for('home')}} ">JmilkFan's Blog</a></h1>

        <p>Welcome to the blog!</p>

    </div>

    {% block body %}

        body_content

    {% endblock %}

  </div>

  <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>

  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

</body>

</html>

可以通过继承某个基础模板来得到一个子模板, 在子模板中只需要替换掉基础模板中的一些标记段落, 就能够得到一个新的模板, 这与 Python 中继承的概念类似.

NOTE 1: 上述代码段中 {% block XXX %}old{% endblock %} 控制代码块的意义是标识出了该 Jinja 模板中可以被替换的部分. 在子模板继承时, 可以在子模版中实现 {% block XXX %}new{% endblock %} 语句，把父模板中的 block 控制代码块替换掉.
NOTE 2: 上述的代码中定义了一个宏 render_pagination(pagination, endpoint), 用于生成 Bootstrap 风格的分页链接列表. 宏定义要位于 HTML 代码的头部 <head>.
- pagination: SQLAlchemy 的分页对象 flask_sqlalchemy.Pagination object
- endpoint: 视图函数名(EG. post())

继承一个模板

要继承一个父模板, 需要在子模板中使用 extends 控制代码块.

现在在 home.html 中继承 base.html 模板.

{% extends "base.html"%}

{% block title %}JmilkFan's Blog{% endblock %}

NOTE: 现在的 home.heml 模板仅替换了 base.html 代码块中的 {% block title %}

最后：

我们启动 Flask Server 服务并使用浏览器访问 http://127.0.0.1:5000 来查看一下 home.html 的页面。

用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板的更多相关文章

用 Flask 来写个轻博客 (14) — M(V)C_实现项目首页的模板
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表实现所需要的视图函数实现 home.html 模板代码分析实现效 ...
用 Flask 来写个轻博客 (15) — M(V)C_实现博文页面评论表单
目录目录前文列表实现 post 视图函数在 posthtml 中添加表单效果前文列表用 Flask 来写个轻博客 (1) - 创建项目用 Flask 来写个轻博客 (2) - Hell ...
用 Flask 来写个轻博客 (11) — M(V)C_创建视图函数
目录目录前文列表视图函数在 viewspy 文件中定义视图函数定义右侧边栏的视图函数为每一张数据表定义视图函数前文列表用 Flask 来写个轻博客 (1) - 创建项目用 Flask ...
用 Flask 来写个轻博客 (13) — M(V)C_WTForms 服务端表单检验
目录目录前文列表 WTForms WTF 的基础使用常用的字段类型 fieldsDateField fieldsIntegerField fieldsFloatField fieldsStrin ...
用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表 Jinja 中常用的过滤器 default float int len ...
用 Flask 来写个轻博客 (9) — M(V)C_Jinja 语法基础快速概览
#目录前文列表扩展阅读 Jinja 变量名注释控制语句 if 语句循环过滤器无参数调用带参数调用宏定义宏调用宏结果兼容 JavaScript 前文列表用 Flask 来写个 ...
用 Flask 来写个轻博客
用 Flask 来写个轻博客用 Flask 来写个轻博客 (1) — 创建项目用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写个轻博客 (3) — (M)V ...
用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表第一阶段结语打 Tag 前文列表用 Flask 来写个轻博客 (1 ...
用 Flask 来写个轻博客 (36) — 使用 Flask-RESTful 来构建 RESTful API 之五
目录目录前文列表 PUT 请求 DELETE 请求测试对一条已经存在的 posts 记录进行 update 操作删除一条记录前文列表用 Flask 来写个轻博客 (1) - 创建项目用 ...

随机推荐

HBaseRegionServer宕机数据恢复
本文由网易云发布作者:范欣欣本篇文章仅限内部分享,如需转载,请联系网易获取授权. 众所周知,HBase默认适用于写多读少的应用,正是依赖于它相当出色的写入性能:一个100台RS的集群可以轻松地 ...
git使用记录三：查看日志
git使用记录三: git log git log 的帮助文档 git log --help 查看最后面的两个日志记录命令如下: git log -n number 比如: git log -n 2 ...
【awk】处理多个文件
处理多个文件: 1. 可以在代码中指定读取某个文件, 其他的用命令行输入 while ( geline < "file.txt" > 0 ) { ...
工控PLC中，关于定时器TON，TOF,的一点新认知，或者说醒悟吧！
PLC 中的定时器,都是放在一个具体PRG任务单元中的,而PRG单元需要放在具体固定的周期循环任务中才能被执行,而这个周期循环任务的循环周期 T: 与定时器的定时时间T0: T与T0 的数量级 ...
java--二叉树解析及基本实现
一.二叉树的结构在进行链表结构开发的过程之中,会发现所有的数据按照首尾相连的状态进行保存,那么在进行数据查询时为了判断数据是否存在,这种情况下它所面对的时间复杂度就是"O(n)" ...
linux缺頁異常處理--內核空間[v3.10]
缺頁異常被觸發通常有兩種情況—— 1.程序設計的不當導致訪問了非法的地址 2.訪問的地址是合法的,但是該地址還未分配物理頁框下面解釋一下第二種情況,這是虛擬內存管理的一個特性.盡管每個進程獨立擁有3 ...
python 字典（dictionary）一些方法
1.python 字典(Dictionary) keys() 函数以列表返回一个字典所有的键. keys()语法: dict.keys() 2.setdefault()方法 python字典setde ...
python 读 xlsx
前言 xlsx写方法参考此连接:http://www.cnblogs.com/whf191/p/5482485.html xlrd是用来读的,使用前需安装 pip install xlrd 例子 fn ...
Python网络编程UDP服务器与客服端简单例子
[转载] https://blog.csdn.net/hu330459076/article/details/7868028 UDP服务器代码: #!/usr/bin/env python # -*- ...
03.线程的通知notify与等待wait
wait().notify.notifyAll()方法 wait().notify().notifyAll()是三个定义在Object类里的方法,可以用来控制线程的状态. 这三个方法最终调用的都是jv ...

用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板

目录