# 项目文件：web_project/src/webbook/render.py
# 模板只提供固定结构；进入HTML文本和属性的值先转义，JSON显示交给textContent。
from html import escape
from pathlib import Path
from string import Template

TEMPLATES = Path(__file__).resolve().parent / "templates"


def render_page(template_name, **values):
    template = Template((TEMPLATES / template_name).read_text(encoding="utf-8"))
    return template.substitute(values)


def hidden_csrf(session):
    return f'<input type="hidden" name="csrf_token" value="{escape(session.csrf, quote=True)}">'


def render_login(session, message="", username=""):
    return render_page(
        "login.html",
        csrf=hidden_csrf(session),
        message=escape(message),
        username=escape(username, quote=True),
    )

# 项目文件：demos/escaping.py
# HTML文本先转义；JSON仍是数据，前端用textContent显示其中的书名。
import json
from html import escape

title = '<img src=x onerror="alert(1)">'
print("HTML文本", escape(title, quote=True))
payload = json.dumps({"title": title}, ensure_ascii=False)
print("JSON恢复原文", json.loads(payload)["title"] == title)

# 续写同一文件：web_project/src/webbook/render.py
# 根据登录状态选择表单和操作按钮；把用户文本转义后再放入 HTML。
def render_home(session, books, message="", values=None):
    values = values or {}
    if session.user_id is None:
        auth = '<a class="button" href="/login">登录书架</a>'
        create = '<p class="empty">登录后添加记录，列表只展示当前账号的书籍。</p>'
    else:
        auth = (
            f"<span>当前账号：{escape(session.username)}</span>"
            f'<form method="post" action="/logout">{hidden_csrf(session)}<button class="quiet">退出登录</button></form>'
        )
        create = render_page(
            "book_form.html",
            csrf=hidden_csrf(session),
            title=escape(str(values.get("title", "")), quote=True),
            tags=escape(str(values.get("tags", "")), quote=True),
            checked="checked" if values.get("finished") == "1" else "",
        )
    rows = []
    for book in books:
        tags = "".join(
            f'<span class="tag">{escape(tag)}</span>' for tag in book["tags"]
        )
        action = (
            '<span class="done">已读</span>'
            if book["finished"]
            else f'<button class="finish quiet" data-id="{book["id"]}">标记已读</button>'
        )
        rows.append(
            f'<li data-book-id="{book["id"]}"><div><strong>{escape(book["title"])}</strong><div class="tags">{tags}</div></div>{action}</li>'
        )
    return render_page(
        "home.html",
        auth=auth,
        create=create,
        rows="".join(rows) or '<li class="empty">还没有记录</li>',
        message=escape(message),
        csrf=escape(session.csrf, quote=True),
        count=str(len(books)),
        finished=str(sum(book["finished"] for book in books)),
    )

<!-- 项目文件：web_project/src/webbook/templates/home.html -->
<!-- 固定页面结构接收渲染后的片段；用户输入在render.py中按HTML位置转义。 -->
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="$csrf">
  <title>阅读书架 · Web 基础</title>
  <link rel="stylesheet" href="/assets/app.css">
  <script src="/assets/app.js" defer></script>
</head>
<body>
  <main>
    <header><div><p class="eyebrow">PYTHON 3.12 / WEB 练习</p><h1>阅读书架</h1><p>保存一本书，再观察请求与记录的变化。</p></div><nav>$auth</nav></header>
    <div class="metrics"><span>当前书籍 <strong>$count</strong></span><span>已读 <strong>$finished</strong></span><span>存储 <strong>SQLite</strong></span></div>
    <p class="message" role="status">$message</p>
    <div class="columns">
      <section><h2>添加书籍</h2><p class="sub">表单提交后，服务器保存记录并跳转回书架。</p>$create</section>
      <section><h2>我的书籍</h2><ul id="books">$rows</ul></section>
    </div>
    <section class="api"><h2>同一份记录的 JSON</h2><p class="sub">按钮请求 /api/books，页面脚本把响应作为文本显示。</p><button id="load-api" type="button">读取 API</button><span id="api-status" role="status"></span><pre id="api-output">点击按钮后显示响应。</pre></section>
  </main>
</body>
</html>