{{ define "main" }}
    {{/* 关于页分节顺序：01 关于我（partial，含属性+时间线+数据）
         02 这个博客（content/about.md）
         03+ 走心评论 / 热力图 / 技能栈 / 相册，按 hugo.toml 开关动态编号。
         间距统一由 .about-sec 管，别写内联 margin。

         ── 动效：与归档页 archives.html 完全同源的官方写法（v7，零自定义 JS）──
         官方文档（uikit.cn/docs/animation）：
           「将 .uk-animation-* 类之一添加到任何元素。当添加类时会显示动画…要在
             其他时间点显示动画，例如当元素进入视口时，您需要使用 JavaScript
             添加该类 —— 例如，使用滚动监听组件。」

         四条要点（全部页面既有范式，本页照办）：
           ① scrollspy 挂在被包裹的容器上，一个容器托管一组元素。
           ② target 用后代选择器（.ab-attr），不写 `>` —— 写 `>` 只匹配直接
              子元素，结构一变就一个都选不中（v4 动画全灭的根因）。
           ③ 动画类一律官方：uk-animation-fade（标题淡入 0.8s）、
              uk-animation-slide-{bottom,right}-medium（内容 50px 滑入 0.5s）。
              ★ 不要用 -small：位移只有 10px，在这么宽的版面里根本看不出来。
           ④ 内容组一律 repeat: true —— 移出视口重藏、滚回重播（归档页年份
              标题同款），页面滚动时才是「活的」；分节标题不 repeat（同归档 h3）。

         PJAX：换入的 DOM 由 mypjax.js 的 reinitUIKit() 重新 boot（UIKit 的
         MutationObserver 只反应属性新增，管不了 PJAX 整树换入）。
         异步渲染的内容（走心评论卡片）渲染完要自己调 UIkit.update()。 */}}

    <div id="pjax-container" data-needs-echarts="true">
      <div class="post-content about-page" itemprop="articleBody">
        <div class="about-sec">
            <div class="section-title" uk-scrollspy="cls: uk-animation-fade; delay: 100">01 / 关于我 (Timeline)</div>
            {{ partial "about-intro.html" . }}
        </div>

        {{ .Content }}

        {{ $sectionCount := 2 }}

        <!-- Featured Comments Section（走心评论：管理员精选的评论，数据来自 Worker） -->
        {{ if site.Params.about.enablefeatured | default true }}
        {{ $sectionCount = add $sectionCount 1 }}
        <div class="about-sec">
            <div class="section-title" uk-scrollspy="cls: uk-animation-fade; delay: 100">{{ printf "%02d" $sectionCount }} / 走心评论 (Featured)</div>
            {{ partial "featured-comments.html" . }}
        </div>
        {{ end }}

        <!-- Heatmap Section -->
        {{ if site.Params.about.enableheatmap }}
        {{ $sectionCount = add $sectionCount 1 }}
        <div class="about-sec">
            <div class="section-title" uk-scrollspy="cls: uk-animation-fade; delay: 100">{{ printf "%02d" $sectionCount }} / 热力图 (Hot Map)</div>
            {{ partial "heatmap.html" . }}
        </div>
        {{ end }}

        <!-- Skills Section -->
        {{ if site.Params.about.enableskills }}
        {{ $sectionCount = add $sectionCount 1 }}
        <div class="about-sec">
            <div class="section-title" uk-scrollspy="cls: uk-animation-fade; delay: 100">{{ printf "%02d" $sectionCount }} / 技能栈 (System Ops)</div>
            {{ partial "skills.html" . }}
        </div>
        {{ end }}

        <!-- Album Section -->
        {{ if site.Params.about.enablealbum }}
        {{ $sectionCount = add $sectionCount 1 }}
        <div class="about-sec">
            <div class="section-title" uk-scrollspy="cls: uk-animation-fade; delay: 100">{{ printf "%02d" $sectionCount }} / 光影 (Album)</div>
            <div class="album-content" uk-scrollspy="target: .album-item; cls: uk-animation-slide-bottom-medium; delay: 100; repeat: true">
                {{ range site.Data.album }}
                <div class="album-item">
                    <div class="album-img-box">
                        <img src="{{ .image }}" loading="lazy">
                        {{ if .date }}<span class="album-date-badge">{{ .date }}</span>{{ end }}
                        <div class="album-info">
                            <span class="album-title">{{ .title }}</span>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
        </div>
        {{ end }}
      </div>
    </div>
{{ end }}