概要

Nuxt Content3では、以下のような形でコンポーネント名を指定することで、Markdownファイルから/components/content/内の任意のコンポーネントを呼び出して描画したり、ドキュメントに列挙されているProseXXXのようなProseコンポーネントと同じ名前のコンポーネントを自作することで、そのデザインを上書きしたりすることができます。

::ComponentName
Hello
::

Nuxt Content公式ドキュメントを元にいくつかコンポーネントを自作/改変してみたので、この記事はそれらの紹介と適当に遊んでみた雑記のようなものになります。ただ中身はNuxt Contentを使う人(≒開発者)以外興味がないような内容なので、カテゴリは技術系で。

紹介

一旦使いそうなものを2つ作ってみたのでそれを適当に紹介します。

アラート

Github: ソース

弊ブログは雑記だけではなく、一部技術系の超簡易化したチュートリアルであるとか、自分で適当に遊んだ技術ログみたいな記事も投稿しています。そこで問題になるのが最終更新日です。

情報系のあれこれって、バージョンが1つ上がるだけでも中身がかなり変わったりします。微細な変更ならまだしも、記事最終更新日から読者が記事を見た時までの間に、いわゆる破壊的変更が含まれるような更新が為されていると、記事内のチュートリアルをなぞってもエラーが出るなんてざらです。

読者に無駄な期待を抱かせないためにも、最終更新からそこそこ期間が空いていたり、あるいはバージョンアップが入って前のやり方ではダメになっているのが判明している記事なんかに、このアラートをつけて「動きませんよ！気付いて！」とでかでか主張するのが良いなと考え作りました。

ギャラリー

Github: ソース

Workの方で制作物の画像のあれこれをギャラリーとして表示できたらいいなと思って作ってみました。

::Gallery{:images='['/path/to/images', '/path/to/images2']'}
::

上のように、:imagesに画像のパスを入れてあげることで横スライド式のギャラリーを呼び出せます。クリックで画像遷移するまではオートで画像が切り替わるように設定していたり。自己満で書いているブログならともかく、制作物紹介記事で画像を何枚も何枚もペタペタ貼り付けていたら流石に鬱陶しくて読むのをやめられてしまいそうだなと考えて作りました。

横スライド時の画像の端とかまでしっかり見ている人なら気付いてしまったかと思うんですが、このギャラリーコンポーネント、次の画像に移る際に角のroundend（CSS）がとれてしまうという結構デカめの不具合があります。これ、いろいろ頑張って直そうとしたんですがどうしても治らず……。治し方知ってる人がいたらぜひ教えてください。絶賛困り中です。

↑治しました（11/19追記）

結論から言うと、Proseのデフォルトで設定されている画像上下のマージンをclass="m-0!"で上書きしたりして、画像が入ってるコンテナと画像の位置をぴったり揃え、画像ではなくコンテナ側にrounded-lgを付けてあげればOKでした。

箱を角丸の形にして、そこに画像をはめ込むみたいなイメージですね。協力してくれたフォロワーと、Gemini 3 Proくんありがとうございました。

画像

Github: ソース

![alt](/path/to/image)

Markdownで使われる上のような画像の呼び出し、Content3ではProseImgが担当しています。本来ならaltの部分は画像のaltとして使われ表示されないのですが、元々使っていたHugo製ブログでは画像下につけられる一言コメントのような感じで機能していました。僕はその一言コメントを、「本文に書くほどではないけど、写真で見て欲しいポイントとか感想を書く場所」としてかなり使っていたので、こちらのブログでも実装しました。写真をただペタペタ貼るだけじゃなくて、下にコメントみたいなのがあると読んでいて楽しいし、僕はそっちの方が好きです。

インラインコード

/image/blog/aaaaaa

Github: ソース

こちら、Markdownを使ったことある人なら「君のブログのインラインコードなんか変わってるとこある？」とお思いになられたことでしょう。その疑問は正解で、何故か僕の環境でうまく動かなかったものを通常の挙動に戻しただけなんですよね。カスタムと言えるのかは若干怪しいですが、備忘録的な感じで残しておきます。

ブログを作り終わっていざ記事を移植してちゃんとレンダリングされてるか確認するぞ！となったとき、「`」で囲って動作するはずのインラインコードがなぜか動作していないことに気付きました。

`aaaa`

Markdownでは上のように記述しているのに、レンダリングされたものはバッククォートで囲われた文字だけ（背景色すらついてない）で、頭を抱えた記憶があります。で、開発者モードで確認したりなんやかんやした結果、なんで動かないのか原因はさっぱりわかりませんでした。しかし、力技で解決する方法はわかったので、それで解決したという感じです。

具体的には、囲われた中身の文字列に背景色をつけました。また、なぜかレンダリングされているバッククォートは、開発者モードでHTMLとスタイルを確認したところ ::beforeと::afterという扱いになっていることが分かりました。となればやることは簡単で、コンポーネント内のCSSで以下のように無効にする旨書いてあげました。結果、今皆さんがご覧になっている通常のインラインコードになったというわけです。

code::before,
code::after {
  content: none !important;
}

この症状、調べても全く同じ状況の人が出てこない上にissueにも載っていなかったので恐らく僕の環境のなんらかが悪さをしているんだと思いますが、原因特定できるほどの能力がないので一旦コンポーネント上書きのゴリ押しで勘弁してもらうことにしました。ただ、これを解決する過程でContentコンポーネントの上書きの概念を学んだので、きっかけをくれたという点でこの不具合には感謝しないといけないかもしれません。

おわり

解説なんかも軽く書こうかなと思ったんですが、ドキュメントとソース読めばなんとかなるような内容なので紹介だけにしておこうと思います。以前までのHugoのブログでも一応色々カスタムはできたんですが、Markdownから直接何か呼べるというのはなかったのでとても新鮮で楽しいです。

正直今回の4つ以上に自分需要が高いコンポーネントのアイデアも思いつかないので、これ以降は必要になったら作るという感じになると思いますが、こういった便利機能の存在って知っているだけでラッキーな気分になれて好き。色々自分でデザインをカスタムできるっていうのも良いですよね。参考になったと思ってくれた方は良ければ下のいいねボタン押してください。僕が喜びます。ではまた次回👋