个人网站优化实录（2026-09）

本文记录 luowenpeng.com（仓库 luowenpeng/luowenpeng.github.io）在 2026-09-02 至 2026-09-16 期间的优化修改过程。站点已于 2026-09-02 完成从 Docsify 到 VitePress 的迁移（SSG 静态生成、SEO 直出、KaTeX 静态渲染、GitHub Actions 自动部署），本篇聚焦迁移收官后围绕"内容定位、可读性、可发现性、去噪"所做的一轮集中打磨。

范围说明：本文只记"优化修改"，地铁客流数据管道、类比修辞库同步等数据类维护不在本篇展开；如需了解数据管道可参见仓库内相关脚本与独立文章。

一、优化总览

日期	主题	关键改动	对应提交
09-02	站点格言精简	「格物致知·诚意正心·修身齐家」→「诚意正心·修身齐家」	`9fcddc3`
09-15	P0 五项	关于页、RSS 自动生成、og:image、定位语、联系方式	`9f9d7db`
09-15	feed 展示修复	feed.xml 加 XSLT 样式表，浏览器不再显示纯代码	`1e56f6d`
09-15	首页细节	四卡片左右居中；feed 列表仅留「关于」入口	`e178ac1` / `695c71e`
09-15	去 GitHub	首页删 GitHub 链接 → 全站彻底移除 GitHub 入口	`b622489` / `29832de`
09-16	P1/P2 优化	sitemap 自动化、相关阅读互链、老文标注、城轨周报专栏、首页受众导向	`203a522` / `5ba28b2`
09-16	访问统计	接入 GoatCounter（免费、无 Cookie）	`325c652`
09-16	导航改造	顶部新增「文章」「城轨周报」；两个子站名精简	`4a9e3c4`

整体目标可以概括为四句话：定位更清晰、阅读更顺畅、被发现更容易、界面更干净。

二、阶段一：站点格言精简（09-02）

迁移收官当日，将贯穿全站的站点格言从「格物致知·诚意正心·修身齐家」精简为「诚意正心·修身齐家」（注：原十二字去掉了「格物致知」四字前缀）。

改动点：

docs/.vitepress/config.ts 中 description 与 og:title 去掉「格物致知·」前缀；
docs/index.md 的 hero text 同步为「诚意正心·修身齐家」。

为什么改：十二字过长，在 hero 大标题与浏览器标签页里都显得拥挤；保留「诚意正心·修身齐家」八字，既点出个人修养主线，又更利于视觉呈现与记忆。

三、阶段二：P0 五项（09-15）

在调研了个人网站创建与维护的行业最佳实践（参考 lixiaolai.com 等案例）后，确定并落地了五项 P0 优化。

1. 「关于」页（新建 `docs/about.md`）

补上长期缺失的关于页，内容包含：

职业定位（城市轨道交通运营咨询顾问）；
三线内容结构：Study（学习）/ Work（工作）/ Code（代码）；
两个子站入口（类比修辞库、西安地铁客流）；
座右铭「诚意正心·修身齐家」；
联系方式：邮箱与 RSS（不含 GitHub）。

导航栏 nav 同步新增「关于」入口。

2. RSS 自动生成（新建 `scripts/generate-rss.mjs`）

脚本读取 docs/ 下所有 .md 的 frontmatter（title / date / description），生成 dist/feed.xml（RSS 2.0）；
package.json 的 build 改为 vitepress build docs && node scripts/generate-rss.mjs，新文章只要带 frontmatter 即自动进入 RSS，无需手工维护；
collectMd() 递归扫描，支持 metro-weekly/ 等子目录，周报类文章自动纳入。

3. og:image 社交分享图（新建 `scripts/gen-og-image.py` + `docs/public/og-image.png`）

用 PIL 生成 1200×630 的分享图（主题蓝 #3d5a80）；
config.ts 的 head 注入 og:image 与 twitter:card=summary_large_image，改文案只需重跑脚本。

4. 首页定位语（tagline）

docs/index.md 的 tagline 改为「城市轨道交通运营咨询顾问 · 记录学习、工作与思考」，明确站点身份，区别于泛泛的"个人博客"。

5. 联系方式

页脚与关于页统一给出邮箱 765585922@qq.com 与 RSS 订阅入口，便于读者联系与订阅。

四、阶段三：可读性与展示修复（09-15）

1. feed.xml 浏览器展示修复

最初直接打开 https://luowenpeng.com/feed.xml，整页是 XML 源代码（浏览器默认把 XML 当纯文本渲染）。修复方式：

新建 docs/public/rss.xsl 样式表；
在 generate-rss.mjs 生成的 XML 顶部注入 <?xml-stylesheet type="text/xsl" href="/rss.xsl"?>；
浏览器打开即显示友好订阅页；RSS 阅读器解析不受影响（XSLT 仅影响浏览器渲染）。

