VuePress快速搭建博客<script>exportdefault{name:'Valine',mounted:fu

官方文档

VuePress 需要 Node.js >= 8.6

一、快速搭建一个VuePress官网

创建并进入博客目录
```
mkdir blog && cd blog
```
项目初始化
```
yarn init # npm init
```

安装VuePress本地依赖

yarn add -D vuepress # npm install -D vuepress

创建相关文件夹

mkdir -p docs/.vuepress/public # .vuepress文件夹用于存放全局的配置、组件、静态资源等

下载官网首页的hero.png图片放在public文件夹下

创建首页文档

mkdir -p docs && echo '# Hello VuePress' > docs/README.md

文档内容稍作修改(可选)

---
home: true
heroImage: /hero.png
heroText: VuePress
tagline: Vue 驱动的静态网站生成器
actionText: 快速上手 →
actionLink: /
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
---

在 package.json 中修改 scripts得到以下内功

{
  "name": "blog",
  "version": "1.0.0",
  "description": "VuePress",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.5.2"
  }
}

当前目录结构

.
└── blog
    ├── docs
    │   ├── .vuepress
    │   │   └── public
    │   │       └── hero.png
    │   └── README.md
    └── package.json

运行命令
```
yarn run dev # npm run dev
```
浏览器打开http://localhost:8080/

image-20200802121603727

二、导航栏和侧边栏

添加主页文档

cd docs
mkdir -p home && echo '# Home VuePress' > home/README.md

.vuepress文件夹下面创建配置文件config.js
```
cd .vuepress && touch config.js
```

config.js添加以下配置

/home/ 默认跳转到/home/README.md

module.exports = {
    title: 'hehog的博客',
    description: 'hehog的个人博客笔记，记录成长',
    port: '8080',
    head: [
        ['link', { rel: 'icon', href: '/hero.png' }] //网站的 ico 图标
    ],
    themeConfig: {
        nav: [// 导航栏
            { text: '首页', link: '/' },
            { text: 'home', link: '/home/' },
            {
                text: '后端',
                items: [
                    { text: 'jvm', link: '/java/jvm/' },
                    { text: '设计模式', link: '/java/design/' },
                    { text: '数据库', link: '/data/' },
                ]
            },
            { text: '掘金', link: 'https://juejin.cn' },
            { text: '知乎', link: 'https://www.zhihu.com' }
        ],
        sidebar: {
            '/home/': [],
            '/java/design/': [
                {
                    title: "设计模式",
                    collabsable: true,// 可折叠
                    children: [
                        ['', '单例模式'],
                        ['/java/design/1', '工厂模式']
                    ]
                }
            ],
            '/data/': [

                {
                    title: "mysql",
                    collabsable: true,// 可折叠
                    children: [
                        ['', 'mysql安装'], // /data/README.md
                        ['/data/mysql/1', '常用命令']
                    ]
                },
                {
                    title: "mongo",
                    collabsable: true,// 可折叠
                    children: [
                        ['/data/mongo/1', '常用命令']
                    ]
                },
                {
                    title: "redis",
                    collabsable: true,// 可折叠
                    children: [
                        ['/data/redis/1', 'redis安装']
                    ]
                }
            ]
        }
    }
}

目录结构如下

.
├── docs
│   ├── README.md
│   ├── data
│   │   ├── README.md
│   │   ├── mongo
│   │   │   ├── 1.md
│   │   │   ├── 2.md
│   │   │   └── README.md
│   │   ├── mysql
│   │   │   └── README.md
│   │   └── redis
│   │       └── README.md
│   └── java
│       ├── README.md
│       ├── design
│       │   ├── 1.md
│       │   └── README.md
│       └── jvm
│           └── README.md
└── package.json

重新启动后的效果

home

三、插件安装

本地安装插件

yarn add -D @vuepress/plugin-back-to-top @vuepress/plugin-nprogress

config.js添加配置

plugins:[
 ["@vuepress/back-to-top"], // 返回顶部
 ["@vuepress/nprogress"],  // 加载进度条
]

四、添加评论功能

Valine官网注册账号拿到AppID和AppKey
安装评论插件
```
yarn add vuepress-plugin-comment -D
```

创建Valine.vue

mkdir -p .vuepress/components/Valine.vue

Valine.vue添加以下内容

<template>
  <section style="border-top: 2px solid #eaecef;padding-top:1rem;margin-top:2rem;">
    <div>
      <!-- id 将作为查询条件 -->
      <span class="leancloud-visitors"
            data-flag-title="Your Article Title">
        <em class="post-meta-item-text">阅读量： </em>
        <i class="leancloud-visitors-count"></i>
      </span>
    </div>
    <h3>
      <a href="javascript:;"></a>
      评 论：
    </h3>
    <div id="vcomments"></div>
  </section>
</template>


<script>
export default {
name: 'Valine',
mounted: function () {
// require window
const Valine = require('valine');
if (typeof window !== 'undefined') {
document.getElementsByClassName('leancloud-visitors')[0].id
= window.location.pathname
this.window = window
window.AV = require('leancloud-storage')
}



new Valine({
  el: '#vcomments',
  appId: '',// your appId
  appKey: '', // your appKey
  notify: false,
  verify: false,
  path: window.location.pathname,
  visitor: true,
  avatar: 'mm',
  placeholder: '٩(◕‿◕｡)۶发表你的想法~',
  // 设置Bilibili表情包地址
  emojiCDN: 'https://mirrorcdn.bili33.top/', 
  // 表情title和图片映射
  emojiMaps: {
      "bilibilitv2": "bilibilitv/[tv_doge].png",
      "bilibilitv3": "bilibilitv/[tv_亲亲].png",
      "bilibilitv4": "bilibilitv/[tv_偷笑].png",
      "bilibilitv5": "bilibilitv/[tv_再见].png",
      "bilibilitv6": "bilibilitv/[tv_冷漠].png",
      "bilibilitv7": "bilibilitv/[tv_发怒].png",
      "bilibilitv8": "bilibilitv/[tv_发财].png",
      "bilibilitv9": "bilibilitv/[tv_可爱].png",
      "bilibilitv10": "bilibilitv/[tv_吐血].png"
  } 
});




},
}
</script>
},
}
</script>

需要添加评论的md文件中添加
```
<Valine></Valine>
```
效果如下

image-20200802205312909

五、安装主题

安装AntDocs 或者 Reco 主题

yarn add -D vuepress-theme-antdocs
yarn add -D vuepress-theme-reco

config.js添加以下配置重启生效

module.exports = {
  ...
  theme: 'reco',
  ...
}

由于篇幅限制下一篇我们再来讲如何将博客部署到服务器