VuePress vs Docsify：哪一个更好？

一、易用性

VuePress 是一个相对较新的框架，它集成了 webpack、Vue 和 markdown-it 等工具，实现静态网站生成，并支持侧边栏、导航菜单、搜索、PWA 和多语言等特性。使用 VuePress 开发网站，你需要了解 Vue 基础，但不需要深入了解 webpack 或 markdown-it。VuePress 的配置文件只需要简单的 JavaScript 对象就可以实现，非常简单。

Docsify 是一个轻量级的文档网站生成器，使用简单的 HTML 和 markdown 展示文档，不依赖构建过程，文件名即跳转地址，支持搜索、导航、侧边栏、多主题和多语言等特性。使用 Docsify 开发网站，你不需要了解复杂的构建工具，只需了解基础的 HTML、CSS 和 markdown 语法即可，非常适合初学者。

总的来说，VuePress 比 Docsify 更复杂一些，但由于其内置的特性更丰富，所以在实现高级功能时会更简单些。Docsify 则更方便入门，更适合快速搭建简单的文档网站。

二、功能特性

虽然 VuePress 和 Docsify 都是专门为文档网站而生，但两者的功能特性并不完全相同。

1. 文档文件的组织方式

VuePress 支持某一类文档的嵌套组织，例如你可以将类似于大文件夹的主要文档嵌在一个文件夹中，并在该文件夹内部使用较小的 Markdown 文件以将其内容分割，这样可以很好地组织大量文档。另外 VuePress 还支持多语言内容的组织方式，使得网站可以支持多语言版本。

Docsify 则仅支持 Markdown 文件的简单平铺，不支持文档的嵌套和组织方式的扩展。

2. 导航栏和侧边栏

VuePress 自带导航栏和侧边栏的特性，可以自动生成结构清晰的页面。同时，VuePress 还可以为每个页面指定单独的侧边栏和导航栏配置。

Docsify 也支持导航栏和侧边栏，但需要手动编写代码来配置菜单项和页面链接。

3. 默认主题和插件

VuePress 通过预设主题和插件，可以拥有更多的扩展性和美观性。例如，VuePress 内置了 PWA、Google Analytics、RSS、实时搜索等强大特性，而这些功能都无需额外的配置。在主题方面，VuePress 默认主题以简约的风格为主，自适应移动端，并提供可定制的主题色。

Docsify 的美观与功能特性则依赖第三方主题和插件，有时候需要在多个插件之间手动协调才能让它们互相兼容。但是，Docsify 对自定义主题和插件的支持更加友好，可以实现更丰富的功能特性。

三、例子

1. VuePress

// .vuepress/config.js

module.exports = {
  title: 'My VuePress Site',
  description: 'A simple documentation website built using VuePress',
  themeConfig: {
    sidebar: [
      '/',
      {
        title: 'VuePress Features',
        children: ['/features/introduction.md']
      },
      {
        title: 'Getting Started',
        children: ['/getting-started/guide.md', '/getting-started/basic-usage.md']
      }
    ],
    displayAllHeaders: true
  }
}

2. Docsify

// index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Docsify setting -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="//unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
    
    <!-- Docsify -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4.11.6/lib/themes/vue.css">
    <script src="//cdn.jsdelivr.net/npm/docsify@4.11.6/lib/docsify.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- Bootstrap JS -->
    <script src="//unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="//unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <script src="//unpkg.com/bootstrap@4.0.0-alpha.6/dist/js/bootstrap.min.js"></script>
    <script>
      window.$docsify = {
        name: 'My Docsify Site',
        repo: 'https://github.com/user/repo',
        loadNavbar: true,
        loadSidebar: true,
        basePath: '/'
      }
    </script>
    
    <script src="//cdn.jsdelivr.net/npm/docsify@4.11.6/lib/plugins/emoji.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify@4.11.6/lib/plugins/search.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify@4.11.6/lib/plugins/zoom-image.min.js"></script>
  </body>
</html>

四、总结

虽然 VuePress 和 Docsify 都是很好的文档网站生成器，但它们的目的和功能特性不完全相同。如果你需要快速搭建一个简单、美观的文档网站并且对编程技能不是很熟悉，那么 Docsify 是不错的选择。相反，如果你想创建一个更复杂且可扩展的文档网站并且对 Vue 和 webpack 有更深入的了解，那么使用 VuePress 会是一个更好的选择。综上所述，两者都有它们的优点和缺点，具体使用也取决于你的实际需求。

原创文章，作者：VMZR，如若转载，请注明出处：https://www.506064.com/n/141402.html