今回は、VuePress で個(gè)人 Web ページを作成する場(chǎng)合の 注意事項(xiàng) について、実際の事例を見てみましょう。

VuePress

vuepress は、Youda によって 4 月 12 日にリリースされた新しい vue ベースの靜的 Web サイトジェネレーターで、実際には組み込みの webpack を備えた vue spa アプリケーションです。ドキュメンテーション。

Vue SSR をベースにした靜的サイトジェネレーター。本來の目的は楽しくドキュメントを書くことですが、ブログにも非常に適していることがわかりました。

これは VuePress の公式ドキュメントです

早速構(gòu)築してみましょう

ドキュメントのサンプルに従って自分でプレイすることもできますが、VuePress ドキュメントも VuePress を使用して実裝されているため、私はトリックを?qū)g行して、楽しみのために VuePress リポジトリから直接ダウンロードしてください。

1. まず VuePress をグローバルにインストールします

npm install -g vuepressnpm install -g vuepress

2.然后把VuePress倉(cāng)庫(kù)克隆到你的電腦

git clone git@github.com: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?//?首頁(yè)配置文件

文檔分成了兩部分，中文文檔在/zh/目錄下，英文文檔在根目錄下。

其實(shí)目錄里面的東西都挺好看懂的，首先guide 、default-theme-config、config 這三個(gè)目錄中的都是Vuepress文檔的主要內(nèi)容，從中文文檔里也可以看到只有這三個(gè)目錄被替換了。

首頁(yè)配置

默認(rèn)主題提供了一個(gè)主頁(yè)布局，要使用它，需要在你的根目錄?README.md?的?YAML front matter?中指定?home：true，并加上一些其他的元數(shù)據(jù)。

我們先看看根目錄下的README,md：

home:?true?//?是否使用Vuepress默認(rèn)主題
heroImage:?/hero.png?//?首頁(yè)的圖片
actionText:?Get?Started?→?//?按鈕的文字
actionLink:?/guide/?//?按鈕跳轉(zhuǎn)的目錄
features:?//?首頁(yè)三個(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?//?頁(yè)尾

實(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è)博客目錄
│?├─CSS
│?├─HTTP
│?└─JavaScript

我的博客：brownhu

部署

在配置好你博客之后，命令行執(zhí)行：

Vuepress build

2. 次に、VuePress リポジトリをコンピューターにクローンします????git clone git@github.com:docschina /vuepress .git????docs ファイルで実行します (Node.js バージョン >= 8 であることを確認(rèn)してください)??rrreee??この行が表示されたら、成功したことを意味します:??rrreee?? http の下で開きましょう://localhost:8080/???? vuepress ドキュメントが実際に開かれていることがわかりました: ????????次の作業(yè)はデータを置き換えることですが、最初にドキュメントを確認(rèn)する必要があります ディレクトリ構(gòu)造??: ??rrreee??このドキュメントは 2 つの部分に分かれています。中國(guó)語(yǔ)のドキュメントは /zh/ ディレクトリにあり、英語(yǔ)のドキュメントはルート ディレクトリにあります。 ????実際、ディレクトリ內(nèi)の內(nèi)容は非常に簡(jiǎn)単に理解できます。まず、ガイド、default-theme-config、および config の 3 つのディレクトリが Vuepress ドキュメントの主要な內(nèi)容です。これら 3 つのディレクトリのみが置き換えられていることがわかります。 ????????ホームページの設(shè)定???????? デフォルトのテーマはホームページのレイアウトを提供します。これを使用するには、ルート ディレクトリ README.md の YAML フロントマターで home: true を指定し、その他のメタデータを追加する必要があります。 ????まずルート ディレクトリにある README を見てみましょう。md: ??rrreee?? 本當(dāng)に理解できません。公式 Web サイトの方が私より詳しい設(shè)定手順が記載されています。 ????????ナビゲーション構(gòu)成????????ナビゲーション構(gòu)成ファイルは .vuepress/config.js にあります???? ナビゲーション構(gòu)成ファイル內(nèi)で、nav はナビゲーション バーのリンクを獨(dú)自のブログ ディレクトリに変更できます。 ??rrreee?? 殘りのデフォルトのテーマ設(shè)定の公式ドキュメントには、非常に詳細(xì)なドキュメントの説明が含まれています?? これ以上冗長(zhǎng)になる必要はありませんここ。 ????????デフォルトのテーマカラーを変更する???????? .vuepress/ ディレクトリに override.styl ファイルを作成できます。 ????vuepress には 4 つの変更可能な色があります: ??rrreee??私はこれに変更しました: ????????????サイドバーの実裝????????コメント欄で質(zhì)問が多いので、ここで更新しておきます。実際、ここでいくら詳しく書いても、みんな公式文書を読んでください。 ????サイドバーの設(shè)定も .vuepress/config.js にあります: ??rrreee??対応するドキュメント構(gòu)造: ??rrreee??私のブログ: Brownhu????????Deployment???????? ブログを設(shè)定した後、コマンドラインを?qū)g行します: ?? ??Vuepress ビルド??

この行が表示されたら、成功を意味します:

成功! vuepress で靜的ファイルが生成されました。

この記事の事例を読んだ後は、この方法を習(xí)得したと思います。さらに興味深い情報(bào)については、他の関連記事に注目してください。 PHP中國(guó)語(yǔ)ウェブサイトで！

推奨読書:

モバイル WeChat 公開アカウントを作成する (コード付き)

長(zhǎng)さと size() の使用の比較

以上がVuePress で個(gè)人の Web ページを作成するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。