One

主题

One2024-12-24
3415
13.3m
Get...

vdoing简介 ​

这个主题的初衷是打造一个好用的、面向程序员的知识管理工具。 轻松构建一个结构化的知识库，让你的知识海洋像一本本书一样清晰易读……

vuepress-theme-vdoing ​

目录 ​

[toc]

版权声明 ​

警告

本着开源共享、共同学习的精神：

本文是在 博主《xugaoyi》 开源项目：《vuepress-theme-vdoing》 https://github.com/xugaoyi/vuepress-theme-vdoing基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者[《xugaoyi》](https://doc.xugaoyi.com/) 所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~（这里万分感谢原作者的优质文章😜，感谢开源，拥抱开源💖）

官网 ​

https://doc.xugaoyi.com/

image-20241222081314227

image-20241222081433917

github

https://github.com/xugaoyi/vuepress-theme-vdoing

image-20241222081808415

image-20241222083144181

介绍 ​

  1. 这个主题的初衷是打造一个好用的、面向程序员的知识管理工具
  2. 轻松构建一个结构化的知识库，让你的知识海洋像一本本书一样清晰易读。
  3. 博客功能提供一种知识的碎片化形态，并支持个性化博客配置。
  4. 简洁高效，以 Markdown 为中心的项目结构。内置自动化工具，以更少的配置完成更多的事。配合多维索引快速定位每个知识点。

更新日志

Vdoing是VuePress v1.x (opens new window)的一个主题，是在默认主题 (opens new window)基础上做的修改和扩展，很多配置仍然沿用官方配置 (opens new window)。使用本主题可以很方便的搭建一个结构化的知识库或博客。

这个主题的初衷是打造一个好用的、面向程序员的知识管理工具： 主题初衷与诞生。

注意

  1. Node请使用>=18.0.0版本。
  2. 在使用本主题前，要求你至少会VuePress v1.x的基本使用和默认主题的基本配置，然后再查看本文档。🤣
  3. 本文档仅负责介绍Vdoing主题对默认主题的扩展部分，更多配置请移步 VuePress v1.x文档(opens new window)

特性 ​

  • 知识管理

包含三种典型的知识管理形态：结构化、碎片化、体系化。轻松打造属于你自己的知识管理平台。

  • 结构化

自动生成侧边栏、目录页、索引页、面包屑等，轻松构建一个结构化知识库。

  • 碎片化&个性化

博客功能提供一种知识的碎片化形态，并提供个性化的博客配置。

  • 简洁高效

以 Markdown 为中心的项目结构，内置自动化工具，以更少的配置完成更多的事。配合多维索引快速定位每个知识点。

  • 沉浸式阅读体验

专为阅读设计的UI，配合多种颜色模式、可关闭的侧边栏和导航栏，带给你一种沉浸式阅读体验。

扩展功能 ​

相较于默认主题，添加的功能内容主要有：

  • 添加方便管理学习笔记和技术文档的自动生成结构化侧边栏、自动生成front matter、目录页、扩展的搜索框插件、面包屑、快捷翻页按钮 等，让你快速定位到任何你想要找的内容。
  • 添加博客相关的 文章信息栏（作者与创建时间）、最近更新栏 、博主信息栏、页脚版权栏、分类功能+分类页、标签功能+标签页、归档页、评论插件等。
  • 方便好用的 Markdown 容器。
  • 首页文章列表、个性化配置和样式美化等。
  • 多种颜色模式供用户选择：跟随系统、浅色模式、深色模式、阅读模式
  • 提高搬砖效率的辅助工具： 批量操作front matter工具
  • ...

缺点 ​

docs目录下不应该存放其它配置文件 ​

image-20250111095216292

有四级目录限制 ​

image-20250111095242839

安利 ​

  • 拥有它你就同时拥有了一个专属你个人的在线知识库(云笔记)、博客、文档库、Demo库、一站式技术搜索工具，内容全部采用Markdown编写，简单高效，各种代码随便贴。

  • 你可以在.md文件中写html、css、js、甚至是vue组件代码，markdown天然的就支持vue组件 (opens new window)，魔改页面什么的不要太简单。😜

  • 相当多的程序员喜欢深色模式，还有的视力也不太好(🤓)，我们有浅色、深色和阅读模式，更有跟随系统自动响应深浅色模式功能，想怎么换就怎么换。

    点击右下角换肤按钮

  • 当你习惯用vdoing主题后，在别处看文档发现是markdown编写的，但所在站点的目录、导航、主题等某个地方用起来不是很爽，你都可以把文档拷贝或把整个专栏下载(如支持下载的话)下来放到vdoing主题，vdoing的自动化工具助你生成一个结构清晰的、拥有目录、页面导航的，而且有多种颜色模式的文档站。让你更专注于内容的学习。

    参考我博客中的文档专栏(opens new window)

  • 如果你想和更多的人分享你的文章，那么这款seo友好的主题是一个很不错的选择，更有为了加快百度收录而定制的每天定时百度推送程序 (opens new window)。

    参考我的博客收录情况 (opens new window)。

别犹豫了，赶快上手吧

这个主题可以做什么？ ​

主题初衷与诞生😜 ​

这个主题的初衷是打造一个好用的、面向程序员的知识管理工具。

对于程序员来说，繁杂的知识体系难免会有遗忘的地方。如果有一个方便好用的知识管理工具，可以帮助我们很好的管理知识，并能够快速地把遗忘的知识点找回来。

