Vuepress

Vuepress は単なる Markdown 記法のテキストを HTML に変換するだけのフレームワークだと思っていたのですが、よく考えれば Vue なので Vue コンポーネントも利用できるわけです。

Vue はもう半年以上触っていなくてどんなものか忘れてしまっていたのですが、せっかくなのでこの機会に思い出してみることにしました。

Vue コンポーネント

まずは Vue コンポーネントを作成します。

Vue コンポーネントは HTML, CSS, Javascript の三つが混ざったようなものです。以下が Vue コンポーネントのテンプレートです。

1
<template></template>
2

3
<script>
4
export default {
5
  data() {
6
    return {};
7
  },
8
};
9
</script>
10

11
<style></style>

Template

HTML っぽいものを書きます。ここは親の属性が一つだけである必要があるので注意しましょう。

例えば以下のものは親が<div></div>なのでこの条件を満たしています。

1
<template>
2
  <div>
3
    <p>Hello, World!</p>
4
  </div>
5
</template>

Script

Javascript のコードを書きます。変数に値を代入したりとか、そういうことができます。

例えばmessageという変数にHello, World!という文字列を代入するコードは次のように書けます。

1
<script>
2
export default {
3
  data() {
4
    return {
5
      message: "Hello, World!",
6
    };
7
  },
8
};
9
</script>

CSS

見た目を装飾します。

CSS の他にも SCSS とか SASS とかが使えます。

1
<style>
2
p {
3
  color: red;
4
}
5
</style>

組み合わせてみる

Vue で変数を HTML に反映させるには{{}}でかこむ必要があります。

1
<template>
2
  <p class="color-red">{{ message }}</p>
3
</template>
4

5
<script>
6
export default {
7
  data() {
8
    return {
9
      message: "Hello, World!",
10
    };
11
  },
12
};
13
</script>
14

15
<style>
16
.color-red {
17
  color: red;
18
}
19
</style>

というわけで、単にHello, World!と出力するだけのコンポーネントであればこのように書けます。

コンポーネントの登録

あとはこのコンポーネントを Markdown から呼び出せるようにする必要があります。

Vuepress では.vuepress/components/********.vueという風にコンポーネントを配置すれば勝手に認識してくれます。

ただし、このままではコンポーネントは登録できても呼び出せないので、呼び出せるようにコンポーネントに名前をつけておきます。

1
<template>
2
  <p class="color-red">{{ message }}</p>
3
</template>
4

5
<script>
6
export default {
7
  name: "HelloWorld", // 命名
8
  data() {
9
    return {
10
      message: "Hello, World!",
11
    };
12
  },
13
};
14
</script>
15

16
<style>
17
.color-red {
18
  color: red;
19
}
20
</style>

こうすれば Markdown 中に、<HelloWorld/>と書けば赤い字でそれが表示されます。

引数を受け取るコンポーネント

さて、簡単なコンポーネントは表示できましたが Markdown からコンポーネントに対して引数を与えたい場合もあります。

例えば、指定したメッセージを表示するようなコンポーネントを考えます。

Vue コンポーネントのコンストラクタでは直接引数を指定できないので、frontmatterの機能を利用します。

Vuepress で記事を書いているのであれば Frontmatter でtagsなどの指定をしていると思います。そこに値を書き込むことで無理やり読み込ませられます。

1
---
2
tags: ["Vue"]
3
authors: ['tkgstrator']
4
message: "Hello, Tkgling!"
5
---

次に Vue コンポーネントを以下のように書き換えます。

1
<template>
2
  <p class="color-red">{{ $page.frontmatter.message }}</p>
3
</template>
4

5
<script>
6
export default {
7
  name: "HelloWorld",
8
  data() {
9
    return {};
10
  },
11
};
12
</script>
13

14
<style>
15
.color-red {
16
  color: red;
17
}
18
</style>

1
<template>
2
  <script>
3
    console.log("{{ $page.frontmatter.message }}");
4
  </script>
5
</template>
6

7
<script>
8
export default {
9
  name: "HelloWorld",
10
  data() {
11
    return {};
12
  },
13
};
14
</script>
15

16
<style></style>