{% extends "base.html" %}

<!-- ============================================================
     pages/about.html — 关于页模板
     展示个人头像、名称和详细介绍（Markdown 渲染）。

     模板变量：
       - avatar_url:   String 头像图片 URL
       - content_html: String 渲染后的 HTML 内容
       - site_name:    String 网站名称
     ============================================================ -->

{% block title %}关于 — {{ site_name }}{% endblock %}

{% block content %}
<h1 class="page-title">关于我</h1>

<!-- 头像 + 名称 -->
<div class="about-header">
    {% if avatar_url %}
    <img src="{{ avatar_url }}" alt="Aki" class="about-avatar">
    {% else %}
    <div class="about-avatar about-avatar-placeholder">Aki</div>
    {% endif %}
    <div class="about-name-section">
        <h2>Aki</h2>
    </div>
</div>

<!-- 详细介绍 -->
<div class="about-content">
    {{ content_html | safe }}
</div>
{% endblock %}