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

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

2. GitBook


效果:


微信图片_20220513121039.png


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


2.1 GitBook 常用指令


  • 安装 GitBooknpm i gitbook-cli -g
  • 初始化 GitBook 项目gitbook init
  • 安装 GitBook 依赖gitbook install
  • 开启 GitBook 服务gitbook serve
  • 打包 GitBook 项目gitbook build
  • GitBook 命令行查看gitbook -help
  • GitBook 版本查看gitbook -V


2.2 简单上手


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

  • gitbook init 初始化 README.md 和 SUMMARY.md 两个文件.
  • gitbook build 本地构建但不运行服务,默认输出到 _book/ 目录.
  • gitbook serve 本地构建并运行服务,默认访问 http://localhost:4000 实时预览.


- GitBook
 - README.md
 - SUMMARY.md


微信图片_20220513121109.png


  • README.md 是默认首页文件,相当于网站的首页 index.html ,一般是介绍文字或相关导航链接.
  • SUMMARY.md 是默认概括文件,主要是根据该文件内容生成相应的目录结构,同 README.md 一样都是被 gitbook init 初始化默认创建的重要文件.
  • _book 是默认的输出目录,存放着原始 markdown 渲染完毕后的 html 文件,可以直接打包到服务器充当静态网站使用。一般是执行 gitbook buildgitbook serve 自动生成的.
  • book.json 是配置文件,用于个性化调整 gitbook 的相关配置,如定义电子书的标题、封面、作者等信息。虽然是手动创建但一般是必选的.
  • GLOSSARY.md 是默认的词汇表,主要说明专业词汇的详细解释,这样阅读到专业词汇时就会有相应提示信息,也是手动创建但是可选的.
  • LANGS.md 是默认的语言文件,用于国际化版本翻译和 GLOSSARY.md 一样是手动创建但是可选的.


book.json 的意思:


  1. title:网站标题
  2. author:网站作者
  3. description:网站功能描述
  4. language:网站使用语言
  5. styles:网站额外配置的样式表
  6. plugins:网站使用的插件
  7. pluginsConfig:网站使用的插件的额外配


笔者的 book.json:


{
  "title": "夜尽天明的博客",
  "author": "biaochenxuying",
  "description": "大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。",
  "language": "zh-hans",
  "plugins": [
    "-highlight",
    "copy-code-button",
    "search-pro",
    "-search",
    "-lunr",
    "expandable-chapters",
    "splitter",
    "-sharing",
    "github-buttons",
    "donate",
    "tbfed-pagefooter",
    "baidu-tongji",
    "anchor-navigation-ex"
  ],
  "pluginsConfig": {
    "github-buttons": {
      "buttons": [
        {
          "user": "biaochenxuying",
          "repo": "blog", 
          "type": "star",
          "count": true,
          "size": "small"
        }, 
        {
          "user": "biaochenxuying",
          "width": "160", 
          "type": "follow", 
          "count": true,
          "size": "small"
        }
      ]
    },
    "donate": {
      "button": "打赏",
      "wechatText": "微信打赏",
      "wechat": "https://camo.githubusercontent.com/ee094d402f957e5d656a399b9dc50ff8c010114e/68747470733a2f2f75706c6f61642d696d616765732e6a69616e7368752e696f2f75706c6f61645f696d616765732f31323839303831392d666661623762643234643038633030642e6a7065673f696d6167654d6f6772322f6175746f2d6f7269656e742f7374726970253743696d61676556696577322f322f772f31323430"
    },
    "tbfed-pagefooter": {
      "copyright":"Copyright &copy biaochenxuying.cn 2019",
      "modify_label": "该文件修订时间:",
      "modify_format": "YYYY-MM-DD HH:mm:ss"
    },
    "baidu-tongji": {
      "token": "XXXXX"
    },
    "anchor-navigation-ex": {
      "showLevel": false
    }
  }
}


2.3 插件


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


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


3. VuePress VS GitBook


