
react-markdownにブログカードを実装する
2022-04-21
2023-01-13
目次(タップして移動)
はじめに
こんにちは。自作ブログ作ってから更新する頻度、高すぎるこふです。
ブログカードをreact-markdown
に埋め込む方法をお伝えします。markdown
をパースしてhtml
にするものであれば、共通の考え方で使えると思います。
以下のような感じです。
どうやるか
具体的なコードと解説をします。コードは抜粋しつつなので、ご自身のコードに組み合わせてください。
ブログにはこのように書いています。
1```link 2https://blog.cohu.dev/new-blog 3```
一般にコードブロックと呼ばれる部分に挿入しています。本来はプログラミング言語ごとのコードを埋め込む場所ですが、代用しています。
1import { articleComponents } from '../articleComponents' 2;<ReactMarkdown children={markdown} components={articleComponents} />
articleComponents
は以下です。
1const customCode: CodeComponent = ({ inline, className, children }) => { 2 const match = /language-(\w+)(:?.+)?/.exec(className || '') 3 const lang = match && match[1] ? match[1] : '' 4 const filename = match && match[2] ? match[2].slice(1) : '' 5 if (lang === 'link') { 6 return ( 7 <iframe 8 className="mx-auto w-full max-w-7xl dark:opacity-80" 9 src={`https://hatenablog-parts.com/embed?url=${children}`} 10 /> 11 ) 12 } 13 // その他のコードブロック処理など・・・ 14} 15export const articleComponents = { 16 code: customCode, 17}
ここでポイントを解説です。
react-markdown
のコードブロックの性質上、className
という変数にバックコーテーション(`)の後ろの文字列が入ります。
その部分に、プログラミング言語とファイル名を代入しています。
例えば、cohu
というプログラミング言語があり、ファイル名がhoge.cohu
だったとすると、以下のようになります。
hoge.cohu1hogehoge
つまり、この文字列を正規表現を使って該当箇所の文字列を持ってくれば良い訳です。 該当箇所が以下のコードです。
1const match = /language-(\w+)(:?.+)?/.exec(className || '') 2const lang = match && match[1] ? match[1] : '' 3const filename = match && match[2] ? match[2].slice(1) : ''
language-
の後ろに言語、コロンの後ろにファイル名を持ってきます。
正規表現の解説は他の記事に任せるとして、必要な説明だけ。
プログラミング言語名は必須としていて、コロンより後ろのファイル名は任意で受付ます。
そうすることで、以下のようにlink
だけ指定した時に、link
という文字列を持ってくることが可能です。
1```link 2https://blog.cohu.dev/new-blog 3```
これでlink
は持ってこれたので、中身を埋め込みます。
1if (lang === 'link') { 2 // use only inner link, why a tag rel is not customed 3 return ( 4 <iframe 5 className="mx-auto w-full max-w-7xl dark:opacity-80" 6 src={`https://hatenablog-parts.com/embed?url=${children}`} 7 /> 8 ) 9}
はてなブログのカードを埋め込むことで実現しています。詳細は後ほど。
css
はtailwind css
を用いていますが、特殊なことは書いていません。
これにより、以下のようなカードを挿入できる訳です。
なぜこの方法でやるの?
実装のコストを考えた上での実装です。
ブログカードを実装するためには、その URL
を辿って meta
タグを取得し埋め込む必要があります。
その肩代わりをしてくれるのが、はてなブログのブログカードです。
ブログカードのメリット
一般に言われているのは、クリック率が上がることです。
ひと目でクリックしたくなりがちです。
しかし、濫用すると場所を取るので、必要最小限にとどめる必要があるとは思います。
他の手段はないの?
ありますが、お金が結構かかってしまいます。
そのため、はてなブログ公式のものが使えなくなったら代替する必要ありです。
おわりに
最後までお読みいただきありがとうございました。
ブログカードを使って記事のクリック率を高めましょう。