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

简介: 目录目录前文列表扩展阅读使用 Bootstrap编写 Jinja 模板文件继承一个模板前文列表用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写...

目录

前文列表

用 Flask 来写个轻博客 (1) — 创建项目
用 Flask 来写个轻博客 (2) — Hello World!
用 Flask 来写个轻博客 (3) — (M)VC_连接 MySQL 和 SQLAlchemy
用 Flask 来写个轻博客 (4) — (M)VC_创建数据模型和表
用 Flask 来写个轻博客 (5) — (M)VC_SQLAlchemy 的 CRUD 详解
用 Flask 来写个轻博客 (6) — (M)VC_models 的关系(one to many)
用 Flask 来写个轻博客 (7) — (M)VC_models 的关系(many to many)
用 Flask 来写个轻博客 (8) — (M)VC_Alembic 管理数据库结构的升级和降级
用 Flask 来写个轻博客 (9) — M(V)C_Jinja 语法基础快速概览
用 Flask 来写个轻博客 (10) — M(V)C_Jinja 常用过滤器与 Flask 特殊变量及方法
用 Flask 来写个轻博客 (11) — M(V)C_创建视图函数

扩展阅读

Bootstrap 中文网

使用 Bootstrap

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

  • 下载 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 的页面。
这里写图片描述

相关文章
|
29天前
|
前端开发 JavaScript Python
flask实战-模板实现公共导航
在Flask中实现模板继承,创建基础模板`base.html`,包含公共导航菜单。子模板`movie-extends.html`继承`base.html`,并定义主要内容。视图函数`movie_extends_view`渲染`movie-extends.html`,显示电影列表。通过`extra_css`和`extra_js`块添加页面特定的样式和脚本,实现在`movie-extends.html`中应用自定义CSS样式。运行应用,访问http://127.0.0.1:1027/movie-extends,页面显示定制的电影列表样式。
65 2
|
2月前
|
Python
Flask中的模板的使用
Flask中的模板的使用
21 0
|
2月前
|
存储 移动开发 前端开发
Flask狼书笔记 | 03_模板
3 模板 模板(template):包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。 3.1 模板基本使用
41 0
|
2月前
|
开发框架 Python
Web 框架 Flask 快速入门(一)flask基础与模板
🌴 Flask基础和模板 1、web框架的作用 避免重复造轮子,app程序不必关心于服务器的沟通方式,而专注于核心的业务逻辑实现。 稳定,可扩展性强
61 0
|
8月前
|
JavaScript 前端开发 知识图谱
flask-模板用法
flask-模板用法
37 0
|
前端开发 JavaScript 数据处理
Flask之jinja2模板(一)
Flask之jinja2模板(一)
|
11月前
|
数据可视化 定位技术 Python
可视化 | 分享一套Flask+Pyecharts可视化模板
可视化 | 分享一套Flask+Pyecharts可视化模板
|
前端开发 JavaScript Python
Flask之jinja2模板(三)
Flask之jinja2模板(三)
|
索引 Python
Flask之jinja2模板(二)
Flask之jinja2模板(二)
|
前端开发 JavaScript Python
Flask热更新html模板文件和静态文件
Flask热更新html模板文件和静态文件
186 0