使用VuePress编写静态网站，个人使用过程记录

骑猪看日落 2023-01-17 08:49 163阅读 0赞

**因为写过开源的简单入门案例，附加的md文档详细说明，但总觉得不是很规范不是非常美观，所以萌生了如何去快速生成静态网站，像基于elementui开源的vue-element-admin文档那样赏心悦目，所以总结了下内容：**  
![在这里插入图片描述][20210428111902163.png]

*  loppo: 非常简单的静态站点生成器
 *  idoc：简单的文档生成工具
 *  gitbook：大名鼎鼎的文档协作工具
 *  docsify：一个神奇的文档站点生成器，简单轻巧，无需静态构建html[docsify官网地址][docsify]
 *  mkdoc
 *  read the doc

以上几款都是快速生成文档的，其中我使用过docsify，使用方法就不赘述，可自行查看其他作者文档：[docsify - 生成文档网站简单使用教程][docsify -]  
**参考下我随便做的效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]  
[如上图：][Link 1]可以很明显看到涉及到代码部分没有黑色背景色，找遍百度终于在gitee找到答案，**VuePress**！！！

官网地址[快速上手vuepress][vuepress]

`mkdir vuepress-starter && cd vuepress-starter`  
新建vuepress-starter文件夹，再进入vuepress-starter

npm init

初始化项目

npm install -D vuepress

本地安装vuepress

{ 
      "scripts": { 
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
      }
    }

在package.json中添加配置

npm run docs:dev

本地启动服务器

**进本目录结构**  
.  
├── docs  
│ ├── .vuepress (可选的)  
│ │ ├── components (可选的)  
│ │ ├── theme (可选的)  
│ │ │ └── Layout.vue  
│ │ ├── public (可选的)  
│ │ ├── styles (可选的)  
│ │ │ ├── index.styl  
│ │ │ └── palette.styl  
│ │ ├── templates (可选的, 谨慎配置)  
│ │ │ ├── dev.html  
│ │ │ └── ssr.html  
│ │ ├── config.js (可选的)  
│ │ └── enhanceApp.js (可选的)  
│ │  
│ ├── README.md  
│ ├── guide  
│ │ └── README.md  
│ └── config.md  
│  
└── package.json

在.vuepress文件夹同济目录下的README.md文件可添加内容

---
    home: true
    heroImage: /hero.png
    heroText: Hero 标题
    tagline: Hero 副标题
    actionText: 快速上手 →
    actionLink: /zh/guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present Evan You
    ---

在.vuepress文件夹的config.js文件添加

module.exports = { 
      themeConfig: { 
      	logo: '/assets/img/logo.png', //导航Logo
        nav: [ //右上角导航栏链接
          {  text: 'Home', link: '/' },
          {  text: 'Guide', link: '/guide/' },
          {  text: 'External', link: 'https://google.com' },
        ],
         sidebar: {  //侧边栏
          '/foo/': [
            '',     /* /foo/ */
            'one',  /* /foo/one.html */
            'two'   /* /foo/two.html */
          ],
    
          '/bar/': [
            '',      /* /bar/ */
            'three', /* /bar/three.html */
            'four'   /* /bar/four.html */
          ],
    
          // fallback
          '/': [
            '',        /* / */
            'contact', /* /contact.html */
            'about'    /* /about.html */
          ]
        }
      }
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]

[20210428111902163.png]: /images/20221021/ad12ec280f7c4f9c885f99b5bd9c4d3e.png
[docsify]: https://docsify.js.org/
[docsify -]: https://segmentfault.com/a/1190000017576714?utm_source=tag-newest
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]: /images/20221021/796055f30e684ced8c8489c06dba8411.png
[Link 1]: https://dxmo.gitee.io/views/frontend/2020/vuepress/%E7%94%A8vuepress+gitee%E6%9E%84%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2.html
[vuepress]: https://vuepress.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]: /images/20221021/bea09017fa1c4d9990c2d68222e0ae55.png