1. 🎨 前端与 UI/UX 模块 (Frontend & UI/UX)

  • 核心框架与主题

    • SSG 引擎选型：Hugo (扩展版 Hugo Extended)

    • UI 主题切换：初期挂载极客风主题 Blowfish，后平滑迁移至极简风主题 PaperMod

    • 极简名片模式：配置 profileMode 开启首页居中头像、社交图标与双色交互按钮

  • CSS 高级排版与深度覆写

    • 现代 CSS 色彩引擎 (Color Engine)：废弃硬编码的 rgba，全面引入现代 CSS 函数 color-mix() 结合原生变量 var(--accent-blue) 和 #f5a623。构建了高可维护性的“蓝色/金黄”双主题切换中枢，完美实现了链接下划线、引用块（Blockquote）背景的透明度动态计算与主题跟随。

    • 移动端抽屉式路由 (Mobile Navigation)：彻底推翻原生底部弹出菜单，重构为现代化的“右侧滑入式抽屉（Slide-out Drawer）”。引入 backdrop-filter: blur(20px) 毛玻璃视效，并深度集成了防误触逻辑（点击遮罩关闭）与物理级交互（左滑手势关闭、悬停 4px 偏移）。

    • 字体回退机制 (Font Fallback)：配置西文无衬线/等宽体优先，中文回退宋体/明朝体的混合渲染架构 (-apple-system + Noto Serif SC)。

    • 暗黑模式 (Dark Mode) 深度适配：通过高权重 CSS 选择器（如 body.dark）和 CSS 原生变量 (var(--entry), var(--card-bg)) 解决夜间模式样式污染与反转问题。

    • 自定义短代码组件 (Shortcodes)：编写 layouts/shortcodes/callout.html 实现带 SVG 图标、阴影悬浮和日夜自适应背景的高级极客便签。

    • 细节组件重绘：

      • 动态按钮：实现带 hover 悬浮上移 (transform) 和发光阴影 (box-shadow) 的黑白/蓝白动态按钮。

      • 渐变分割线：利用 linear-gradient 替代原生 <hr>，实现两头细中间粗的渐变蓝线。

      • 赛博风删除线：废弃原生 <del>，使用 ::after 伪元素绘制带有物理透明度 (opacity) 的厚涂封条特效。

      • 专属下划线：通过 text-decoration: underline dashed 实现拉开呼吸距的虚线下划线。

      • Tag 胶囊微交互：摒弃扁平化标签，重绘了具备半透明背景、发光边框的圆角胶囊造型，并融合了悬停浮动（Hover Floating）的 Z 轴物理交互感，进一步强化赛博极客质感。

  • Hugo 模板与 Liquid 语法

    • 双重嵌套排序算法：使用 Hugo 原生语法 range sort (sort .Pages "Title" "asc") "Date" "desc" 实现"先按时间降序，再按文件名升序"的精准内容展示逻辑。

    • Flex 与 Grid 响应式布局：修改 archives.html 和 index_profile.html，实现移动端（@media max-width: 768px）表格流式卡片化重排。

    • 多专栏 (Series) 渲染引擎重构：打破主题原有的单专栏硬编码限制。利用 Hugo 原生 range 循环结合切片精准交叉比对 intersect (slice $seriesName)，实现多重嵌套作用域隔离 (Nested Scope Isolation)，彻底解决单篇文章被多重收录时导致的数据串台与渲染混淆。

    • 弹性容器加固：针对动态生成的多专栏 DOM 结构，在外层注入 display: flex; flex-direction: column; gap: 30px;，利用现代 CSS 确保多容器间的垂直弹性呼吸感，并实现了原生内联样式（如当前阅读高亮 Badge、SVG 图标）的 100% 无损迁移。

  • CSS 渲染控制与防御性编程

    • 优先级突防 (Specificity Override)：使用 body.dark, html.dark 以及长堆叠选择器配合 !important，暴力打穿 PaperMod 底层极度封闭的夜间模式 JS 渲染劫持。

    • 原生 CSS 变量劫持 (Variable Hijacking)：放弃硬编码颜色，直接调用主题自带的背景变量 var(--entry) 和 var(--card-bg)，实现自定义便签组件 (Callout) 与系统日夜主题的无缝同频切换。

  • Hugo 进阶配置与解析逻辑

    • 导航栏语义化注入 (Menu Injection)：在 hugo.toml 中通过 [[menu.main]] 语法配置多级路由与排序权重 (weight)，实现菜单拓扑展示。

    • 个人主页参数化 (Profile Mode)：通过 [params.profileMode] 开启极简名片模式，通过硬编码注入全局头像 (imageUrl)、交互双按钮 (buttons) 与底部社交微标 (socialIcons)。

    • Markdown 管道解析：在短代码 HTML 模板中引入 {{ .Inner | markdownify }} 管道函数，确保自定义 HTML 标签内部依然支持原生 Markdown 语法的解析。

  • 交互体验规划 (探讨级方案)

    • 状态持久化与字号动态切换：规划了基于 JavaScript localStorage 的全局字号控制方案（小/中/大），通过 JS 为 body 动态挂载 CSS 类名（如 .font-large）实现刷新不失效的个性化排版。

  • CSS 动画与微交互 (Micro-interactions)

    • 贝塞尔曲线动画：使用 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 为按钮定义物理级的平滑弹性动画。

    • Z 轴悬浮反馈：利用 :hover 伪类配合 transform: translateY(-4px) 实现极客卡片与按钮悬浮时的失重感和发光反馈。

  • Hugo 模板函数与底层渲染器

    • 数据截取与降级渲染：使用 first 5 函数提取最新文章列表；使用 {{ .Title | default .File.LogicalName }} 确保在 Markdown 忘记写标题时，能自动回退抓取文件物理名称。

    • SVG 矢量图标内联注入：为了做到"零外部依赖"（不引入 FontAwesome 等庞大的外部图标库），在 Callout 短代码和分类目录树中，直接硬编码嵌入原生 <svg> 标签。

    • 草稿渲染控制：使用 hugo server -D 指令在本地强制渲染包含 draft: true 标记的未发布文章。

