前言
最近在github上看到一个项目fenixsoft/awesome-fenix，其中有提到该项目的文档都是由vuepress框架构建，带着好奇我就搜索了这个框架，发现该框架除了可以用来构建文档站点，还可以用来构建博客，于是便有了这一边文章。
准备
- 安装配置好node环境
开始
# 全局安装主题脚手架
npm install @vuepress-reco/theme-cli -g
# 初始化工程
theme-cli init
启动
npm run dev
个性化
外挂组件修改
vuepress提供了一些简单的接口文件，可以让你能够很方便地定制你自己想要的效果，和hexo外挂组件修改一样，这类修改无需改动源码，上手简单。
修改主题颜色
通过配置 .vuepress/styles/palette.styl 来快速修改主题的一些颜色属性。(如果不存在该目录和文件就创建一个)
// 默认值
$accentColor = #1296db // 主题颜色
$textColor = #2c3e50 // 文本颜色
$borderColor = #eaecef // 边框线颜色
$codeBgColor = #282c34 // 代码块背景色
$backgroundColor = #ffffff // 悬浮块背景色
修改主题样式
创建一个 .vuepress/styles/index.styl 文件以方便地添加额外样式。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。我这边修改了下logo图片样式。
.navbar .logo {
height: 2.2rem;
min-width: 2.2rem;
margin-right: 0.8rem;
vertical-align: top;
border-radius: 0% !important;
}
使用本地主题
-
主题的启动流程：如果config没指定，系统会默认会检查
.vuepress/theme，如果还没有就，直接用默认主题。 -
删除config.js中的
"theme": "reco",配置项。 -
在node_modules目录下找到vuepress-theme-reco文件夹，拷贝该文件重命名为theme，粘贴到.vuepress目录下，执行
npm run dev，终端日志出现tip Apply local theme at /Users/crystal/anpai/node/blog_anpai/.vuepress/theme... tip Apply theme local ...的日志提示则应用成功 -
接下来就可以直接对主题源码惊醒修改了。
-
目录如下
Dev ├─── docs │ └── .vuepress // 配置目录 │ │ ├── public // 静态资源 │ │ ├── theme // 主题 │ │ │ ├── components // 组件 │ │ │ ├── global-components // 全局组件 │ │ │ ├── layouts // 布局(包括首页在内) │ │ │ ├── styles // 样式 │ │ │ ├── util // 工具 │ │ │ ├── index.js // 入口配置 │ │ │ ├── noopModule.js // 依赖注入 │ │ │ ├── package.json // 主题依赖 │ │ │ ├── README.md // 主题说明 │ │ └── config.js │ └── README.md // 博客首页 └── package.json
添加插件
Vuepress有很多插件 插件广场，我这边就介绍下我使用的插件。
音乐插件
插件地址 moefyit/vuepress-plugin-meting
安装
npm i vuepress-plugin-meting -D
配置
config.js中的module.exports = {}中添加以下配置就可以集成了。
plugins: {
"meting": {
meting: {
// 自动识别
auto: 'https://music.163.com/#/song?id=413812448',
// // 当前服务为netease -> 网易
// server: "netease",
// // 类型为歌单
// type: "playlist",
// // 歌单id
// mid: "5312894314",
},
aplayer: {
// 歌单为随机
order: 'random',
// 0为不显示歌词
lrcType: 0,
// 音量
volume: 0.5,
// 开启迷你模式
mini: true,
// 自动播放
autoplay: true,
theme: "#1297da"
},
},
},
打包
npm run build
最后生成的打包文件在public目录下。
