feat(关于页): 重设计为「时间线 + 数据一览」版式,动效对齐全站 UIKit 范式
- 版式:01 关于我(属性四行 + 时间线四节点 + 三张数据卡 + 分类 Top5 条, 全部构建期实时统计,新增 partial about-intro.html)+ 02 这个博客 + 03 走心 评论 + 04 热力图,间距统一由 .about-sec 管,字号统一四档 - 动效:纯官方 UIKit scrollspy(与归档页同源)—— target 一律后代选择器、 动画类用 uk-animation-slide-*-medium(50px 位移)+ repeat:true 滚回重播、 分节标题 fade 不 repeat;删自研编排器,CSS 只留分类条宽度填充与 prefers-reduced-motion 守卫 - 修复 PJAX 下 UIKit 不重绑的既有 bug:mypjax.js 换页后调 UIkit.update() (评论区/说说的 scrollspy 同样依赖此修复) - 走心评论:骨架屏、8s 超时、sessionStorage 缓存(10 分钟)、重试按钮; 异步渲染后手动 UIkit.update() 让卡片参与入场级联
This commit is contained in:
1 parent
a884180787
commit
654de1fdf0
7 files changed
+692
-88
No files matched your search
+29
-23
@@ -8,27 +8,33 @@ slug: "about"
|
||||
draft: false
|
||||
---
|
||||
|
||||
<div class="about-card">
|
||||
<div class="uk-grid-match uk-child-width-1-2@m uk-grid-small" uk-grid>
|
||||
<div>
|
||||
<h3 class="uk-card-title uk-margin-remove-bottom" style="font-size: 1.2rem; font-weight: 600;"><i class="ri-user-smile-line uk-margin-small-right"></i>关于博主</h3>
|
||||
<p class="uk-text-meta uk-margin-remove-top uk-margin-small-bottom">Hello, World!</p>
|
||||
<div class="uk-margin-small-top">
|
||||
<p class="uk-margin-small-bottom"><i class="ri-map-pin-user-line uk-margin-small-right"></i>湖北 · 襄阳 -> 广州</p>
|
||||
<p class="uk-margin-small-bottom"><i class="ri-user-heart-line uk-margin-small-right"></i>00后,性格随和,风趣幽默</p>
|
||||
<p class="uk-margin-small-bottom"><i class="ri-flag-line uk-margin-small-right"></i>不活跃就是在跟生活对线~</p>
|
||||
<p class="uk-margin-remove-bottom"><i class="ri-briefcase-line uk-margin-small-right"></i>工作:牛马打工人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="uk-card-title uk-margin-remove-bottom" style="font-size: 1.2rem; font-weight: 600;"><i class="ri-terminal-box-line uk-margin-small-right"></i>博客构建</h3>
|
||||
<p class="uk-text-meta uk-margin-remove-top uk-margin-small-bottom">Powered by Open Source</p>
|
||||
<ul class="uk-list uk-list-divider uk-margin-small-top">
|
||||
<li><i class="ri-layout-masonry-line uk-margin-small-right"></i>框架:Hugo</li>
|
||||
<li><i class="ri-cloud-windy-line uk-margin-small-right"></i>托管:Vercel / GitHub Pages</li>
|
||||
<li><i class="ri-github-line uk-margin-small-right"></i>源码:GitHub(heysiu/Ying) </li>
|
||||
<li><i class="ri-palette-line uk-margin-small-right"></i>主题:二开Ying主题(自用不开源)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 关于页:属性/时间线/数据在 themes/Ying/layouts/partials/about-intro.html;本文件只管「02 / 这个博客」。注意:内容文件里不要写 Hugo 模板注释(会原样显示在页面上)。 -->
|
||||
|
||||
<div class="about-sec">
|
||||
|
||||
<div class="section-title" uk-scrollspy="cls: uk-animation-fade; delay: 100">02 / 这个博客 (Build)</div>
|
||||
|
||||
<div class="ab-attrs" style="border-top: 0;" 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">Hugo · 主题 Ying</span></div>
|
||||
|
||||
<div class="ab-attr"><span class="k">托管</span><span class="v">CNB 构建 · 又拍云 / 多吉云 / EdgeOne</span></div>
|
||||
|
||||
<div class="ab-attr"><span class="k">评论</span><span class="v">Artalk · 自建(Cloudflare Workers)</span></div>
|
||||
|
||||
<div class="ab-attr"><span class="k">备份</span><span class="v">CNB 主仓 + 自建 Gitea 辅仓 + 加密离线包</span></div>
|
||||
|
||||
<div class="ab-attr"><span class="k">始于</span><span class="v">2020 年,一写六年</span></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ab-stack" uk-scrollspy="target: .ab-tag; cls: uk-animation-slide-bottom-medium; delay: 60; repeat: true">
|
||||
<span class="ab-tag">Hugo</span>
|
||||
<span class="ab-tag">Cloudflare</span>
|
||||
<span class="ab-tag">Docker</span>
|
||||
<span class="ab-tag">Nginx</span>
|
||||
<span class="ab-tag">Python</span>
|
||||
<span class="ab-tag">Shell</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in new issue
Block a user