2. 首页四卡片居中

首页 Study / Project / Work / Code 四张卡片默认左对齐，用户希望左右居中。修复：在 docs/.vitepress/theme/custom.css 增加

css

.VPHome .VPFeatures .items {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

3. feed 列表仅留「关于」

订阅页文章列表过长，收敛为只展示「关于」一篇作为入口（rss.xsl 的 for-each 加 item[link='https://luowenpeng.com/about'] 过滤），其余文章由 RSS 阅读器按订阅自动获取。

五、阶段四：全站去 GitHub（09-15）

出于"个人站点不引导跳转代码托管平台"的取舍，分两步清除 GitHub 入口：

首页：docs/index.md 删除 hero 的 GitHub 按钮与页脚英文段中的 GitHub 链接（提交 b622489）；
全站：config.ts 的 nav 移除 { text: 'GitHub', link: 'https://github.com/luowenpeng' }；同步清理根目录 39 个旧 Docsify 文件（已备份至 backup-docsify 分支），页面正文里对 GitHub 的内容引用保留（提交 29832de）。

说明：仓库本身仍托管在 GitHub Pages，但站点 UI 不再出现 GitHub 跳转入口，读者注意力留在内容本身。

六、阶段五：P1 / P2 优化（09-16）

1. sitemap 自动化

删掉手写的 docs/public/sitemap.xml，改为 config.ts 内 sitemap 配置：

sitemap: {
  hostname: 'https://luowenpeng.com',
  transformItems(items) {
    items.push(
      { url: 'https://luowenpeng.com/analogy-collection.html', changefreq: 'weekly' },
      { url: 'https://luowenpeng.com/metro-passenger-flow.html', changefreq: 'daily' },
    )
    return items
  },
},

构建时自动生成含 lastmod 的 sitemap；两个 public/ 独立页不在 VitePress 路由表内，手动 push 追加。

2. 文章内链（相关阅读）

10 篇文章文末批量追加「## 相关阅读」三组互链（教育高考 / 建站技术 / 读书翻译），用 node 脚本一次性完成，提升站内跳转与停留。

3. 老文章标注

blog-repo-evaluation-v1.md 与 fix-github-pages-404.md 顶部加「已迁移 VitePress」说明容器块（IMPORTANT / NOTE），避免读者误以为文档描述的是当前架构。

4. 城轨周报专栏（招牌栏目）

新建 docs/metro-weekly/城轨周报-001.md，含 5 条真实城轨要闻（长沙 2 号线西延开通、石家庄 6 号线洞通、杭德城际试运行、适老化国标、维保市场报告）+ 一句话观察。新周报放进该目录、带 frontmatter 即自动进 RSS / sitemap；config.ts 的 sidebar 已新增「🚇 城轨周报」分组，后续新一期需在分组内手动追加一条链接。

5. 首页受众导向

首页 hero 双 CTA 改为「类比修辞库」「西安地铁客流」；四卡片文案改为受众导向——给家人/给自己（Study）、给喜欢思维工具的人（Project）、给城轨同行（Work）、给自己的复盘（Code）。

七、阶段六：访问统计 + 导航改造（09-16）

1. GoatCounter 接入

在 config.ts 的 head 注入一行（免费、无 Cookie、不采集个人信息）：

['script', { 'data-goatcounter': 'https://luowp.goatcounter.com/count', async: true, src: 'https://gc.zgo.at/count.js' }],

面板地址 https://luowp.goatcounter.com。

2. 顶部导航改造

新增「文章」下拉（承载 10 篇文章，因无独立列表页用 items 下拉承载）；
新增「城轨周报」直达入口；
「类比修辞收集库」→「类比修辞库」、「西安地铁客流数据」→「西安地铁客流」（子站名精简，导航更紧凑）。

最终 nav 结构：

首页 → 文章(下拉) → 城轨周报 → 类比修辞库 → 西安地铁客流 → 关于

八、关键技术经验（可复用）

构建命令：WorkBuddy 沙箱构建必须 CODEBUDDY_SAFE_DELETE_ENABLED=0 npm run build（VitePress 硬编码 emptyOutDir:true，rmSync(dist) 会被 safe-delete 拦截）；若 npm bash shim 失效，直接 node node_modules/vitepress/bin/vitepress.js build docs。
独立静态页链接：public/ 下的 analogy-collection.html / metro-passenger-flow.html 不在 VitePress 路由表内，nav/卡片必须用完整 URL（https://luowenpeng.com/xxx.html），否则被 SPA 路由拦截渲染 404。
RSS 全自动：frontmatter 是单一信息源，新文章即进 RSS/sitemap，零手工维护。
XSLT 不影响订阅：rss.xsl 只改变浏览器渲染，RSS 阅读器照常解析。
中文验证：在沙箱里用 node 的 includes() 校验中文内容（grep 对中文 pattern 偶发假阴性）。
Git 推送：HTTPS + Clash 代理（127.0.0.1:7897）；schannel SSL 间歇失败，退避 20–30s 重试即可。
并行 Edit 竞态：同一消息对同一文件多次 Edit 会写入竞态（后写覆盖前写），同文件多处修改必须串行或合并一次，改完 grep 源文件 + 构建产物双验证。

九、后续待办

[ ] 城轨周报持续周更，逐步沉淀为长期栏目；
[ ] 视流量情况补充 GoatCounter 自定义事件（如下载、外链点击）；
[ ] 老 Docsify 文件观察期满（备份分支已留底）后可视情况彻底清除历史分支；
[ ] 若文章数继续增长，考虑用 VitePress 动态生成文章列表页（基于 frontmatter 自动聚合）替代「文章」下拉。

十、小结

这一轮优化把站点从"能看"推进到"定位清晰、可读、可发现、干净"：补上了关于页与 RSS，让站点首次具备订阅与自我介绍能力；用 og:image、sitemap、GoatCounter 补齐了社交分享、SEO 与统计三块基础能力；全站去 GitHub、精简子站名、收束 feed 列表，则让界面更聚焦。所有改动均已通过 npm run build 验证并推送上线，读者访问 luowenpeng.com 即可看到效果。

高考加油站

AlwaysAWay

RouteLine

AI 自习室

运动健身房

进化研讨屋

其他

个人网站优化实录（2026-09）

一、优化总览

二、阶段一：站点格言精简（09-02）

三、阶段二：P0 五项（09-15）

1. 「关于」页（新建 `docs/about.md`）

2. RSS 自动生成（新建 `scripts/generate-rss.mjs`）

3. og:image 社交分享图（新建 `scripts/gen-og-image.py` + `docs/public/og-image.png`）

4. 首页定位语（tagline）

5. 联系方式

四、阶段三：可读性与展示修复（09-15）

1. feed.xml 浏览器展示修复

2. 首页四卡片居中

3. feed 列表仅留「关于」

五、阶段四：全站去 GitHub（09-15）

六、阶段五：P1 / P2 优化（09-16）

1. sitemap 自动化

2. 文章内链（相关阅读）

3. 老文章标注

4. 城轨周报专栏（招牌栏目）

5. 首页受众导向

七、阶段六：访问统计 + 导航改造（09-16）

1. GoatCounter 接入

2. 顶部导航改造

八、关键技术经验（可复用）

九、后续待办

十、小结

个人网站优化实录（2026-09） ​

一、优化总览 ​

二、阶段一：站点格言精简（09-02） ​

三、阶段二：P0 五项（09-15） ​

1. 「关于」页（新建 docs/about.md） ​

2. RSS 自动生成（新建 scripts/generate-rss.mjs） ​

3. og:image 社交分享图（新建 scripts/gen-og-image.py + docs/public/og-image.png） ​

4. 首页定位语（tagline） ​

5. 联系方式 ​

四、阶段三：可读性与展示修复（09-15） ​

1. feed.xml 浏览器展示修复 ​

2. 首页四卡片居中 ​

3. feed 列表仅留「关于」 ​

五、阶段四：全站去 GitHub（09-15） ​

六、阶段五：P1 / P2 优化（09-16） ​

1. sitemap 自动化 ​

2. 文章内链（相关阅读） ​

3. 老文章标注 ​

4. 城轨周报专栏（招牌栏目） ​

5. 首页受众导向 ​

七、阶段六：访问统计 + 导航改造（09-16） ​

1. GoatCounter 接入 ​

2. 顶部导航改造 ​

八、关键技术经验（可复用） ​

九、后续待办 ​

十、小结 ​

个人网站优化实录（2026-09）

一、优化总览

二、阶段一：站点格言精简（09-02）

三、阶段二：P0 五项（09-15）

1. 「关于」页（新建 `docs/about.md`）

2. RSS 自动生成（新建 `scripts/generate-rss.mjs`）

3. og:image 社交分享图（新建 `scripts/gen-og-image.py` + `docs/public/og-image.png`）

4. 首页定位语（tagline）

5. 联系方式

四、阶段三：可读性与展示修复（09-15）

1. feed.xml 浏览器展示修复

2. 首页四卡片居中

3. feed 列表仅留「关于」

五、阶段四：全站去 GitHub（09-15）

六、阶段五：P1 / P2 优化（09-16）

1. sitemap 自动化

2. 文章内链（相关阅读）

3. 老文章标注

4. 城轨周报专栏（招牌栏目）

5. 首页受众导向

七、阶段六：访问统计 + 导航改造（09-16）

1. GoatCounter 接入

2. 顶部导航改造

八、关键技术经验（可复用）

九、后续待办

十、小结