最近VuePressについて聞いたことがあるかもしれませんが、ほぼ一晩で登場し、その後まもなくProductHuntの今日の製品になりました。 VuePressが特別な理由は何ですか？ とはVuePressですか？ まあ、それは事実上静的サイトジェネレータです。 特に、 Vue.js を利用した静的サイトジェネレーターは、ドキュメントWebサイトの構築を目的としています。 なんでそんなに特別なの？ 作成者のEvanYouは、信じられないほどシンプルでありながら柔軟なソフトウェアを構築するコツを持っています。 結局、彼はVue.jsを作成しました。 VuePressも例外ではありません。 2つのコマンドを実行すると、Vue.jsを完全にサポートするゼロ構成の事前レンダリングされたSEO対応のSPAが得られます。 数行の設定で、ニーズに合わせてパーソナライズされます。

入門

ステップ1：VuePressをインストールします。

$ npm install -g vuepress

ステップ2：何かを書く。

フォルダにREADME.mdを作成し、そこにマークダウン（Vue.js式と混合！）を書き込みます。

README.md
## Hello VuePress!

_How are you doing?_
> **I'm doing fine, thanks!**

_Great, I was wondering what `49 + 32` is?_
> **{{49 + 32}}**

_Could you repeat that a few times?_

> **Sigh...**
<p v-for="i of 3">{{49 + 32}}</p>

そのフォルダで$ vuepress devを実行し、結果のURLにアクセスします。 （ホットモジュールのリロードがあります！）

結果は次のようになります。

The default VuePress look, with no sidebar or navbar.

ご覧のとおり、Vueのテンプレートシステムに精通している場合は、VuePressに慣れているはずです。 また、注意を払っている場合は、ページ内のヘッダーがリンク可能なアンカーになっていることがわかります。これは便利です。

ステップ3：ビルドします。

サイトを公開する準備ができたら、$ vuepress buildを実行します。 結果の出力は.vuepress/distになり、Webpackで適切に構築および縮小されます。

しかし、おそらく最初にいくつかの調整を行いたいと思うでしょうね。 1ページは少し退屈です。

メタデータの投稿

まず最初に、プロジェクトディレクトリにさらにいくつかのマークダウンファイルを作成します。

ページ-1.md
# This is Page 1

Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ページ-2.md
# This is Page 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

今すぐブラウザをチェックすると、魔法のような次/前の投稿リンクが表示されていることがわかります。 これらのリンクのテキストは、これらの投稿の最初のヘッダーと同じになります。 この場合、それはThis is Page 1/2を意味します。 それは私たちが望んでいることではありません。

先に進み、2ページのマークダウンファイルの上部にYAMLFront-matterブロックを追加します。

ページ-1.md
---
title: Page 1
# We can even add meta tags to the page! This sets the keywords meta tag.
# <meta name="keywords" content="my SEO keywords"/>
meta:
  - name: keywords
  - content: my SEO keywords
---

# This is Page 1

...
ページ-2.md
---
title: Page 2
---

# This is Page 2

...

これで、リンクはThis is Page ...ではなくPage 1とPage 2と表示されるはずです。

これがフロントマターメタデータの完全なリストです。

サイドバーの追加

フォワード/ネクストリンクでナビゲートするのはちょっと不便ですね。 また、ページが少し乱れているようです。 これらの両方の問題を解決できるサイドバーなどがあればいいのではないでしょうか。

VuePressのデフォルトのテーマには強力なサイドバーのサポートが付属していますが、それを有効にするには、単純な構成ファイルを作成する必要があります。

先に進み、プロジェクトディレクトリに.vuepress/config.jsを作成し、サイドバーを有効にします。

.vuepress / config.js
module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/Page 1',
      '/Page 2'
    ]
  }
}

基本的なサイドバーに必要なのはこれだけですが、他にもさまざまな構成オプションがあります。

ナビゲーションバーを有効にする

