【移動(dòng)應(yīng)用開發(fā)技術(shù)】VuePress做出個(gè)人網(wǎng)頁的示例

【移動(dòng)應(yīng)用開發(fā)技術(shù)】VuePress做出個(gè)人網(wǎng)頁的示例

這篇文章主要介紹VuePress做出個(gè)人網(wǎng)頁的示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！VuePressvuepress是尤大大4月12日發(fā)布的一個(gè)全新的基于vue的靜態(tài)網(wǎng)站生成器，實(shí)際上就是一個(gè)vue的spa應(yīng)用，內(nèi)置webpack，可以用來寫文檔。一個(gè)基于VueSSR的靜態(tài)站生成器，本來的目的是爽爽的寫文檔，但是我發(fā)現(xiàn)用來擼一個(gè)人博客也非常不錯(cuò)。上手搭建你可以跟著文檔上的例子自己玩一玩，不過由于VuePress的文檔也是用VuePress來實(shí)現(xiàn)的，所以我取巧直接拿VuePress倉庫中的docs目錄拿來玩耍。1.首先安裝VuePress到全局npminstall-gvuepress2.然后把VuePress倉庫克隆到你的電腦gitclonegit@:docschina/vuepress.git在docs文件中執(zhí)行（請(qǐng)確保你的Node.js版本>=8）cd

vuepress

cd

docs

vuepress

dev當(dāng)你看到這一行就說明已經(jīng)成功了：

VuePress

dev

server

listening

at

http://localhost:8080/下面我們打開http://localhost:8080/發(fā)現(xiàn)真的打開了vuepress文檔：下面的工作就是數(shù)據(jù)的替換了，但我們應(yīng)該先看一下docs的目錄結(jié)構(gòu)：├─.vuepress

│

├─components

│

└─public

│

└─icons

│

└─config.js

//

配置文件

├─config

//

Vuepress文檔的配置參考內(nèi)容

├─default-theme-config

//

Vuepress文檔的默認(rèn)主題配置內(nèi)容

├─guide

//

Vuepress文檔的指南內(nèi)容

└─zh

//

中文文檔目錄

├─config

├─default-theme-config

└─guide

└─README.md

//

首頁配置文件文檔分成了兩部分，中文文檔在/zh/目錄下，英文文檔在根目錄下。其實(shí)目錄里面的東西都挺好看懂的，首先guide、default-theme-config、config這三個(gè)目錄中的都是Vuepress文檔的主要內(nèi)容，從中文文檔里也可以看到只有這三個(gè)目錄被替換了。首頁配置默認(rèn)主題提供了一個(gè)主頁布局，要使用它，需要在你的根目錄README.md的YAMLfrontmatter中指定home：true，并加上一些其他的元數(shù)據(jù)。我們先看看根目錄下的README,md：home:

true

//

是否使用Vuepress默認(rèn)主題

heroImage:

/hero.png

//

首頁的圖片

actionText:

Get

Started

→

//

按鈕的文字

actionLink:

/guide/

//

按鈕跳轉(zhuǎn)的目錄

features:

//

首頁三個(gè)特性

-

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

//

頁尾實(shí)在看不懂，官網(wǎng)有比我更詳細(xì)的配置說明。導(dǎo)航配置導(dǎo)航配置文件在.vuepress/config.js中在導(dǎo)航配置文件中nav是控制導(dǎo)航欄鏈接的，你可以把它改成自己的博客目錄。nav:

[

{

text:

'Guide',

link:

'/guide/',

},

{

text:

'Config

Reference',

link:

'/config/'

},

{

text:

'Default

Theme

Config',

link:

'/default-theme-config/'

}

]剩下的默認(rèn)主題配置官方文檔都有很詳細(xì)的文檔說明這里就不在啰嗦了。更改默認(rèn)主題色你可以在.vuepress/目錄下創(chuàng)建一個(gè)override.styl文件。vuepress提供四個(gè)可更改的顏色：$accentColor

=

#3eaf7c

//

主題色

$textColor

=

#2c3e50

//

文字顏色

$borderColor

=

#eaecef

//

邊框顏色

$codeBgColor

=

#282c34

//

代碼背景顏色我把它改成了這樣：側(cè)邊欄的實(shí)現(xiàn)由于評(píng)論區(qū)里問的人較多，所以在這里更新一下，其實(shí)我就算在這里寫的再詳細(xì)也不如大家去看官方文檔。側(cè)邊欄的配置也在.vuepress/config.js中：sidebar:

[

{

title:

'JavaScript',

//

側(cè)邊欄名稱

collapsable:

true,

//

可折疊

children:

[

'/blog/JavaScript/學(xué)會(huì)了ES6，就不會(huì)寫出那樣的代碼',

//

你的md文件地址

]

},

{

title:

'CSS',

collapsable:

true,

children:

[

'/blog/CSS/搞懂Z-index的所有細(xì)節(jié)',

]

},

{

title:

'HTTP',

collapsable:

true,

children:

[

'/blog/HTTP/認(rèn)識(shí)HTTP-Cookie和Session篇',

]

},

]對(duì)應(yīng)的文檔結(jié)構(gòu)：├─blog

//

docs目錄下新建一個(gè)