相同点


  1. 目前只支持 markdown 格式,图片、视频 等静态资源可以保存在本地,或者保存到允许访问的第三方服务商(如七牛云);


  1. 如果是 world 文档或者 html 格式,要转换成 md 格式才行。


  1. 找了几个 world 文档转换成 md 格式的工具,都不好用,特别是有原文档有图片的时候。


不同点


  1. GitBook 的配置成本很小,可以本地编辑,然后直接部署;GitBook 官方还有个在线编辑器,不过内容要存在 GitBook 的服务器上。


  1. VuePress 的配置成本稍稍大一点,不过可以使用 Vue 的语法与组件,定制化更自由一点,而且 VuePress 中编写 Vue 和平时一样,学习成本几乎为零,可以本地用 VsCode 编辑,然后直接命令行部署。


结论


  1. 都要用 markdown 语法来写文章,markdown 也就几个常用语法而已,非常简单上手。


  1. 非技术人员推荐用 GitBook,技术人员推荐用 VuePress,特别是前端技术人员


  1. 个人更喜欢 VuePress

4. 项目源码


本文中使用 VuePressGitBook 的搭建的完整示例代码都已经上传到 GitHub 上了,可以自行下载来用。


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


源码地址: https://github.com/biaochenxuying/blog

其中 VuePressGitBook 的示例代码都在 blog-gitbookblog-vuepress 里面了。

相关文章
|
5月前
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
5月前
|
JavaScript NoSQL 中间件
《Node.js后端修炼手册》——揭秘服务器搭建与部署上线的生死时速,让你一战成名!
【8月更文挑战第27天】本文详细介绍如何从零开始利用Node.js构建后端服务器并部署至生产环境。首先,通过简易步骤搭建基础服务器,包括环境安装与配置。接着,引入Express框架优化路由与中间件管理,提升开发效率。随后,利用Mongoose实现MongoDB数据库连接,增强数据交互能力。为保证系统稳定性,文中还讲解了错误处理机制。最后,通过PM2等工具部署应用至生产环境,确保高效运行。本教程辅以示例代码,帮助读者快速掌握Node.js后端开发全流程。
146 2
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的投票评选系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的投票评选系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的考研资料分享系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的考研资料分享系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
机器学习/深度学习 缓存 Shell
VSCode上的Git使用手记(持续更新ing...)
本笔记是我想要学习如何将本地文件发布到GitHub上时开始看廖雪峰的Git教程,然后打开了VSCode,发现VSCode上面集成的Git辅助使用功能真的很好用…… 基本上到了不用看教程都可以猜懂的地步。 为了整理、规范使用技巧,在经过了一番学习和试验之后,觉得以这样一篇使用手记的形式发布使用技巧相关的博文,以记录和沉淀经验,并帮助更多Git和VSCode初学者少踩坑。 本文参考的教程、文档等内容见本文末尾。
VSCode上的Git使用手记(持续更新ing...)
|
存储 Java 文件存储
撸了一个简易的配置中心,顺带整合到了SpringCloud
大家好,我是三友~~ 最近突然心血来潮(就是闲的)就想着撸一个简单的配置中心,顺便也照葫芦画瓢给整合到SpringCloud。
|
域名解析
用vitepress搭建文档网站踩坑记录
之前用 vuepress2 + vite 成功搭建了一个博客网站,这不 vue3 的文档改用 vitepress 搭建的,看着挺好看的,就想着也来折腾折腾搭建一个工作的文档网站
152 0
|
JavaScript 前端开发 开发工具
简简单单一个vite⚡⚡插件搞定用户的另类需求——自给自足的感觉真好
简简单单一个vite⚡⚡插件搞定用户的另类需求——自给自足的感觉真好
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-vuecli多版本切换3项目目录文件
前端学习笔记202305学习笔记第二十一天-vue3.0-vuecli多版本切换3项目目录文件
71 0
|
JavaScript 前端开发 开发工具
【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目
今天为大家带来一套教程,教大家入门“脚手架”,相信你一定会有所收获。 目前项目已开源且仍处于开发阶段,后续会更新更多内容,如有不正确的地方请大家指正,我会及时更新并纠正我的错误。
554 0
【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目