# VuePressメモ. 06. カスタムコンポーネント

# もともと入っているサンプルコード

  • サンプルとして 3 つ入っている
    • 単一ファイルコンポーネント (Single File Component : SFC) の形をしている
  • Markdown ファイルから、カスタムタグとして使える
    • (そもそも Markdown 内で HTML そのまま書ける事もわかってなかった)
ファイル名 Markdown ファイル内で使うとき
Foo/Bar.vue <Foo-Bar>
demo-component.vue demo-component, DemoComponent
OtherComponent.vue other-component, OtherComponent

# 試しに作ってみた

# 感想

  • カスタムタグで「Markdownにちょっと足し」みたいなことが気軽にできる
  • 「HTMLは書きたくないが、Markdownは表現が限定されすぎる」という悩みを解決している
  • そして、たぶんこのぐらいの情報で、作るのに困らないような気がする

# 要件

スクリーンショット画像を載せる用のカスタムタグ

  • スタイル
    • Markdown の画像だけだと柔軟に設定できない部分を
    • 横幅 max 400px ぐらいに制限する
    • 背景白に白い画面を貼ると境界線が分からないので、影をつけたい
    • 真ん中に寄せたい
  • ファイル名指定
    • 親ディレクトリを毎回入れるのが煩雑なので、画像ファイル名だけ指定したい
  • 設定
    • 親ディレクトリのパスは config.js に書きたい
      • ← アフィリエイト用コンポーネントを作るときなども、IDを こういう出し方すれば良さそう
  • 画像のディレクトリ構成
    • せっかくなので locale 毎 (/ja/, /en/) のディレクトリに画像を配置したい
    • /img/screenshots
      • /en/sample1.png
      • /ja/sample1.png

# 呼び出し側 (*.md ファイル)

  • ポイント
    • md ファイルには HTML タグがそのまま書ける
    • ということは Vue カスタムタグもそのまま書ける
    • ここで渡す attribute は コンポーネント側では props という
<Screenshot file="sample1.png">

# 設定ファイル (config..js)

  • ポイント
    • themeConfig の下に定義すると、コンポーネントからは this.$themeConfig で参照できる
    • これが推奨すべきやり方なのかは知らない
module.exports = {
  themeConfig: {
    ..
    myComponents: {
      screenShot: {
        basePath: '/img/screenshots'
      }
    },
    ...

# カスタムコンポーネント (.vuepress/components/*.vue ファイル)

TypeScript の記法でしか書いたことがなかったので、生で書くのは新鮮。
この機会にちゃんと覚えたいように思う。

Screenshot.vue

  • ポイント
    • <template>
      • :src="src" これは attribute にバインディングしてる
      • これは文字列として展開
    • <script>
      • computed: : Computed Property (getterのこと)
    • <style>
      • index.style とかに外だしにしても良いが、ここ固有のはここに書くのが収まりが良い
    • その他
      • locale のパスは this.$localePath で取れる
<template>
  <p class="screenshot">
    <img class="screenshot" :src="src" />
    {{ src }}
  </p>
</template>

<script>
  export default {
    props: ['file'],
    data() {
      return {
      }
    },
    computed: {
      src: function () {
        return this.$themeConfig.myComponents.screenShot.basePath + this.$localePath + this.file;
      }
    },
    mounted() {
      // console.log(this.$localePath); // for debug
    }
  }
</script>

<style scoped>
p.screenshot {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
img.screenshot {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
    max-width: 300px;
}
</style>

# カスタムコンポーネントから config.js 内の設定にアクセス

項目 意味 例 or メモ
this.$site config.js 直下の設定 base, title, ..
this.locale ロケールの名前? ja/
this.localePath ロケールのパス /ja/
this.$localeConfig.lang ロケールの言語 ja-JP
this.$page.frontmatter.footer 先頭の --- で囲われた部分の設定 heroimage, title, tagline, footer
this.$themeConfig.XXX.XXX themeConfig に設定したカスタムの設定値 ※1
this.$themeLocaleConfig.XXX themeConfig.locales 内の設定+カスタムの設定値 ※2
  • ※1. 正しい使い方かは不明
  • ※2. $themeLocaleConfig は、言語ごとに文言やURLが変わるものを設定したい場合に使う

    [ 📩 ご意見 ]