したがって、ページとサイドバーはありますが、サイトはまだ少し当たり障りのない感じがします。 ナビゲーションバーと検索機能を追加して、物事を整えてみませんか？

.vuepress / config.js
module.exports = {
  title: 'My VuePress Site',

  themeConfig: {
    sidebar: [
      ...
    ],

  }
}

ナビゲーションバーと検索フィールドを作成するために必要なのは、サイトにタイトルを追加することだけです。 便利な話！ また、検索機能はすぐに使用できます。

（もちろん、ナビゲーションバーを構成するためにできることは他にもいくつかあります。）

Vueコンポーネントの使用

物事をワンランク上に上げましょう。 VuePressの真の力は、ページでVueコンポーネントを使用できることにあります。

VueコンポーネントはSSR対応である必要があるため、DOMを変更したり、mounted()フックまたはイベントリスナーの外部でブラウザー専用APIとインターフェースしたりすることはしないでください。

数値をインクリメントおよびデクリメントできるVueコンポーネントを作成しましょう。 （皆さん、ここで本当に重要なことです。）VuePressは、.vuepress/componentsで作成されたVueコンポーネントを自動的に検出するので、先に進んで.vuepress/components/NumberModifier.vueを作成しましょう。

.vuepress / components / NumberModifier.vue
<template>
  <div class="number-modifier">
    <button @click="increment()">+</button>
    <strong> {{value}} </strong>
    <button @click="decrement()">-</button>
  </div>
</template>

<script>
export default {
  props: ['start'],

  // We have to copy the value because we can't use v-model with
  // nothing to bind to.
  // (VuePress doesn't have support for reactive page variables at the moment.)
  data() {
    return {
      value: this.start
    }
  },

  methods: {
    increment() { this.value++ },
    decrement() { this.value-- }
  }
}
</script>

そして、そのように、私たちはそれをどんな投稿でも使うことができます。 たとえば、Page-1.md

ページ-1.md
...
# This is Page 1

**Our Component:**
<NumberModifier :start="5"></NumberModifier>

Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A VuePress post with an embedded Vue component. The sidebar and navbar are enabled.

同じ方法がすべてのコンポーネントに適用されます。 これにより、ドキュメントに沿って作成したコンポーネントをデモンストレーションしたり、より高度なサイトを構築したりするのに最適な方法になります。 それはすべてあなた次第です。

カスタムテーマ

誰もが静的サイトを同じツールで構築された他のすべてのサイトと同じように見せたいとは限らないので、最終的にはカスタマイズを開始したいと思うでしょう。

基本的な変更

デフォルトのテーマは、CSSプリプロセッサとしてStylusを使用します。 色を1つか2つ変更するだけの場合は、.vuepress/override.stylを追加し、その中のいくつかの値を変更することで、それを実現できます。 必要に応じて、CSSオーバーライドをいくつか追加することもできます。

デフォルトのテーマは基本的なものなので、おそらく変更したいのはアクセントカラーだけです。

.vuepress / override.styl
// Color configuration
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

// Layout configuration
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px

新しいテーマを作成する

VuePressでは、テーマはVueコンポーネントと関連アセットの単なるコレクションです。 独自のテーマを使い始めたい場合、最も簡単な方法は、$ vuepress ejectを使用してデフォルトのテーマを取り出すことです。 これは、デフォルトのテーマファイルを.vuepress/themeにコピーするだけです。

デフォルトのテーマを見ると、信じられないほど理解しやすいことがわかります。 25ファイル未満で、1個あたりの平均行数は約70行です。 基本的に定型文はありません。

すぐにテーマのカスタマイズを開始できます。 コンポーネントは、サイトの他の部分と同じようにホットリロードされます。 カスタムテーマの詳細については、docsをご覧ください。

結論

VuePressはまだ始まったばかりで、私はすでにそれが素晴らしく見えると言うことができます。 すぐに何かを構築する予定がない場合でも、公式ドキュメントに注目してください。 物事はここから良くなるだけです。