2. ⚙️ 部署与网络架构模块 (Deployment & Networking)

  • 边缘云持续集成 (CI/CD)

    • 托管平台：Cloudflare Pages 零成本自动化构建部署

    • 构建环境注入：配置构建命令 hugo --gc --minify 与关键环境变量 HUGO_VERSION=0.157.0 防止编译报错

  • 域名与网络链路

    • 网络连通性策略：绑定自定义域名（如 .com, .me）以解决 Cloudflare 默认 *.pages.dev 域名在国内被 DNS 污染和 SNI 阻断的问题。

    • 免备案方案：明确依托海外节点（Cloudflare 代理/小橙云）免去国内 ICP 繁琐备案的架构。

    • 进阶网络优化预案：讨论了"Cloudflare SaaS 接入 + 国内优选 IP"的访问提速方案。

  • 域名生态与资产基建

    • 注册商与合规策略评估：评估了 Spaceship (支持支付宝/免实名)、Cloudflare Registrar (按成本价/需外币信用卡) 以及阿里云/腾讯云 (强制 ICP 与人脸识别) 的网络基建差异。

    • TLD 顶级域路由选型：对比了不同后缀的生态定位，包括 .com (权威)、.me (个人名片)、.dev/.io (硬核极客专属)。

  • 边缘计算与缓存控制细节

    • CDN 级 HTTP 头控制 (防穿透)：在 static/ 目录下部署无后缀的 _headers 文件，强制下发 Cache-Control: no-store, no-cache, must-revalidate, max-age=0，实现 OTA 版本检测雷达接口的"零缓存全球透传"。

  • Git 代理与网络穿透 (Network Proxy)

    • 本地终端代理注入：为了解决国内直连 GitHub Push 时触发的 Connection reset 和 timed out 死锁，配置了终端级的代理打洞指令 git config --global http.proxy http://127.0.0.1:7890（及 https 对应配置）。

    • 代理强制释放：遇到代理冲突时，使用 --unset 参数进行网络链路的暴力重置。

  • 多源部署预案 (Multi-Target Deployment)

    • 异地多活灾备：探讨了除 Cloudflare Pages 之外的备用托管链路，包括使用 Vercel 以及国内的 Gitee Pages，以应对潜在的网络 SNI 阻断。

  • 数据库云原生生态匹配

    • 在评估无后端评论（Waline/Twikoo）时，明确了其背后需要挂载轻量级云端数据库，如 MongoDB 或 LeanCloud（依托于 Vercel/Zeabur 等 Serverless 平台）。

