第三次重构个人博客（基于 Vitepress）

[Justin3go]

原文内容：justin3go.com

摘要：

笔者在这篇文章中记录了自己第三次重构个人博客的过程，基于 Vitepress 进行了一系列的改进和优化。自 2022 年初开始使用 Vitepress 搭建博客，随着版本的更新，笔者逐渐感受到原有风格的不适，决定进行重新设计。本次重构的主要内容包括：

1. 首页设计：采用简单的博客分页列表，利用 createContentLoader 提取文章摘要等信息。
2. 部署与域名管理：将博客从 Github Pages 迁移至 Cloudflare Pages ，并更改 DNS 服务器。
3. 国际化支持：实现 Vitepress 和评论系统 Giscus 的国际化，支持中英双语。
4. 内容迁移：对博客文章进行迁移，生成摘要和标签，确保旧路径的兼容性以避免外链失效。
5. 优化用户体验：自定义字体并进行预加载，提升页面加载速度。

通过这些调整，笔者希望博客不仅在内容上丰富，同时在视觉和使用体验上也能给读者带来更好的感受。最终，笔者强调了博客设计对写作心情的重要性，认为整理环境能够促进创作灵感的流动。

博客网站是开源的： https://github.com/Justin3go/justin3go.com

博客更新：新增了一个归档页面，大家有的我也要有！

justin3go.com/archive

[NavsSite]

00 后，厉害了

[37Y37]

周末也更新了博客，主要是所有图片路径修改，折腾了一下，写了个检验程序，保证所有更改都正常

[Justin3go]

@NavsSite #1 过奖了 hhhh🥰

[Justin3go]

@37Y37 #2 迁移就是费力，东西太多容易出错，担心丢失外链，写个校验程序来机器化来判断

[37Y37]

@Justin3go #4 可以翻着看看，人肉检查下是不是有漏网之鱼 https://blog.ops-coffee.cn/

[1KTN90lKW9gVJ9vX]

我也有个博客 www.sl

[Justin3go]

@hemingcn #6 这是什么牛逼的域名

[dford]

怎么这么快？

[fenglangjuxu]

看到楼上发域名 我也发个相关的 justgo.run

[superchijinpeng]

中英文之间无间距

[michaeljackson]

我用的 ihewro.com 这家的基于 typecho 的

[retrocode]

@fenglangjuxu 还是我这个好一点 哈哈 https://foo.run

[Justin3go]

@dford #8 啥快

[Justin3go]

@fenglangjuxu #9 我还有个 jsgo.dev 的域名哈哈哈有点像

[Justin3go]

@superchijinpeng #10 细节，确实该这样排版，下次写文章会注意的🤡

[Justin3go]

@michaeljackson #11

[flashBee233]

不错，很简洁👍

[Justin3go]

@flashBee233 #17 谢谢！🥰

[fenglangjuxu]

@retrocode 这个域名不错 抛开 run 我还有更好的 xing.ren yun.fan dong.ge hello.men 看你拿什么和我比🤣

[CHTuring]

为啥跳转页面还有个 messge 提示～

[CHTuring]

要不你用 Astro 再重构一次，Lighhouse 性能起码能到 100% 。虽然 VitePress 的 seo 也不错，但是起码套了个 Vue ，数据 HTML 看起来了也挺恶心的。

[cue]

蛮漂亮的，不过感觉日期有点太淡了我眼神不大好

[Justin3go]

@CHTuring #20 这里从组件库 demo 里面 copy 过来的，我感觉还行就没删，是觉得提示太重了吗？

[Justin3go]

@cue #22 故意淡化了一下，标题重要一些所以就想突出一下主题；
后面会专门增加一个归档列表，那里日期时间就会更加重要一些

[Justin3go]

@CHTuring #21 换技术栈还没想过，太麻烦了

[CHTuring]

@Justin3go #25 无缓存加载，纯静态的博客，太大了。

[CHTuring]

虽然说你有加载字体文件

[Justin3go]

@CHTuring #27 主要就是这个中文字体文件太大了

[retrocode]

@fenglangjuxu #19 大佬 大佬, 秀啊

[XiaMuCoder]

https://weekly0.comm/

链接多写了个 m

[laoertongzhi]

老哥，怎么 vitepress 部署周刊网站啊，我也想弄一个。

[Justin3go]

@XiaMuCoder #30 wc ，大意了啊🤡

[Justin3go]

@laoertongzhi #31 周刊网站仓库在这里： https://github.com/Justin3go/FAV0

部署的话实用 cloudflare ，配置如下：


[Justin3go]

@laoertongzhi #31

[ThomasChan]

vitepress 默认配置的 local minisearch 搜索中文有点儿不好用，最近刚研究过，可以参考 https://github.com/lucaong/minisearch/issues/201#issuecomment-2227591121

[zhengkk]

怎么还有人折腾博客，感觉替代品很多啊

[Justin3go]

@ThomasChan #35 感谢，后面花时间去研究研究

[Justin3go]

@zhengkk #36 折腾也可以实践一些技术，博客算是比较方便的项目

[bug51]

就是怕被别人把整个博客文章都爬下来了。目前没啥办法。

[Justin3go]

@bug51 #39 爬呗，本来就是开源的

[subframe75361]

@ThomasChan 那用啥，flexsearch ？

[ThomasChan]

@subframe75361 就还是 minisearch ，我说的研究的意思是指看了下 vitepress 源码怎么使用 minisearch 的，最后发现是分词的配置问题，在 vitepress 里像下边这样配置就可以了

```js
...
export default defineConfig({
...
themeConfig: {
search: {
options: {
miniSearch: {
options: {
tokenize: (term) => {
if (typeof term === 'string') term = term.toLowerCase();
// @ts-ignore
const segmenter = Intl.Segmenter && new Intl.Segmenter("zh", { granularity: "word" });
if (!segmenter) return [term];
const tokens = [];
for (const seg of segmenter.segment(term)) {
// @ts-ignore
tokens.push(seg.segment);
}
return tokens;
},
},
searchOptions: {
combineWith: 'AND', // important for search chinese
processTerm: (term) => {
if (typeof term === 'string') term = term.toLowerCase();
// @ts-ignore
const segmenter = Intl.Segmenter && new Intl.Segmenter("zh", { granularity: "word" });
if (!segmenter) return term;
const tokens = [];
for (const seg of segmenter.segment(term)) {
// @ts-ignore
tokens.push(seg.segment);
}
return tokens;
},
},
},
},
},
},
...
});
```

[nagisaushio]

@Justin3go 中文字体建议按汉字词频做字体切分

[Justin3go]

@nagisaushio #43 了解到了新知识，谢谢！❤️

[1rv013c6aiWPGt24]

看看我的 simple blog
yuanj.top

[Justin3go]

@UncleCAT4 #45

[Tink]

https://www.gaojinan.com/

simple

[laoertongzhi]

@Justin3go #34 非常感谢！

[Justin3go]

@Tink #47 搞基男

[1rv013c6aiWPGt24]

@Tink 你这个吊，

[dif]

@UncleCAT4 敦煌老乡？

[1rv013c6aiWPGt24]

@dif 怎么说？哥们也是敦煌的？

[dif]

@UncleCAT4 必须的~~

[1rv013c6aiWPGt24]

@dif 认识一下？