🐸

vuepress でリンクの url に frontmatter を混ぜる

2021/08/25に公開

なにがしたいのか

同じ単語の複数の辞書へのリンクみたいなページを作る時に

大概の辞書って検索 URL にパラメタで単語を渡す感じの API なので

frontmatter で単語を宣言して

---
pv: get in
---

あとは {{$frontmatter.pv}} とかで使い回せれば楽です

ところが

実際にやってみると、こんなリンクで

  • [英辞郎](https://eow.alc.co.jp/search?q={{$frontmatter.pv}})

一見、いい感じに見えるのですが

全然だめでした

正解

md を諦めて a タグ と v-bind を使って

- <a :href='"https://eow.alc.co.jp/search?q="+$frontmatter.pv' target="_blank" rel="noopener noreferrer">英辞郎</a>

これだとうまくいくようでした

Discussion