最近对博客做了一次比较系统的整体优化，涉及新功能、样式改进和 bug 修复，在这里做个记录。
整体改动概览
本次升级共涉及以下几个方向：
- 新增「说说」动态页和友链页重设计
- 评论系统从 Gitalk 切换至 giscus
- 归档页样式优化 + 标签云图案化
- 全站样式通过
custom.scss统一定制 - Footer 新增运行天数和文章数统计
1. 评论系统：Gitalk → giscus
原本使用 Gitalk 做评论，基于 GitHub Issues，配置好之后一直报 403 错误。原因是 Gitalk 依赖 cors-anywhere.herokuapp.com 这个第三方 CORS 代理来完成 OAuth 授权，该代理早已被严重限速，基本不可用。
切换到 giscus，同样基于 GitHub，但改用 Discussions 而非 Issues，有官方 GitHub App，不需要任何第三方代理，配置简单，支持深色模式和多语言。
配置方式：在 _config.yml 中将 comments.provider 改为 custom，然后在 _includes/comments-providers/custom.html 中写入 giscus 的 script 标签即可。
<script src="https://giscus.app/client.js"
data-repo="AriesOxO/blog-comments"
data-repo-id="R_kgDOJsXRtw"
data-category="Announcements"
data-category-id="DIC_kwDOJsXRt84C3Y6F"
data-mapping="pathname"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
2. 新增「说说」页面
仿照朋友圈/微博的形式，新增了一个轻量的 /memos.html 动态页，用于记录碎片想法。
数据与模板分离，只需编辑 _data/memos.yml 就能新增内容：
- date: 2026-02-28
content: 今天完成了博客大改版，功能终于完整了。
tags:
- 博客
页面渲染为时间线布局，左侧竖线串联所有条目，每条都可以附加标签。
3. 友链页重设计
原来的 /friendLink.html 是完全内联样式 + 硬编码内容，维护很麻烦。
这次重构为数据驱动：链接数据放在 _data/links.yml，页面模板用 Liquid 循环渲染，后续增删链接只改数据文件即可。
样式升级为卡片式网格布局，每张卡片显示头像（使用 Google Favicon 服务兜底）、网站名和简介，鼠标悬停有上浮效果。
# _data/links.yml 示例
- name: 小林 coding
url: https://xiaolincoding.com/
description: 图解计算机网络、OS、MySQL、Redis
avatar: https://www.google.com/s2/favicons?domain=xiaolincoding.com&sz=128
4. 归档页样式优化
年份标题
左侧加了一个主题色竖条，字号放大，层次感更清晰。
.article-list__group-header {
position: relative;
font-size: 2rem;
font-weight: 700;
padding-left: 1rem;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 70%;
border-radius: 2px;
background: var(--primary-color);
}
}
文章条目
每条文章鼠标悬停时左边框变色 + 背景高亮，给用户明确的交互反馈。
5. 标签云图案化（归档页彩蛋）
这是本次最有意思的功能。归档页顶部的标签云不再是普通的平铺排列，而是会随机把所有标签组装成一个图案。
实现原理：
- 用 Canvas 2D API 绘制目标图案（爱心、星星、猫、兔子、狗、小鱼、月亮、樱花、钻石、蘑菇）
- 对 Canvas 进行像素采样，记录每个采样点的坐标和所属部位（通过不同颜色通道标记）
- 将标签按钮绝对定位到这些坐标点，带渐入动画
- 不同部位着不同颜色，例如兔子：脸是浅粉白，耳朵是玫粉色
// 用不同颜色标记部位
function setMarker(ctx, id) {
ctx.fillStyle = ['#FF0000','#00FF00','#0000FF','#FFFF00','#FF00FF'][id - 1];
}
// 采样时读取颜色识别部位
function detectPart(r, g, b, a) {
if (a < 60) return 0;
if (r > 180 && g < 80 && b < 80) return 1; // 部位1
if (r < 80 && g > 180 && b < 80) return 2; // 部位2
// ...
}
右上角有「换一个 🎲」按钮，点击后标签会先渐隐，然后重新排列成另一个随机图案。
目前支持 10 种图案：❤️ ⭐ 🐱 🐰 🐶 🐟 🌙 🌸 💎 🍄
6. Footer 网站统计
在版权信息下方加了一行小字，显示博客运行天数和文章总数，通过 Liquid 在构建时计算。
liquid🗓 运行 1206 天 · 📝 88 篇文章
7. 全站样式统一（custom.scss）
之前 _sass/custom.scss 是空的，所有样式都堆在 HTML 内联。这次统一提取到 custom.scss，覆盖了：
- 代码块行高、字体大小、圆角
- 文章正文行间距
- 友链卡片、说说时间线、归档标签等各页样式
- Footer 统计样式
小结
本次改动文件较多，但基本都遵循「数据与展示分离」的原则，后续维护成本较低。如果你也在用 Jekyll + TeXt 主题，欢迎参考。