Jinja 模板 - 速查表和免费示例

2025-06-10

Jinja 模板 - 速查表和免费示例

你好，程序员们，

本文简要介绍Flask/Jinja 模板系统，它是一款现代且易于设计人员使用的 Python 语言，其原型源自 Django 的模板。Jinja本质上是一个引擎，用于生成通过 HTTP 响应返回给用户的 HTML 或 XML。对于新手来说，Jinja是一个 Python 库，被 Flask、FastAPI 和 Django 等流行的 Web 框架使用，以安全高效的方式提供 HTML 页面。

感谢阅读！ - 内容由App Generator提供。

软 UI 仪表板

由 AppSeed 在Flask框架中生成的管理仪表板。Soft UI Dashboard 专为喜欢大胆元素和精美网站的用户而设计，可帮助您创建令人惊叹的网站和 Web 应用。Soft UI Dashboard 包含 70 多个前端独立元素，例如按钮、输入框、导航栏、导航标签、卡片或警报，让您可以自由选择和组合。

Jinja 模板 - 软 UI 仪表板，开源 Bootstrap 5 设计。

材料设计

Material Kit 是一款免费的 Bootstrap 5 UI 套件，其设计灵感源自 Google 的 Material Design，焕然一新。Material Kit 充分利用了光线、表面和运动元素。它采用了精心的配色、无边框图像和大尺寸字体。

Jinja 模板 - 材料套件设计。

Jinja 是什么

Jinja 是一个 Python 库，被 Flask 和 Django 等流行的 Web 框架用来安全高效地提供 HTML 页面。无论使用何种语言或框架编写 Web 应用程序，使用模板引擎都是 Web 开发中的常见做法。

Jinja 环境

作为一个 Python 库，Jinja 需要安装 Python 并可通过终端使用。我们可以通过输入 来检查 Python 的安装情况python --version。一旦我们确定 Python 已安装，就可以通过PIPPython 的官方包管理器 来安装 Jinja：

$ pip install jinja2
Enter fullscreen mode Exit fullscreen mode

最简单的 Jinja 代码片段可能如下所示：

>>> from jinja2 import Template
>>> t = Template("Jinja {{ token }}!")
>>> t.render(token="works")
u'Jinja works!'
Enter fullscreen mode Exit fullscreen mode

使用模板引擎的原因/优势

减少工作量

Jinja 允许我们在多个页面和上下文中重用组件（也就是通用 HTML 块），只需进行少量修改。假设我们有一个页脚，其中包含一些链接和联系信息，这些链接和信息在 Web 应用程序的所有页面中都是通用的。使用 Jinja，我们可以定义一个名为 的单独文件footer.html，并通过简单的 include 语句重用它：

footer.html定义

<footer class="footer">
    <div class=" container-fluid ">
        <span>
            &copy; YourCompany;
        </span>

        <span>
            Contact: bill [ @ ] microsoft.com
        </span>
    </div>
</footer>
Enter fullscreen mode Exit fullscreen mode

footer.html在最终页面中的用法：

<head>
  <title>
    Jinja Template - Cheat Sheet | Dev.to
  </title>
</head>
<body>
    <div class="content">
        Some cool content
    </div>

    <!-- The magic include line --> 
    {% include 'footer.html' %}    

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

模板继承

在 Jinja 语境中，继承是指定义一个base template定义所有后续子模板基本结构的结构。此主模板可以inherited通过extends指令构建变体（新页面）。

真实样本

父 HTML - 保存为base.html

<html>
  <head>
    <title>My Jinja {% block title %}{% endblock %} </title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      { block content }{ endblock }
      <br>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

子模板- 另存为child.html

{ extends "base.html" }

{ block title } MySample { endblock }

{ block content }
  Cool content here
{ endblock }
Enter fullscreen mode Exit fullscreen mode

当 Jinja 加载时child.html，该{ extends }块会通知引擎将base.html模板与提供的内容合并child.html。

  • { block title }变成MySample
  • { block content }成为这里的酷内容

生成的 HTML

<html>
  <head>
    <title>My Jinja MySample</title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      Cool content here
      <br>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Jinja - 渲染列表

Jinja 支持诸如if/else、之类的控制结构for loops来操作列表和字典。

列表定义

# Define a simple list
users = ['user1','user2', 'user3']
Enter fullscreen mode Exit fullscreen mode

Jinja 代码片段