Markdown ​

最初接触Markdown (opens new window)的时候，我就被它简洁的语法干净的文本结构吸引住，它的代码块和兼容html标签的能力更是让我爱上它，很高兴找到了一个高效记录学习笔记的工具。

知识管理 ​

在一段学习的日子里，我尝试过用txt记录笔记、云笔记、Markdown笔记，并把Markdown文件上传到github进行管理，但总感觉还是不够方便...直到我发现了VuePress，它似乎可以管理我的学习笔记，并且把站点部署到github pages不就是一个在线的云笔记网站了吗

VuePress ​

VuePress (opens new window)是一个 Vue 驱动的静态网站生成器，正是以Markdown为中心的项目结构，它简洁至上的理念正合我心。对于我这个对Vue还算有一些了解的前端，迫不及待的想去使用它来搭建一个我的云笔记网站。

知识管理&博客主题-Vdoing的诞生 ​

我以前的一个领导和我们说过一个好的知识管理可以帮助我们提高开发质量和开发效率，下面这张图就是他想传达的，我表示赞同：

image-20241222084532802

什么是一个好用的知识管理工具呢？其实我也在不断的寻找和思考中。不过我觉得它至少要结构清晰、管理方便，在查找知识点的过程中可以快速的找到，正像上图所说的要在15秒内找到一个知识点，在添加内容的时候可以很方便的添加，并且保证结构清晰。

VuePress的官方默认主题是专门为写文档而生的，和我心目中的知识库有一些差距，比如在满足结构清晰这点上，每添加一个内容就得手动的添加侧边栏数据，还有在满足15秒内找到一个知识点上还是不够好，因此我觉得需要做一些改造。

在知识管理方面，有三种典型的知识形态：

  • 结构化：看重知识的条理性和实用性，有一定专业背景才能看懂
  • 碎片化：描述具体的知识点，通俗易懂
  • 体系化：对某一领域的完整解读，通常是某类知识的专业之作

从这三种知识形态出发，我给主题添加了自动生成结构化侧边栏、目录页、面包屑等等。在满足了结构化之后，写博客应该算得上是一种碎片化的形态，我就给主题添加了分类、标签、归档等等。在满足更方便添加内容上，有了自动生成front matter、批量操作front matter等，更多关于主题的知识从开始使用它去探索吧~~

主题名称 ​

Vdoing，中文大概是维度的意思。起这个名的原因，首先是我看过一个视频《尤雨溪创立vue的心路历程》B站传送 (opens new window)youtube传送 (opens new window)，里面有讲到vue起名的故事，一开始想起的名其实是Seed.js，但是在npm上被占用了，然后发现vue是一个挺酷的一个词，才决定用vue。发现大佬起名可以这么酷。再者，这个主题我想它可以多维度的快速寻找一个知识点，要么就叫维度吧，那英文名就用Vdoing好了...

快速上手 ​

详情见单独《部署》一页。

bash
# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency
npm install # or yarn install

# develop
npm run dev # or yarn dev

其它 ​

指南

image-20241222081903044

配置

image-20241222081930050

资源

https://doc.xugaoyi.com/pages/db78e2/

image-20241222082012857

案例

image-20241222082038624

https://vuepress.vuejs.org/zh/guide/using-vue.html#浏览器的-api-访问限制)

更新日志 ​

  • v1.12.x

    • 新增配置项pageStyle，用于切换页面的风格样式，可选卡片、 线条风格。详情

    • 新增配置项bodyBgImgInterval，用于在设置了多张背景大图时修改大图切换的时间间隔。详情

    • 新增配置项defaultMode，用于修改默认外观模式(v1.12.3)。详情

  • v1.11.x：新增配置项extendFrontmatter，用于扩展自动生成front matter。详情

  • v1.10.x：新增右侧目录栏对h2~h6标题的适配，并优化了UI，详情。

  • v1.9.x：新增配置文件对TypeScript的支持，参考config.ts (opens new window)。新增标题标记。

  • v1.8.x：新增 Markdown中使用的组件：代码块选项卡 。

  • v1.7.x：新增 自定义html模块 配置，可用于插入广告模块。

  • v1.6.x：支持四级目录，提高站点结构可塑性。

  • v1.5.x：新增笔记容器，轻松插入笔记框。

  • v1.4.x：新增了文章内容区块的 背景底纹配置，让你的文章看起来像笔记本的风格~

  • v1.2.x：这个版本对整体的UI细节做了很多优化，比如标签栏和分类栏等

  • v1.1.x：从这个版本开始主题新增超好用、高颜值的Markdown容器，快去 体验 吧~

更多上新请查阅：更新日志

反馈与交流 ​

image-20241222081545404

赞助 ​

image-20241222082151135

image-20241222082235896

image-20241222082302437

💖支持这个项目

如果你正在使用这个项目并感觉良好，或只是想要支持我继续开发，你可以通过如下任意 方式支持我：

  1. Star 并 分享这个项目 🚀

  2. 保留主题 footer(页脚) 的主题链接 😄

  3. 关注公众号yqyjs666，回复前端资源，可获取 前端学习资源

  4. 通过以下二维码 一次性捐款。 我多半会买一杯 咖啡 茶。🍵

谢谢！ ❤️

致谢 ​

❤️感谢支持这个项目的朋友

❤️感谢为这个项目贡献代码的朋友 → Contributors

许可证 ​

MIT

Copyright (c) 2019-present Evan Xu

最近更新