110 lines
6.0 KiB
HTML
110 lines
6.0 KiB
HTML
|
{{/* 关于页 · B+C 方案：时间线（B） + 数据一览（C）
|
|||
|
|
────────────────────────────────────────────────────────────────
|
|||
|
|
数据全部在构建期从 content/ 实时统计，不依赖任何外部接口：
|
|||
|
|
· 篇数 / 年数 / 站龄 → .Site.RegularPages 与最早文章日期
|
|||
|
|
· 分类占比 → .Site.Taxonomies.categories
|
|||
|
|
· 热力图 → 由 heatmap.html 提供（本 partial 不重复渲染）
|
|||
|
|
★ 时间线节点写在下方 $nodes 里，改文案只动那一处。
|
|||
|
|
──────────────────────────────────────────────────────────────── */}}
|
|||
|
|
|
|||
|
|
{{- $posts := where .Site.RegularPages "Type" "posts" -}}
|
|||
|
|
|
|||
|
|
{{/* ── 统计：总篇数 ── */}}
|
|||
|
|
{{- $total := len $posts -}}
|
|||
|
|
|
|||
|
|
{{/* ── 统计：首篇日期与年数 ──
|
|||
|
|
用最早的一篇（ByDate 升序后的 index 0）作为起点，算站龄。 */}}
|
|||
|
|
{{- $ordered := $posts.ByDate -}}
|
|||
|
|
{{- $first := index $ordered 0 -}}
|
|||
|
|
{{- $firstYear := $first.Date.Format "2006" -}}
|
|||
|
|
{{- $nowYear := now.Format "2006" -}}
|
|||
|
|
{{- $spanYears := sub (int $nowYear) (int $firstYear) -}}
|
|||
|
|
|
|||
|
|
{{/* ── 统计：今年更新篇数（当年发文数） ── */}}
|
|||
|
|
{{- $thisYear := len (where $posts "Date.Year" (int $nowYear)) -}}
|
|||
|
|
|
|||
|
|
{{/* ── 统计：分类占比（取前 5，按篇数降序） ── */}}
|
|||
|
|
{{- $cats := slice -}}
|
|||
|
|
{{- with .Site.Taxonomies.categories -}}
|
|||
|
|
{{- range . -}}
|
|||
|
|
{{- $cats = $cats | append (dict "name" .Page.LinkTitle "count" (len .Pages)) -}}
|
|||
|
|
{{- end -}}
|
|||
|
|
{{- end -}}
|
|||
|
|
{{- $cats = sort $cats "count" "desc" -}}
|
|||
|
|
{{- $top := first 5 $cats -}}
|
|||
|
|
{{- $maxC := 1 -}}
|
|||
|
|
{{- with $top }}{{ $maxC = (index . 0).count }}{{ end -}}
|
|||
|
|
|
|||
|
|
{{/* ── 时间线节点 ──
|
|||
|
|
想改文案/加节点，只改这个数组即可。isNow = true 的节点会画成实心圆点。 */}}
|
|||
|
|
{{- $nodes := slice
|
|||
|
|
(dict "when" "2020 · 起点"
|
|||
|
|
"title" "在襄阳，给博客开了个头"
|
|||
|
|
"body" "高考完的那个夏天，怀揣着对互联网的好奇搭了这个小站。第一篇文章还留在归档里。"
|
|||
|
|
"isNow" false)
|
|||
|
|
(dict "when" "2021 — 2024 · 折腾"
|
|||
|
|
"title" "换主题、磨 CSS、把 Typecho 拆了个遍"
|
|||
|
|
"body" "那时候不懂代码，到处找教程，把好好的主题改得面目全非，但乐在其中。"
|
|||
|
|
"isNow" false)
|
|||
|
|
(dict "when" "2025 · 做减法"
|
|||
|
|
"title" "从 Typecho 搬到 Hugo"
|
|||
|
|
"body" "文章多了才明白，博客的本质是内容，不是花哨的外表。"
|
|||
|
|
"isNow" false)
|
|||
|
|
(dict "when" "此刻 · 在广州"
|
|||
|
|
"title" "毕业两年，深漂广漂中"
|
|||
|
|
"body" "不活跃就是在跟生活对线。想去南京落脚，先把手里的事做好。"
|
|||
|
|
"isNow" true)
|
|||
|
|
-}}
|
|||
|
|
|
|||
|
|
<!-- ─────────── 01 / 关于我（属性 + 时间线 · 方案 B） ───────────
|
|||
|
|
动效：与归档页 page/archives.html 完全同源的官方写法：
|
|||
|
|
· target 用后代选择器（不写 `>`，避免结构耦合选不中）
|
|||
|
|
· 动画类用官方 uk-animation-slide-*-medium（50px 位移，看得清）
|
|||
|
|
· repeat: true —— 每次滚进视口都重播（归档页年份标题同款），
|
|||
|
|
这是「滚动时页面是活的」的关键；hidden 用默认值
|
|||
|
|
· delay 官方语义：同一批进视口的 target 依次累加 → 自动错落 -->
|
|||
|
|
<div class="ab-attrs" uk-scrollspy="target: .ab-attr; cls: uk-animation-slide-bottom-medium; delay: 80; repeat: true">
|
|||
|
|
<div class="ab-attr"><span class="k">坐标</span><span class="v">湖北 · 襄阳 → 广州</span></div>
|
|||
|
|
<div class="ab-attr"><span class="k">其人</span><span class="v">00 后，性格随和，风趣幽默</span></div>
|
|||
|
|
<div class="ab-attr"><span class="k">打算</span><span class="v">未来计划定居江苏南京</span></div>
|
|||
|
|
<div class="ab-attr"><span class="k">近况</span><span class="v">深漂广漂中，不活跃就是在跟生活对线</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 时间线：节点自左向右滑入（官方 slide-right-medium），四点次第点亮 -->
|
|||
|
|
<div class="ab-tl" uk-scrollspy="target: .ab-item; cls: uk-animation-slide-right-medium; delay: 110; repeat: true">
|
|||
|
|
{{- range $nodes }}
|
|||
|
|
<div class="ab-item{{ if .isNow }} is-now{{ end }}">
|
|||
|
|
<div class="ab-when">{{ .when }}</div>
|
|||
|
|
<p class="ab-h">{{ .title }}</p>
|
|||
|
|
<p class="ab-p">{{ .body }}</p>
|
|||
|
|
</div>
|
|||
|
|
{{- end }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ─────────── 02 / 数据一览（方案 C） ───────────
|
|||
|
|
三张数据卡依次自下浮起（官方 slide-bottom-medium）。 -->
|
|||
|
|
<div class="ab-stats" uk-scrollspy="target: .ab-stat; cls: uk-animation-slide-bottom-medium; delay: 120; repeat: true">
|
|||
|
|
<div class="ab-stat"><span class="n">{{ $total }}</span><span class="l">篇文章</span></div>
|
|||
|
|
<div class="ab-stat"><span class="n">{{ $spanYears }}</span><span class="l">年积累</span></div>
|
|||
|
|
<div class="ab-stat"><span class="n">{{ $thisYear }}</span><span class="l">今年更新</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{{- if $top }}
|
|||
|
|
<!-- 分类条：条体浮起，条内填充宽度由 CSS transition 从 0 长出（UIKit 不管宽度）。
|
|||
|
|
★ 目标宽度写进内联 --ab-bar-w，CSS 在 .uk-scrollspy-inview 时放行；
|
|||
|
|
repeat 移出视口时类被摘掉 → 宽度回到 0，下次滚进重新长出。 -->
|
|||
|
|
<div class="ab-bars" uk-scrollspy="target: .ab-bar; cls: uk-animation-slide-bottom-medium; delay: 60; repeat: true">
|
|||
|
|
{{- range $top }}
|
|||
|
|
{{- $pct := div (mul .count 100) $maxC }}
|
|||
|
|
<div class="ab-bar" style="--ab-bar-w: {{ $pct }}%;">
|
|||
|
|
<span class="n">{{ .name }}</span>
|
|||
|
|
<span class="t"><i></i></span>
|
|||
|
|
<span class="c">{{ .count }}</span>
|
|||
|
|
</div>
|
|||
|
|
{{- end }}
|
|||
|
|
</div>
|
|||
|
|
<p class="ab-footnote">
|
|||
|
|
首篇发布于 {{ $first.Date.Format "2006 年 1 月" }} · 以上统计在构建时实时生成
|
|||
|
|
</p>
|
|||
|
|
{{- end }}
|
|||
|
|
|