来一个vitepress版的博客主题吧(简约版)

3,998 阅读2分钟

本主题基于 vitepress 最新版的0.15.6开发

补个侧边栏

WechatIMG149.png

live demo
github repo

已经实现的功能:

  • 按年归档功能
  • 标签功能
  • 不是很优雅的分页功能
  • 非常不优雅但是没办法的评论功能(基于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的方式实现想要的效果