<h1>Members</h1>
<ul>
{% for user in users %}
  <li>{{ user }}</li>
{% endfor %}
</ul>
Enter fullscreen mode Exit fullscreen mode

生成的 HTML

<h1>Members</h1>
<ul>
  <li>user1</li>
  <li>user2</li>
  <li>user3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

For可以使用简单的方法来检查循环是否为空else，如下所示：

Jinja 代码片段

<ul>
{% for user in users %}
    <li>{{ user.username|e }}</li>
{% else %}
    <li><em>no users found</em></li>
{% endfor %}
</ul>
Enter fullscreen mode Exit fullscreen mode

生成的 HTML

<h1>Members</h1>
<ul>
  <li>no users found</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Jinja - HTML 转义

当生成 HTML 并且注入的内容可能包含>、<、&或 时，转义很有用"。Jinja 中的转义通过将变量通过 |e 过滤器进行管道传输来实现：

Jinja 代码片段

{{ content|e }} <!-- content might contain unsafe chars -->
Enter fullscreen mode Exit fullscreen mode

Jinja 过滤器

过滤器部分允许在模板数据块上应用常规 Jinja 过滤器 - 语法：

Jinja 代码片段

{% filter upper %}
    uppercase me
{% endfilter %}
Enter fullscreen mode Exit fullscreen mode

生成的 HTML

UPPERCASE ME
Enter fullscreen mode Exit fullscreen mode

金贾数学

Jinja 允许你计算值。以下是一些示例：

{{ 1 + 1 }} will render 1
Enter fullscreen mode Exit fullscreen mode 
{{ 1 / 2 }} will render 0.5
Enter fullscreen mode Exit fullscreen mode 
{{ 11 % 7 }} will render 4
Enter fullscreen mode Exit fullscreen mode

如果您觉得这份 Jinja 模板速查表适合您在开发中使用，我们可以提供一个基于Now UI Dashboard编写的真实示例。Now UI Dashboard是由 Creative-Tim 打造的热门（免费）设计。作为AppSeed
根据 MIT 许可证 发布的开源项目，该项目可用于无限的业余爱好和商业项目。

Flask Bootstrap 5

种子项目本质上是一个轻量级的 Flask 项目，无需数据库或其他硬依赖项。该项目附带 Docker、HEROKU 和 Gunicorn/Nginx 技术栈的部署脚本。

如何编译 Jinja Volt （从README文件中提取的信息）

$ # Clone the sources
$ git clone https://github.com/app-generator/jinja-volt-dashboard.git
$ cd jinja-volt-dashboard
$
$ # Virtualenv set up (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the Jinja Template
$ flask run
$
$ # Access the UI in browser: http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

如果一切顺利的话，我们应该会看到Jinja Volt在端口上运行5000：

Jinja 模板 - Volt 仪表板，主屏幕。

Flask Datta Able

Datta Able 是市场上所有精简/免费管理模板中最具风格化的 Bootstrap 4 精简版管理模板。它拥有功能丰富的页面和组件，并完全以开发人员为中心。代码结构良好，注释清晰，无错误/bug，并定期更新所有最新代码。这为您节省了大量开发后端应用程序的时间，并且完全可定制。

Jinja Datta Able - 用 Jinja 制作的开源管理仪表板。

Flask 像素用户界面

Pixel 是一款免费、完全响应式、现代化的 Bootstrap 4 UI 工具包，可帮助您构建富有创意且专业的网站。使用我们的组件和版块，并切换一些 Sass 变量，即可构建和排列最符合您需求的页面。

Pixel Lite 附带我们创建的 6 个高级示例页面，向您展示如何创建精美的用户界面。这些页面包括定价页面、关于页面、联系页面、登录页面和注册页面。

Jinja Pixel UI - AppSeed 提供的开源 Jinja 模板。

梯度瓶

使用Flask框架编写的开源 Jinja 模板。Gradient Able Bootstrap 4 免费/精简版管理模板是您创建仪表板的完整解决方案。Gradient Able以其优雅的外观脱颖而出，将柔和的渐变色与合适的字体、精美的卡片和图形相结合。

Jinja Template Gradient Able - AppSeed 提供的开源模板项目。

感谢阅读！更多资源请访问：

鏂囩珷鏉ユ簮锛�https://dev.to/sm0ke/jinja-template-cheat-sheet-and-free-sample-28kh
Devto 翻译
PREV
轻量级 CSS 框架 - 精选列表
NEXT
Gatsby - 主题和入门