Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客


Posted in Javascript onApril 26, 2018

VuePress

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错。

这是VuePress的官方文档

上手搭建

你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。

1.首先安装VuePress到全局

npm install -g vuepress

2.然后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git

在docs文件中执行(请确保你的 Node.js 版本 >= 8)

cd vuepress
cd docs
vuepress dev

当你看到这一行就说明已经成功了:

VuePress dev server listening at http://localhost:8080/

下面我们打开http://localhost:8080/

发现真的打开了vuepress文档:

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

下面的工作就是数据的替换了,但我们应该先看一下docs的目录结构:

├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
 ├─config
 ├─default-theme-config
 └─guide
└─README.md // 首页配置文件

文档分成了两部分,中文文档在/zh/目录下,英文文档在根目录下。

其实目录里面的东西都挺好看懂的,首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容,从中文文档里也可以看到只有这三个目录被替换了。

首页配置

默认主题提供了一个主页布局,要使用它,需要在你的根目录 README.md 的 YAML front matter 中指定 home:true,并加上一些其他的元数据。

我们先看看根目录下的README,md:

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
 details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
 details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
 details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

实在看不懂,官网有比我更详细的配置说明。

导航配置

导航配置文件在.vuepress/config.js中

在导航配置文件中nav是控制导航栏链接的,你可以把它改成自己的博客目录。

nav: [
 {
 text: 'Guide',
 link: '/guide/',
 },
 {
 text: 'Config Reference',
 link: '/config/'
 },
 {
 text: 'Default Theme Config',
 link: '/default-theme-config/'
 }
]

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在??铝恕?br />

更改默认主题色

你可以在.vuepress/目录下创建一个override.styl文件。

vuepress提供四个可更改的颜色:

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

我把它改成了这样:

Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

侧边栏的实现

由于评论区里问的人较多,所以在这里更新一下,其实我就算在这里写的再详细也不如大家去看官方文档。

侧边栏的配置也在.vuepress/config.js中:

sidebar: [
 {
 title: 'JavaScript', // 侧边栏名称
 collapsable: true, // 可折叠
 children: [
 '/blog/JavaScript/学会了ES6,就不会写出那样的代码', // 你的md文件地址
 ]
 },
 {
 title: 'CSS', 
 collapsable: true,
 children: [
 '/blog/CSS/搞懂Z-index的所有细节',
 ]
 },
 {
 title: 'HTTP',
 collapsable: true,
 children: [
 '/blog/HTTP/认识HTTP-Cookie和Session篇',
 ]
 },
]

对应的文档结构:

├─blog // docs目录下新建一个博客目录
│ ├─CSS
│ ├─HTTP
│ └─JavaScript

我的博客:brownhu

部署

在配置好你博客之后,命令行执行:

Vuepress build

当你看到这一行就说明成功了:

Success! Generated static files in vuepress.

将打包好的vuepress目录上传到你的github仓库,和github page配合,就可以配置好你的博客网站了。

Javascript 相关文章推荐
使图片旋转的3种解决方案
Nov 21 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 #Javascript
vue如何判断dom的class
Apr 26 #Javascript
vue 中filter的多种用法
Apr 26 #Javascript
vue自定义filters过滤器
Apr 26 #Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 #Javascript
react 创建单例组件的方法
Apr 26 #Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
You might like
实用函数10
2007/11/08 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
javascript调试说明
2010/06/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
JS判断数组那点事
2017/10/10 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python3 xpath和requests应用详解
2020/03/06 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
扬尘污染防治方案
2014/06/15 职场文书
大学生学习计划书
2014/09/15 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL