VuePressをカスタマイズしてブログを自作｜Markdown編

前回は当サイトの構成について書きました。
今回はvuepressのMarkdownにフォーカスを当てます。

config

config.jsで設定する箇所があるので設定します。

markdown: {
  extendMarkdown: md => {
    md.set({ breaks: true })
  }
},

これはエディタで改行すると<br>タグに変換する設定です。

Markdown

Component

vuepressはMarkdownファイルの中にvueコンポーネントを導入できます。
記入方法はvueファイル内と全く同じで以下のように記述すれば表示できます。
目次やフッターなどは繰り返して使用してるので、Componentを利用しています。

<Component名 />

Slots

Markdownでcssを操作したいときは、名前付きスロットを利用してます。

::: 表示タイプ タイトル名
中はMarkdown形式で記述出来ます。
:::

上のように記述すれば
以下のように複数の表現を用意したオリジナルのcssを当てることができます。

タイトル名

中はMarkdown形式で記述出来ます。

表示タイプはindex.js内で設定します。

src   
└─ .vuepress
   └─ theme
      └─ index.js

containerオブジェクトで各表示タイプを設定できます。
typeは表示タイプ名、defaultTitleは未入力時のタイトル名を設定できます。
'/'は言語設定が出来ます。当サイトはデフォルトが日本語なので / でOKです。

module.exports = (options, ctx) => {
  return {
    plugins: [
      ['container', {
        type: 'type名',
        defaultTitle: {
          '/': 'デフォルトタイトル名',
        }
      }],
    ]
  }
}

cssはcustom-blocks.stylで管理しています。

src   
└─ .vuepress
   └─ theme
      └─ styles
         └─ custom-blocks.styl

内部にはデフォルトでtip、warning、dangerが設定されてます。
index.jsで設定した表示タイプ名でcssを作成します。

  &.tip
  &.warning
  &.danger

frontmatter

frontmatterは主に該当ページの情報を設定できます。

title: 【使い方】VuePress/plugin-blogを使用してブログを自作｜Markdown編
date: 2021-03-02
category:
  - skill
tag: 
  - VuePress
image: {{Path}}
location: japan

tagはfrontmattersで登録した名前を設定すると$tagや$currentTagに情報が追加・表示されていきます。
categoryはfrontmattersで登録していませんが、分類を仕分けするために設定してます。
imageはサムネ用の画像を設定しています。