借鉴：

• vuejs/theme
• vitest
• sugar-blog
• sugarat
• vitepress 中文文档
• vitepress-theme-vuetom
• 博客主题借鉴medium- Lil’Log
• 借鉴 tailwindcss 快速开发

初衷 #

没找到合适的主题博客模板，那就自己做一个喜欢的主题模板。包名 @chendap/vitepress-theme-wmh

看到一个静态网站博客生成器Nextra 2 – Next.js Static Site Generator.官网

技术栈 #

server: nodejs client: tailwindcss + vue3 + ts + vitepress npm: changeset

难度还不小，

• vue3/tailwindcss 不怎么熟悉，需要短时间掌握，蛮具有挑战性的
• ssr 如何做到无限滚动加载？

感谢vitepress/vue3/tailwindcss/sugar-blog/medium

目标 #

定制一款私人主题，基于 vitePress，主题包名称vitepress-theme-wmh

需要满足的功能 todoList::

• [x] 搭建模板，并生成语义化版本，自动发布到 npm，整个流程要规范一点
• []首页改造
• [x] 文章列表
• [x] 评论
• [x] 布局
• 主题模式切换，白天和夜晚模式
• 图片预览
• 文字总数和阅读时间以及发布时间
• Rss 更好的 seo

搭建基本模板 #

• 搭建 monorepo 仓库，里面包含 2 个 packages，且还需要配置 eslint/changesets 等基础套件

.
├─ packages
│ ├─ template
│ └─ theme
└─ package.json

如果后续还有其他主题的话

.
├─ packages
│ └─ wmhTheme
│ ├─ template
│ └─ theme
└─ package.json

• theme 主题包，主题的代码仓库

• template 主题模板，从 git clone 下来就是该文件

充实 theme 主题包，主要工作量 #

稍微填充下 template 模板 #

针对 layout:doc 的文章设置 #

• 主要是数字，阅读时长以及发布时间，还有评论

针对 layout:home 级别的设置 #

• 首页文章瀑布流展示

新增归档和订阅界面 #

0420 个人博客核心板块 #

• 正文的 md 渲染
• 全局搜索