本主题基于 vitepress 最新版的0.15.6开发
补个侧边栏
已经实现的功能:
- 按年归档功能
- 标签功能
- 不是很优雅的分页功能
- 非常不优雅但是没办法的评论功能(基于utteranc.es)
- 不出意外的话,应该会一直follow vitepress 的版本
动机:
直想找一个架构足够干净(小、轻量)的ssg程序,hexo,hugo,vuepress,docsify等都试了,总有不满意的地方,包括这些程序的主题也没有直接满意的(编程语言不熟悉的、功能太多,生成的html的文件还有不少插件的残留)。
vitepress 足够轻量,系统干净,启动贼拉快,博客主题这块还没成熟的,所以自己动手做一个满意的博客主题吧,诉求就是功能可以少,但要足够的轻量。
核心实现思路
不动官方的默认主题,能继承最好,方便跟着 vitepress 的快速升级,同时还能直接拥有官方皮肤的功能
重要的事情说三遍!!!除了以学习为目的,其他时候其实折腾远没有沉淀重要,坚持看坚持写,比用什么系统更重要
使用方法
貌似目前vitepress主题机制还不成熟,可能是因为没到正式版,先用copy
的方式使用
1.复制一下文件到你的项目根目录 下载地址
├── .vitepress
├── pages
│ ├── about.md
│ ├── archives.md
│ └── tags.md
├── posts //存放博客文章
├── public //[可选]
└── favicon.ico
2.新建一个package.json文件,执行 npm i,包信息自己看着调整
{
"name": "vitepress-blog-pure",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vitepress dev --host 0.0.0.0",
"build": "vitepress build",
"serve": "vitepress serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vitepress": "^0.15.6",
"globby": "^11.0.4",
"gray-matter": "^4.0.3",
"fs-extra": "^10.0.0"
}
}
3.执行 npm run dev
即可查看效果, 其他工具随意pnpm,yarn
ps. 写文章的格式和位置
推荐放到posts目录中(脚本有关联),格式:
---
date: 2021-06-30
title: .zsh_history历史记录优化
description: 历史重复的命令太多了,不用grep都不太好找
tags:
- macOS
---
#标题
正文
感谢
看到这一篇文章带来的灵感 - VitePress极简博客搭建
Moking1997 开发的比较早,vitepress的版本还是0.7.x,现在已经0.15.x了,变化还是挺大的,已经不太能通过提pr的方式维护了。
主要的变化是适配vitepress的新版本,主题这块采用的实现思路不一样,并不改动官方默认主题,这样可以实现极少的代码量和为将来能发布成npm主题包的做准备。
比如:
sidebar使用hackcss的方式实现想要的效果