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

<!-- templates/index.html -->
<header>
  <h1>{{ page_title }}</h1>
</header>
<main>
  <!-- 点号访问对象属性/字典键 -->
  <p>Hi, {{ current_user.name }} 👋</p>
  <!-- 方括号字典索引（适合带特殊字符的键） -->
  <p>邮箱前缀：{{ current_user["user_id"] }}</p>
</main>

<!-- 假设后端传了：
  name="  alice  ", price=29.99, bio=None, tags=["Flask", "Jinja2"] -->
<section>
  <h2>变量处理小工具</h2>
  <ul>
    <li>全大写：{{ name|upper }}</li>
    <li>首字母大写：{{ name|trim|capitalize }}</li> <!-- 先去首尾空格 → 再首字母大写</li>
    <li>默认值：{{ bio|default("这位博主还没写简介") }}</li>
    <li>数字四舍五入：{{ price|round(1) }}</li>
    <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 %}">
        <!-- 序号类 -->
        <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>
    <p>{{ article.summary|truncate(100) }}</p> {# truncate 也是常用过滤器：截断文本到 100 字符，默认加省略号 #}
    {% 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>