3. 🛠️ 本地环境与研发工作流 (Local Dev & Workflow)

  • 基础环境拓扑

    • 环境三剑客：Git for Windows, Hugo Extended (系统 PATH 环境变量配置), Visual Studio Code。

    • 知识库与代码库解耦 (隔离机制)：在 Obsidian 中挂载静态网页代码库，并通过 Obsidian 的忽略文件规则（排除 public/, resources/, .git/）实现纯文本创作环境与前端编译环境的反脆弱隔离。

  • Git 版本控制流

    • 仓库初始化与鉴权：git init, 绑定 GitHub 私有仓库 (Private Repository)，配置 Credential Manager 授权。

    • 子模块管理：使用 git submodule add 引入主题，使用 git rm -rf 和 git rm -r --cached 解决主题切换带来的 Git 冲突和文件冗余。

  • 防污隔离与版本控制流进阶

    • 仓库净化与黑名单屏蔽：编写规范的 .gitignore 规则，精准拦截并隔离 .obsidian/ (私有环境与插件)、public/ (编译产物) 以及底层构建锁 .hugo_build.lock。

    • Git 缓存解耦脱钩：使用 git rm -r --cached . 解决旧笔记库冗余文件的错误连带上传问题；使用 git rm -rf themes/blowfish 强制清除废弃的 Git Submodule (子模块)，解决底层版本树冲突。

  • 鉴权链路与终端指令拓扑

    • GitHub 鉴权回调接管：处理 Git Credential Manager 在本地 127.0.0.1 端口的回调拒绝报错，启用 Device Code 进行无缝鉴权降级。

    • 服务端强清缓存机制：使用 hugo server --disableFastRender --gc 联合指令，强杀热重载 (Live Reload) 进程中驻留的顽固 CSS 幽灵缓存。

  • IDE 生产力调优 (VS Code)

    • 环境解耦唤醒：确立了以 Markdown All in One 插件为主的文本书写流，并运用在终端中输入 code . 的指令，实现当前代码沙盒的极速拉起。

  • CLI (命令行) 核心运维指令集

    • 脚手架初始化：执行 hugo new site [文件夹名] 生成前端工程骨架。

    • Git 溯源绑定：通过 git remote add origin 绑定远端仓库，并使用 git push -u origin main 强制将本地分支推送到上游云端。

    • 全局开发者鉴权：执行 git config --global user.email 录入全局提交身份信息。

  • Markdown 元数据规范 (Front Matter)

    • 确立了 TOML/YAML 标准头信息体系，包括 title, date, tags, series, draft 等，作为整个静态网站的数据索引引擎基石。

4. 🗄️ 后端交互与数据基建 (Backend & API)

  • 无后端 OTA 升级枢纽

    • 静态 API 接口：在 static/ 目录下构建原生的 version.json，为外部XXX 提供版本检测雷达。 待做

    • 缓存穿透控制：通过部署 _headers 文件设定 Cache-Control: no-store, max-age=0，强制 CDN 节点不缓存 JSON 文件，确保 OTA 信号零延迟全球同步。 待做

  • 周边生态扩展预案（探讨级）

    • 无后端评论系统：评估了 Giscus/Utterances (基于 GitHub) 和 Waline/Twikoo (依托 Vercel + 数据库) 方案。

    • 数据统计与 SEO：规划了 Google Analytics, Umami 分析接入，以及 Sitemap 搜索引擎提交规范。

  • SEO 与可观测性 (Observability) 基建

    • 索引爬虫映射：明确 Google Search Console 与百度搜索资源平台的 sitemap.xml 自动化提交规范与链路。

  • API 接口数据结构化 (JSON)

    • OTA 雷达载荷定义：部署在 static/version.json 中的数据不仅包含版本号，还定义了完整的业务字段：force_update (强制更新标记), release_date, notes (更新日志), 和 download_url (拉取包地址)。 待做