以前、FAQみたいなページをmarkdownで書けるようにしていたけど、
ランタイムでコンパイルするのはやっぱり重いなと思い、
軽量化の一環で前処理にしてみたときの備忘録。
事前にPandocでVueのSFCを生成すればよかった(´ω｀)
インストール
$ brew install pandoc
テンプレートを用意する
こんな感じのファイルを用意する。
$body$にmarkdownで書いたHTMLが挿入される感じ
<!-- ./vue-sfc.vue-->
<template>
<div>$body$</div>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
@Component
export default class extends Vue {}
</script>
Pandocで.vueを生成する
こんなMarkdownファイル(faq.md)を例に。
# よくある質問 / FAQ
## 積読本しか登録してはいけないのですか？
こんな感じで実行すると
$ pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue
# -f ... 入力ファイルのフォーマット
# -t ... 出力のフォーマット
# --template ... テンプレートファイル
こんなファイルが生成されます。
<!-- FaqContent.vue -->
<template>
<div><h1>よくある質問 / FAQ</h1>
<h2>積読本しか登録してはいけないのですか？</h2><div>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
@Component
export default class extends Vue {}
</script>
あとは、このコンポーネント(FaqContent.vue)を表示するページにimportすればOK!
ランタイムでコンパイルしなくても、前処理でいけた(´ω｀)
小ネタ
npm run build時に生成する
手動で実行するのはめんどうなので、package.jsonのscriptsに追加した。
{
"scripts": {
"dev": "npm run build:md && nuxt",
"build": "npm run build:md && nuxt generate",
"build:md": "pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue",
}
}
.md内で別のコンポーネントを使う
別のコンポーネントを使いたいときは、テンプレートに追加しておく。
今回は、vue-tweet-embedを使いたかったので追加。
<template>
<div>$body$</div>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { Tweet } from "vue-tweet-embed";
@Component({ components: { Tweet } })
export default class extends Vue {}
</script>
生のHTMLを表示したいときは、入力フォーマットに+raw_htmlをつけるらしい
$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue
ただ、ちゃんと変換されないことがあるので、sedで置換したりしてる...
$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md | sed 's/<Tweet/<Tweet/g' | sed 's:></Tweet>:></Tweet>:g' > ./FaqContent.vue
Markdownの書き方などで回避できるかもしれないけど、暫定的にこの対応。。
以上!!
こんなのつくってます!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