zqlit
202ee76cd2
- 删掉内容组全部 repeat: true（attrs/tl/stats/bars/tags/走心评论/相册） - 首次滚进照常播入场动画，滚回保持就位不重播不重藏 - 分类条 inview 常驻 → 宽度保持不重长 - 同步更新各处注释
88 lines
4.5 KiB
HTML
88 lines
4.5 KiB
HTML
{{ 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 —— 只在首次滚进时播一次，滚回时保持就位
|
||
不重播、不重藏（用户定案 2026-10-07）；分节标题同样只播一次。
|
||
|
||
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">
|
||
{{ 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 }}
|