#Jinja2 模板引擎（上）：变量渲染、循环与条件判断

<!-- templates/index.html -->
<header>
  <h1>{{ page_title }}</h1>
</header>
<main>
  <!-- 点号访问属性或字典键（两者通用） -->
  <p>Hi, {{ current_user.name }} 👋</p>
  <!-- 方括号语法适合带特殊字符的键，比如 "user_id" -->
  <p>邮箱前缀：{{ current_user["user_id"] }}</p>
</main>

<section>
  <h2>变量处理小工具</h2>
  <ul>
    <li>全大写：{{ name|upper }}</li>
    <!-- 先去首尾空格 → 再首字母大写 -->
    <li>首字母大写：{{ name|trim|capitalize }}</li>
    <!-- 为空时设置默认值 -->
    <li>默认值：{{ bio|default("这位博主还没写简介") }}</li>
    <li>数字四舍五入：{{ price|round(1) }}</li>
    <!-- ⚠️ safe 仅用于绝对可信内容，比如你自己写的静态文案 -->
    <li>安全 HTML：{{ "<b>这是加粗的安全内容</b>"|safe }}</li>
    <li>去除 HTML 标签：{{ "<i>我是有HTML标签内容</i>"|striptags }}</li>
    <li>列表连接成字符串：{{ tags|join(" · ") }}</li>
    <li>变量长度：{{ tags|length }}</li>
  </ul>
</section>

<!-- 假设后端传了 current_user，包含 is_logged_in、role -->
<nav>
  {% if current_user.is_logged_in %}
    <span>👤 {{ current_user.name }}</span>
    {% if current_user.role == "admin" %}
      <a href="/admin">管理后台</a>
    {% elif current_user.role == "editor" %}
      <a href="/editor">编辑后台</a>
    {% else %}
      <a href="/profile">个人中心</a>
    {% endif %}
    <a href="/logout">退出登录</a>
  {% else %}
    <a href="/login">登录</a>
    <a href="/register">注册</a>
  {% endif %}
</nav>

<!-- 假设后端传了 articles=[...] -->
<section>
  <h2>运算符测试</h2>
  <ul>
    <!-- 普通比较和逻辑运算 -->
    {% if current_user.age is defined and current_user.age >= 18 %}
      <li>✅ 成年用户，可访问全部内容</li>
    {% endif %}
    {% if articles[0].views > 1000 and "Python" in articles[0].tags %}
      <li>🔥 Python 热门文章推荐</li>
    {% endif %}
    {% if "banned" not in current_user.roles %}
      <li>💬 可以发言评论</li>
    {% endif %}

    <!-- 模板测试用 is / is not -->
    {% if current_user.bio is none %}
      <li>ℹ️ 个人简介待完善</li>
    {% endif %}
    {% if articles is iterable %}
      <li>📝 文章列表已准备好渲染</li>
    {% endif %}
  </ul>
</section>

<!-- 假设后端传了 articles 列表 -->
<section>
  <h2>最新文章</h2>
  <ul class="article-list">
    {% for article in articles %}
      <li>
        <a href="{{ url_for('show_article', id=article.id) }}">
          {{ article.title }}
        </a>
        <span class="meta">{{ article.published_at }} · {{ article.views }} 阅读</span>
      </li>
    {% endfor %}
  </ul>
</section>

<section>
  <h2>带专属效果的文章列表</h2>
  <div class="article-cards">
    {% for article in articles %}
      <div class="card {% if loop.first %}highlight{% endif %}">
        <!-- 从 1 开始的序号 -->
        <span class="index">#{{ loop.index }}</span>
        <!-- 反向序号（最后一篇是 #1） -->
        <span class="rev-index">(倒数第{{ loop.revindex }})</span>
        <!-- 总篇数 -->
        <span class="total">共{{ loop.length }}篇</span>
        <h3>{{ article.title }}</h3>
        <p>{{ article.summary }}</p>
      </div>
    {% endfor %}
  </div>
</section>

<section>
  <h2>用户信息表</h2>
  <table>
    <thead>
      <tr>
        <th>属性名</th>
        <th>属性值</th>
      </tr>
    </thead>
    <tbody>
      {% for key, value in current_user.items() %}
        <tr>
          <!-- 把下划线替换成空格，让显示更友好 -->
          <td>{{ key|replace("_", " ") }}</td>
          <td>{{ value }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<section>
  <h2>草稿箱</h2>
  <ul class="draft-list">
    {% for draft in drafts %}
      <li>{{ draft.title }}</li>
    {% else %}
      <p>🎉 暂无草稿！</p>
    {% endfor %}
  </ul>
</section>

<!-- templates/macros.html -->

{# 宏：渲染单个文章卡片 #}
{% macro render_article_card(article, show_published=False) %}
  <div class="card">
    <h3>{{ article.title }}</h3>
    <!-- truncate 是一个常用过滤器，截断文本并自动加省略号 -->
    <p>{{ article.summary|truncate(100) }}</p>
    {% if show_published %}
      <span class="published-at">{{ article.published_at }}</span>
    {% endif %}
    <a href="{{ url_for('show_article', id=article.id) }}" class="btn">阅读更多</a>
  </div>
{% endmacro %}

{# 宏：渲染单个表单字段，适合和 Flask-WTF 配合 #}
{% macro render_wtf_field(field) %}
  <div class="form-group">
    {{ field.label(class="form-label") }}
    {{ field(class="form-control") }}
    {% if field.errors %}
      <small class="text-danger">{{ field.errors[0] }}</small>
    {% endif %}
  </div>
{% endmacro %}

<!-- templates/articles.html -->
{# 只导入需要的宏 #}
{% from "macros.html" import render_article_card %}

<section>
  <h2>精选文章</h2>
  <div class="grid">
    {% for article in featured_articles %}
      {{ render_article_card(article, show_published=True) }}
    {% endfor %}
  </div>
</section>

<!-- 假设后端传了：malicious_content="<script>alert('恶意弹窗！')</script>" -->
<p>{{ malicious_content }}</p>
<!-- 实际渲染结果：&lt;script&gt;alert('恶意弹窗！')&lt;/script&gt;，完全不会弹窗！ -->

<p>{{ "<b>Flask 真好用！</b>"|safe }}</p>
<!-- 浏览器会显示加粗文字 -->

<section>
  <h2>Jinja2 语法示例</h2>
  <pre>
    {% raw %}
      这里的 {{ 变量 }} 和 {% if %} 都不会被解析
      完全原封不动地显示给用户
    {% endraw %}
  </pre>
</section>