小功能

项目概览 这个站点采用 Hugo 静态生成 + PaperMod 主题 + Cloudflare Workers 静态托管 的技术栈。从最初一个下午完成上线，到现在已经演变成包含 5 篇文章、35 张画廊照片、46 个小功能 的个人站。本文逐层拆解架构设计和一路踩过的坑。 技术选型 层级 技术 理由 静态生成 Hugo v0.164 Go 实现，构建约 200ms，单二进制 主题 PaperMod 响应式、内置搜索/暗色模式/SEO 托管 Cloudflare Workers 静态托管 免费、全球 CDN、push 即部署 部署配置 wrangler.jsonc assets.directory 指向 public 构建产物 域名 luostratus.cn 腾讯云注册 → Cloudflare DNS 接管 代码托管 GitHub 免备案最优解 .cn 域名托管在境外服务无需 ICP 备案，这是选择 Cloudflare 的关键原因。 当前功能地图 模块 内容 实现要点 首页 最近 2 篇文章 layouts/index.html + where + first 文章 5 篇博客 Markdown + Hugo 渲染 归档 只含文章 layouts/archives.html 按 Section "posts" 过滤 画廊 35 张压缩照片 Branch Bundle + 文件名日期解析 + 瀑布流 小功能 46 个工具/游戏 独立 partial，每页一个功能 搜索 文章 + 小功能 自定义 index.json + Fuse.js 阅读辅助 悬浮目录、回到顶部 原生 JS + CSS 过渡 项目结构 luostratus.cn/ ├── hugo.yaml # 站点配置、菜单、输出格式 ├── wrangler.jsonc # Workers 静态资源配置（输出 public） ├── content/ │ ├── about.md │ ├── search.md # 搜索页 │ ├── archives.md # 归档页 │ ├── posts/ # 博客文章 │ ├── gallery/ │ │ ├── _index.md # 画廊主页（branch bundle） │ │ └── 图片资源 # png / jpg / webp，均已压缩 │ └── tools/ # 46 个小功能页 ├── layouts/ │ ├── index.html # 首页：展示最近 2 篇文章 │ ├── archives.html # 归档：只展示 posts │ ├── index.json # 搜索索引（文章 + 小功能） │ ├── rss.xml # RSS（过滤小功能） │ ├── gallery/ # 画廊排序 + 瀑布流 │ ├── tools/ # 小功能列表与详情 │ └── partials/ │ ├── extend_head.html # 全站 CSS + 动效 + 目录样式 │ ├── extend_footer.html # TOC、侧边导航、脚本 │ ├── footer.html # 底部 + 回到顶部（主题版） │ └── tools/ # 46 个工具的 HTML/CSS/JS ├── assets/ │ └── bilibili.svg # 自定义社交图标 └── static/ └── favicon.png # 网站图标 PaperMod 提供 extend_head 和 extend_footer 扩展点，覆盖这两个 partial 即可注入自定义样式与脚本，不修改主题一行代码，升级主题零冲突。 ...