Leader让我做CMS帮助中心的技术选型,我撸了VuePress和GitBook,然后选择...

作者:jcmp      发布时间:2021-05-09      浏览量:0
因为自己平时经常写博客,也有博客网站,所

因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型, CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项目。

所以笔者要做一个静态网站的技术选型,笔者把网上流行的 VuePress 和 GitBook 两种方式都尝试了一下,并做了对比,这里写篇文章总结一下,顺便把自己的博客网站重作一便,哈哈。

优惠消息 : 双 12,阿里服务器新用户 1 折,老用户 5 折 :笔者觉得每个开发者都应该拥有自己的网站和服务器,这可是很酷的事情,学习 Linux、跑跑脚本、建站、搭博客啥的都行,现在阿里云的服务器只需要 89元 一年,一起参与瓜分 60 万现金,优惠只剩下最后几天了,需要的赶快上车了,错过还需要再等一年。

1. VuePress

1.1 简介

VuePress 是 Vue 驱动的静态网站生成器。

简洁至上

以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。

Vue 驱动

享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。

高性能

VuePress 会为每个页面预渲染生成静态的 HTML ,同时,每个页面被加载的时候,将作为 SPA 运行。

1.2 效果

首页:

评论:

效果详情请看: https:// biaochenxuying.github.io /blog/ 。

1.3 简单使用

像数 1, 2, 3 一样容易

1.4 目录结构

VuePress 遵循 “约定优于配置” 的原则,推荐的目录结构如下:

注意:请留意目录名的大写。

注意 :

因为笔者的图片都是存在简书上的,所以为了可以访问第三方图床的图片,才添加了这句代码,如果你的图片是存在本地的,去掉这句代码即可,至于具体原因请看笔者写的文章: 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题 。

1.5 评论

评论功能用了 GitTalk。

1.5.1 申请一个 OAuth App

具体实践如下:

创建成功有 Client ID 和 Client Secret ,保存下来,后面我们会用到。

Vuepress 默认 .vuepress / components 文件夹下的组件会全局注册,因此我们创建一个 comment 组件。

gittalk.css 请点击 这里

理论上,我们在每个 markdown 文件里直接加入这个组件即可,但是每次都添加有点麻烦,还是让 node 来帮我们吧。

根目录创建 build 文件夹, 创建三个文件 addComponents.js , delComponents.js , findMarkdown.js , 分别代码如下:

修改 package.json 的 scripts , 先为每个 md 文件添加组件,然后打包,最后再一一删除 markdown 中的 comment 组件。

笔者的项目里面是把添加了二条命令的,比如 npm run dev:md 和 npm run build:md 才是有评论组件的。

想要怎样的打包命令,自己修改就行。

比如我的:

1.6 部署到 Github pages

当我们将文档写好后就到了我们最关心的地方了,怎么将打包后的代码推送到远程仓库的 gh-pages 分支上。

详情移步 vuepress 官网 vuepress.vuejs.org 。

2. GitBook

效果:

效果详情请看: http://biaochenxuying.cn:2021 。

2.1 GitBook 常用指令

2.2 简单上手

然后,我们找个空文件夹,初始化一个 GitBook 项目。

book.json 的意思:

笔者的 book.json :

2.3 插件

插件的配置可以说是 GitBook 的核心。

详情可以看 GitBook - 快速打造可留言的博客 ,这里就不展开讲了。

3. VuePress VS GitBook

相同点

不同点

结论

4. 项目源码

只要把其中的一些配置信息换成自己的就行,比如 仓库 、 Client ID && Client Secret 、作者等。

源码地址: https:// github.com/biaochenxuyi ng/blog 。

其中 VuePress 和 GitBook 的示例代码都在 blog-gitbook 和 blog-vuepress 里面了。

这次需求的结果

令笔者吐血的是:花了 3 天搞的调研,最后 leader 没有采用 ,还是用回了 功能很重的 wordpress 。

因为非技术人员要用起来的话,学习成本是比较大的 ,比如要学 markdown 语法 、 ide 编辑器 、基本的打包命令、可能还要学 git ,而非技术人员编辑文档时,一般是用 wps 的 。

比较欣慰的是:笔者做完调研后,自己的博客网站也能用上了,哈哈。

最后

推荐阅读 : GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目 ,估计很多人都不知道的技巧,甚至很多高级工程师都不知道。

参考文章: 为你的 VuePress 博客添加 GitTalk 评论。