# 使用 vuepress 建站指南

# 参考资料

Vuepress 官网

# 一、vuepress 初始化

# step1、安装 Node

Node.js 官网下载地址

菜鸟安装教程

# 更新 npm 到最新版本
npm install -g npm

# step2、vuepress 项目初始化

vuepress 文件目录结构文档

# 创建目录存放 vuepress 项目信息
mkdir vuepress-demo
cd vuepress-demo

# 本地安装 vuepress 依赖
npm install -D vuepress

# 创建 docs 存放
mkdir docs

# 创建一个测试 md 文件到 docs 中
echo "# Test MD" > docs/README.md

# 启动 vuepress 【默认访问:http://localhost:8080】
npx vuepress dev docs

界面如下:

vuepress 项目初始化效果图

# step3、简化 npm 启动/打包命令

vuepress 参考文档

操作如下:直接修改 package.json 文件

vuepress 简化命令

修改之后命令变更为

# 启动
npm run dev
# 打包
npm run build

# 二、vuepress 基础完善

# 基本配置

vuepress 基本配置文档

# 当前文件路径,项目根路径 vuepress-demo

# 创建文件目录
mkdir -p docs/.vuepress

# 创建配置文件
touch docs/.vuepress/config.js

vuepress 的所有配置信息都配置在 config.js 中

# 基础信息配置

网页标题,描述,favicon 网站图片

在 config.js 中追加配置信息

module.exports = {
  title: '彳失口亍', 
  description: '描述',// SEO
  head: [
    ['link', { rel: 'icon', href: `/zhixing.png` }]
  ]
}

其中:图片放在公共资源文件路径 public 下,如下图

vuepress public 公共资源路径图

重新启动,效果图,如下:

vuepress 基础信息配置效果图

# 默认主题配置

vuepress 默认主题配置文档

默认主题的配置信息在 config.js 格式如下:

vuepress 基础信息配置效果图

themeConfig:{
    logo: '/zhixing.png' // 导航栏 logo
}

效果如下:

vuepress 主题 logo效果图

# 主题首页

docs 文件路径中 README.md 为首页内容,追加如下内容:

---
home: true
heroImage: /zhixing.png
heroText: 
tagline: Hexo - Vurpess 站点迁移中.........
actionText: My Blog
actionLink: http://blog.qguofeng.top
features:
- title: 学习笔记
  details: 记录学习点,用于后期自己回顾。
- title: 工作笔记
  details: 记录工作过程中踩到的坑
- title: other
  details: other.....
footer: 知行合一 | Copyright © 2020 WTF名字好难取
---

效果图,如下:

vuepress 主题首页效果图

# 导航栏信息

导航栏配置直接可以在 config.js 中配置,为了便于管理,将其进行抽离

# 在文件根路径下创建 config 文件用于存放分离的配置文件
mkdir config

# 创建 navconf.js 用于存放 导航栏的配置信息
touch config/navconf.js

# 在原有的 config.js 中添加引用外部文件的配置
-----------------------------------------
const navconf = require('../../config/navconf.js')  
themeConfig:{
    logo: '/zhixing.png',
    nav: navconf // 导航栏配置
}
----------------------------------------

此时项目结构如下:

vuepress 导航栏信息配置项目结构

全局配置 config.js 配置如下

vuepress 导航栏信息config配置

导航栏配置 navconf.js 配置如下

vuepress 导航栏信息navconf配置

效果图如下:

vuepress 导航栏信息效果图

# 为了方便侧边栏测试,追加部分模拟文章,信息如下图

vuepress 导航栏测试图

# 侧边栏信息

同导航栏

# 三、插件

vuepress 插件使用文档

# 图片放大插件:@vuepress/plugin-medium-zoom

# 回到顶部插件:@vuepress/plugin-back-to-top

# 显示最新更新时间插件: @vuepress/last-updated

显示文件,git 最近一次提交时间

更多内容,参考官方文档

# 问题汇总

# markdown 文章无法显示问题

1、md 文件中的 <xxx> 需要使用 ` ` 括起来 ,否则文章无法显示

2、md 中图片名称不能存在中文

3、md 文件中的图片使用相对路径,如果不能存在该图片,则文章无法显示

# 插件无法使用问题

问题如下:

warning An error was encountered in plugin "@vuepress/xxxxx"

解决:不要使用全局的 vuepress ,需要在项目中安装,如下

# cd 项目根路径下:如 cd blog-vuepress

# 项目内安装
yarn add -D vuepress
# 或者 npm install -D vuepress

精彩内容推送,请关注公众号!
最近更新时间: 3/24/2020, 4:15:16 PM