vuepress-theme-vdoing
一个简洁而精致的 知识管理 & 博客 & 文档 主题
效果预览: Evan's blog
Original intention 初衷
这个主题的初衷是打造一个 结构化 与 碎片化 并存的个人知识库。详情
目前功能已比较完整,但仍在不断的完善当中。如果你有什么建议欢迎提Issues,喜欢这个项目的欢迎点个Star持续关注。
Introduce 介绍
-
根据 VuePress 的默认主题修改而成,仍以官方配置为主,追求简洁同时又不失美观。
-
这是一个兼具 知识管理 & 博客文章 & 技术文档 的主题。
-
一个结构化的知识库,形成一本本像书一样清晰易读的知识库。同时博客功能提供一种碎片化形态。
-
添加方便管理 学习笔记 和 技术文档 的 目录页、自动生成侧边栏工具、自动生成Front Matter工具、扩展的搜索框插件、面包屑、快捷翻页按钮 等,多维度的让你快速定位到任何你想要找的笔记或文档。
查看文档
- 简单的目录页配置,查看 目录页配置
- 自动生成侧边栏工具 让你拥有一个结构清晰的侧边栏,无需手动配置。
根据目录自动生成侧边栏和分类标签的约定说明 - 自动生成Front Matter工具 助你专注于写作,你无需给每个文件都手写front matter。
自动生成Front Matter工具 - 可以添加第三方搜索链接的扩展的搜索框插件
- 面包屑和快捷翻页按钮内置于主题,无需配置。(面包屑数据依赖于自动生成侧边栏工具)
-
添加博客相关的 评论、时间轴+分类页、最近更新栏 、文章信息栏(作者与创建时间)、博主信息栏、页脚版权栏等。
查看文档
- 评论栏插件
- 时间轴+分类 页面配置 (分类数据依赖于自动生成侧边栏工具)
- 文章信息栏(作者与创建时间)
- 最近更新栏
- 博主信息栏
- 页脚版权栏
-
首页样式美化
Start 开始
# 克隆项目后进入
git clone https://github.com/xugaoyi/vuepress-theme-vdoing-blog
cd vuepress-theme-vdoing-blog
# 安装依赖并运行开发服务
npm install # or yarn install
npm run dev # or yarn dev
Plugin 插件
推荐几款插件
-
对前端程序员很友好Demo演示模块插件,很方便的在博客中插入demo,同时可以查看demo源码,跳转到codepen在线编辑。
-
代码块一键复制插件
-
H1标题美化徽章插件
此插件未上传npm,以本地插件引入:
// config.js module.exports = { plugins: [ [require('./plugins/title-badge'), { // h1标题徽章 // badges: [ // 替换默认的徽章图标 // 'data:image/png;base64,**', // 'data:image/png;base64,***', // ] }] ] }
-
可以添加第三方搜索链接的搜索框插件
此插件未上传npm,以本地插件引入
-
百度推送和统计插件
Deploy 部署
-
内置
deploy.sh
和 GitHub Actions 两种自动部署脚本,一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。
Other 其他
-
评论模块的搭建
-
自定义域名及解析
-
SEO相关
// config.js module.exports = { description: '填写网站描述', // 以 <meta> 标签渲染到页面html中 head: [ // 注入到页面<head> 中的标签,[tagName, { attrName: attrValue }] ['meta', { name: 'keywords', content: '填写关键字'}] ] }
-
图床
-
结合GitHub Actions开发的每天定时百度推送,加快收录
-
在线编辑和新增文章的方法