Skip to content

VVsxmja/vitepress-theme-blog-pure

Repository files navigation

VitePress Theme Blog Pure

一个极简的博客框架。VitePress + UnoCSS + Vue 全家桶。Demo

使用方法

这个仓库本身是一个模板仓库。最开箱即用的使用方式就是使用此模板创建你自己的仓库

用这种方法,你可以直接使用该仓库中已经配置好的 UnoCSS 和 PostCSS 等工具,用现成的 GitHub Action Workflow 自动部署 Github Pages ,还能更方便的魔改该主题,加入你自己的元素。

以后可能会做成 npm package 的形式发布。

使用模板的方法

创建仓库并克隆

使用此模板创建仓库,之后将其克隆到本地。

安装依赖

建议使用 pnpm

pnpm install

不喜欢 pnpm 的可能需要自行到 package.json 中把 "packageManager": "pnpm@x.y.z" 去掉。

写文章

关于写文章需要注意的地方见后文。

预览

pnpm run dev

pnpx vitepress dev

部署静态站点

执行 pnpm run build 或者 pnpx vitepress build 可以生成静态站点。

注意,你需要在 .vitepress/config.ts 中修改 base 字段为正确的值,以保证生成的内部链接全部指向正确的地址。

例如你最终部署的位置为 someone.github.io/someone_s_blog/ ,则需要将 base 改为 someone_s_blog ,又比如需要部署到 blog.someone.com (根目录) ,则需要将 base 改为 /

GitHub Pages

这个仓库提供了一个 GitHub Action Workflow 可供参考。

如果你使用该模板来创建仓库,则只需到仓库设置中启用 Github Pages 即可。

写文章的格式

这个主题支持 VitePress 到目前(2023-7-5)支持的所有 Markdown 扩展语法。

frontmatter

这个主题使用的 frontmatter 字段如下:

  • layout :为 home 表示该页为首页。
  • title :文章的标题,会被展示在首页文章列表和浏览器标签上。
  • date :文章的创建日期,用于在首页文章列表中给文章排序。

摘记

摘记,也可以理解为一篇文章的简介,会被展示在首页文章列表中,对应文章标题的下方。

  • 默认情况下,文章的摘记为空。
  • 如果在 frontmatter 中 excerpt 字段的值为 true ,则文章中第一个分割线(---)之前的内容会被视作这篇文章的摘记。
  • 如果在 frontmatter 中 excerpt 字段的值为一个字符串,则这个字符串会被视作这篇文章的摘记。

可以参考 posts/test-post.mdposts/markdown-examples.mdposts/api-examples.md 以及它们在 Demo 中的文章列表内的效果,分别对应上面的三种情况。

写的文章放在哪里

下面这些路径上的文章会被自动展示在网站中。

index.md

博客的首页。里面的内容会被展示在首页的文章列表上方。

posts/*.md

posts/ 目录下的所有文章,会被按日期排序后展示在首页的文章列表中。

其他路径

你当然可以把文章存储在你想要的任何地方。但其他地方的文档不会被自动展示。你需要自行添加指向它们的链接,或者包含它们。

待实现的功能

这个主题还正在施工中,因为是纯自定义主题,而不是默认主题的扩展,所以很多原版自带的功能尚未完成。

#1

如果有什么你觉得应该有却没有的功能,欢迎提 issue 来讨论。

感谢

感谢 VitePressUnoCSS 这两个超厉害的框架。

感谢 The Vue Point(Vue 官方博客) ,我从这里参考了一些代码。

感谢 squidfunk/mkdocs-material ,我从这里借鉴了一些设计。

感谢 airene/vitepress-blog-pure ,虽然没有直接参考代码,但是阅读源代码给了我很多启发。