当 VuePress 遇上 “语雀”

缘起

我是 ULIVZ,一名前端,社区里了解我的人可能会知道,过去一年,我的大多数业余精力都专注在维护和开发 VuePress 这个项目上。后来,我从前公司离职加入蚂蚁,我就认识了“语雀”。从那一天起,我就在想,他们能否结合起来,解决某些场景的实际问题。

大抵是去年9月份,我开始了 VuePress 1.x 的开发,前前后后,怀着对这个项目的热爱,并结合社区的反馈,加上了很多有意思的特性,其中,最值得一提的应该就是 Plugin API 。

恩,今天我向大家介绍的,就是一个 VuePress Plugin:

https://github.com/ulivz/vuepress-plugin-yuque

这个插件做的事情很简单——就是给 VuePress 用户提供了一键将语雀 Repo 转换为 VuePress 文档站点的能力。

噢,对了,本项目的文档:

https://vuepress-plugin-yuque.ulivz.com

也是用本项目生成的哦~

痛点

一个新轮子,我们必然关注其解决的实际问题。

语雀解决了人们在线编写、存储、整理和分享文档的痛点,而 VuePress 关注的是开发者快速建立文档类网站的需求。当两者结合起来:

  • 对于语雀用户,你将能够轻松地将一个语雀仓库发布为 VuePress 站点,并部署到任何静态服务器上;
  • 对于 VuePress 用户,由于语雀强大的可视化文档编辑器 和在线存储能力,你将无须将 markdown、 assets 存储于本地,也无须再书写 markdown 文件;同时,语雀的可视化目录编排已经做到了让你不用再关注目录的配置,这个强大的特性,完全可以让 VuePress 用户也收益。

案例

下面的视频介绍了一个实际的转换案例:

一个一键转换的案例

总结一下上述视频中的重点:

  • 输入:一个语雀 Repo
  • 输出:一个包含自动生成的 Homepage、侧边栏 的标准 VuePress 站点

你可以在这里(Site / 语雀 / 源码)找到上述实例的代码。

快速上手

说了这么多,让我们来实际操作一把。

下述教程假设你已经拥有语雀账号,并创建好了语雀仓库。

通过运行下述指令来新建一个项目:

mkdirmy-site&&cdmy-siteyarninit-yyarnaddvuepress@nextvuepress-plugin-yuque-D

接着,在 package.json 中新增两个 npm :

{"s":{"dev":"vuepress dev .","build":"vuepress build ."}

}

接着,新建 VuePress 的配置文件 .vuepress/config.js :

module.exports={plugins:[['vuepress-plugin-yuque',{// 这里可以使用你自己的语雀 ReporepoUrl:'https://www.yuque.com/ant-design/course',}]]

}

运行 yarn dev,你将能获得:

上述的 title 和 deion 都是从语雀仓库直接拉取的,当然,你也利用 VuePress 原生提供的能力修改它:

module.exports={title:'Ant Design 实战教程',deion:'基于 umi 的 Ant Design 实战教程',plugins:[['vuepress-plugin-yuque',{repoUrl:'https://www.yuque.com/ant-design/course',}]]}

是不是清爽很多了:

点击 Getting Started,你便能到达你的文档主页:

  • 左侧:是严格遵循你的语雀目录生成的侧边栏;
  • 右侧:是当前页面的内容;
  • 右上角:是自带的搜索。

接着,你便能将你的站点部署到任何你想要的站点了。

其他

除此之外,我还为大家准备了下面的教程:

自动部署:https://vuepress-plugin-yuque.ulivz.com/deploy.html

站内跳转:https://vuepress-plugin-yuque.ulivz.com/station-jump.html

使用缓存:https://vuepress-plugin-yuque.ulivz.com/cache.html

私有仓库:https://vuepress-plugin-yuque.ulivz.com/private-repo.html

结语

总的来说,本项目给了 VuePress 用户提供了另一种书写文档的方式,同时,又给语雀用户开辟了一种新的站点生成方式。

作为新年创建的第一个仓库,希望能得到大家的喜欢~ 如果你有任何好的建议和问题,欢迎给本项目提 issue ~ 当然,作为作者最希望看到的,还是它确确实实能够解决某些人的实际问题~

(0)

相关推荐

  • Python官方文档中文翻译终于达到 62%!

    花下猫语:Python官方文档的简体中文翻译工作,一直以来进度缓慢.两年前,我写了一篇<>聊了这事,当时翻译进度还不足20%.但是,国内有一部分志愿者们一直在努力.一次偶然的机会,我加入了 ...

  • 一个农学生的“自我救赎”

    上一期是: 跨越了6个阶段,我仍然是生物信息学初学者 这一期的故事差点看哭我了,希望也能触动你! 下面是 小汪Waud 的分享 1 选择 各位好,我叫小汪,一个来自湖北,现就读于华中农业大学的准大四学 ...

  • 其实很多人,对Maven理解的并不深

    作者:代堂鸣 Maven是每一位Java工程师每天都会接触的工具,但据我了解,其实很多应用开发人员对Maven理解的并不深.他们会告诉你,Maven就是一个依赖管理工具,平台组都会配置好,不用管.得到 ...

  • 不会写文档,叫什么高级程序员!

    来源:Python 技术「ID: pythonall」 文档的重要性无容置疑,而且文档编写能力是程序员最重要的软实力之一.不过编写文档不仅枯燥,而且后期制作难度高,谁都不愿意做. 今天我们来聊一聊,如 ...

  • 我问导师,Vue3有没有对应工具来生成漂亮的文档? 用 Vitepress

    前天 本文已经过原作者 Michael Thiessen  授权翻译. 最近有人在问:小智, Vue3 有没有对应制作文档的工具.于是,我去查了一些资料,发现,Vue3和新的Vite构建工具为我们提供 ...

  • GitBook | 手把手教你搭建 免费博客 / 网络文档 / 多人协作编辑~

    写在前面 硕士期间在折腾某些分析的时候,就发现好些软件的操作文档都是用GitBook写的,并且挂到网上供用户检索与浏览,实在是方便而又简洁好看 最近CJ提到了一下GitBook,便抽空鼓捣了一下,感觉 ...

  • 现代云笔记「语雀」不完全使用指南

    文章大纲: 前言 什么是语雀 知识库 编辑器 其他 总结 前言 之前推送过 「使用 Typora 画图」文章在知乎上突然火了,短短几天内的点赞数量超过了2000,收藏超过 4000 次,得到不少人的认 ...

  • 推荐一个vuepress模板,一键快速搭建文档站

    介绍 vuepress-template是一个简单的VuePress案例模板,目的是让用户可以直接clone这个仓库,作为初始化一个VuePress网站启动项目,然后在这个项目的基础上新增自定义配置和 ...

  • 关于知乎盐阅读的若干文章分享

       在等待火车发车前若干时间里,我读到了几个知乎的盐故事,感觉有点意犹未尽,因为看到百分之40要钱.后来我查各种资料也会跳回到知乎.后来我就把知乎装回来吧.但是我也不想装完整版的,又大,广告又多. ...

  • 7个实用的 Vue.js 工具和库

    前端技术优选 昨天 以下文章来源于前端迷社区 ,作者小迷妹 大家好,我是为前端娱乐圈操碎了心的小迷妹,正宗前端开发一枚,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效 ...