Logo

菜单

发布于 2026-01-06 1 阅读
0

Jinja - 简介和示例应用

Jinja - 简介和示例应用

各位程序员朋友们，大家好！

本文简要介绍 Jinja，一种现代模板语言，Python 程序员在 Flask、Bottle 等框架中广泛使用，Django（1.8 版本起）也可选地支持 Jinja。对于已经熟悉 Jinja2 且速度较快的用户，我将在下方提供一些优秀的 Jinja 模板链接，这些模板都是非常简单的 Flask 入门示例（无需数据库或硬依赖）：

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

✨ Flask/Jinja 像素 UI

Pixel 是一款免费、完全响应式且现代化的 Bootstrap 4 UI 工具包，可帮助您构建创意十足且专业的网站。使用我们的组件和模块，调整一些 Sass 变量，即可构建和排列页面，以满足您的特定需求。Pixel Lite 包含 6 个我们精心打造的高级示例页面，向您展示我们可以创建多么精美的用户界面。

Jinja Pixel Lite - 由 AppSeed 提供的模板项目。

✨ Flask/Jinja Datta Able

Datta Able 提供无错误/无漏洞、结构良好、注释详尽的代码，并定期更新至最新版本。这能为您节省大量后端应用程序开发时间，并且完全可定制。这款由 CodedThemes 精心打造的现代 UI 工具包包含丰富的 UI 组件和预置页面：仪表盘、地图和身份验证页面。

Jinja模板 - Datta Able，缩略图。

✨ Flask/Jinja Bootstrap 5伏

Volt Dashboard 是一个免费开源的 Bootstrap 5 管理后台，包含 100 多个组件、11 个示例页面和 3 个使用原生 JavaScript 编写的插件。其中包含 100 多个免费的 Bootstrap 5 组件，例如按钮、提示框、模态框、日期选择器等等。

Jinja Volt 仪表盘 - 由 AppSeed 提供的入门套件。

✨ Flask/Jinja Material Lite Wpx

WrapPixel 的 MaterialPro Lite 是最好的 Bootstrap 管理后台和控制面板模板之一。它融合了赏心悦目的色彩、宽敞的卡片式布局、精美的字体和图形。

Jinja Material Lite - 由 AppSeed 提供的入门套件。

什么是金加

Jinja2 是一个 Python 模板引擎，用于生成通过 HTTP 响应返回给用户的 HTML 或 XML。

对于以前没有接触过模板语言的人来说，这类语言本质上包含变量以及一些编程逻辑，这些变量和逻辑在被求值（或渲染成 HTML）时会被替换为实际值。

我们为什么需要金加？

沙盒执行- 它为自动化测试程序提供了一个受保护的框架，这些程序的行为是未知的，必须进行调查。

Jinja 2 具有强大的自动 HTML转义功能，有助于防止跨站脚本攻击 (XSS)。模板中存在一些特殊字符，例如 >、<、& 等，它们具有特殊的含义。因此，如果您想在文档中将它们用作普通文本，则必须将其替换为实体。否则，可能会导致 XSS 攻击。

模板继承- 此功能帮助我们从继承了通用结构的基础模板开始生成新页面。

如何获取 Jinja2

要开始体验，只需打开终端并输入：

$ pip install jinja2
Enter fullscreen mode Exit fullscreen mode

金加行动中

简单运行时替换

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

引擎会将内部值替换token为实际值。当我们将此代码块用于不同的值Jinja2时，这非常有用。token

列表迭代

在 Web 开发中，我们有时会需要在页面上显示列表：例如，已注册用户列表或简单的选项列表。在 Jinja 中，我们可以使用for structure如下所示的列表：

# Define data structure
my_list=[0,1,2,3,4,5] # a simple list with integers
Enter fullscreen mode Exit fullscreen mode

在 Jinja 中，我们可以使用代码块轻松进行迭代for：

...
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
...
Enter fullscreen mode Exit fullscreen mode

模板继承

模板通常会利用继承，它包含一个定义所有后续子模板基本结构的基础模板。您可以使用 `{ extends }` 和 `{ block }` 标签来实现继承。

我们来看一个实际例子：

父级 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 }变得Cool content here

以下是 Jinja 生成的最终 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

这项强大的功能帮助我们轻松构建复杂的 Web 应用程序，例如，通过使用通用页面和组件来生成动态页面，这些页面填充了从数据库加载或由用户提供的真实信息。

感谢阅读！欢迎在评论区留下您的想法。

资源与链接

文章来源：https://dev.to/sm0ke/jinja2-short-introduction-and-sample-apps-nb
异步与概述 async/await...
提升编码工作流程的 5 个工具