ブログをnuxt/contentsに移行した

このブログサイトを Azure Static Web Apps から NuxtHub に移動して、コールドスタートの待ちレスポンスはかなり改善しました。 しかし、ページの移動時など正直、快適とは言えないもたつきを感じます。 NuxtHubの検証を行ってみて、CloudFlareのD1データベースの感触も良かったので、ブログデータの移行を決断しました。 当初、DB2DBの移行で考えていましたが、せっかくなので、学習を兼ねてNuxt/Contentsを試しました。 良くなると予想はできましたが、劇的に改善されたと思います。CosmosDBともここでお別れです。

Nuxt/Contents V3は、.mdファイルの内容を一旦DBに取込み保存します。 なので、直接そのDBに、DB2DBで、エクスポート>インポートできるんじぇね?と考えました。 しかし、Nuxt/ContentsのDBは、あくまで/contentsフォルダの影でしかありません。 たとえ直接インポートが一瞬成功したとしても、対応ファイルのないレコードはすぐに消えてしまうでしょう。 面倒ですが、エクスポートしたデータは一旦、.mdファイルに変換してかかる必要があります。 というか、ファイルの作成がコンテンツDBを更新する唯一の手段です。 これはどうゆうことかというと、今まで利用していた投稿フォームもいらなくなるということです。 そのためのログインも必要ありません。 ずいぶん勿体ない気もしますが、これは断捨離、減らすのは悪いことではないでしょう。たぶん;

AIが変換コードを教えてくれるので、データ移行も思った以上に順調にできました。 component側のコードも、Nuxt/Contentsに合わせて書き換える必要がありますが、思った以上に順調でした。 server側にapiを追加する必要もありません。queryCollectionで必要なデータは全て取得できます。

もっとも悩むのが、スタイルの問題でしょう。 <ContentRenderer>が出力するHTMLに、スタイルは何もついていません。 コードブロックに背景色がありません、これはいけませんTT
Nuxt/Contentsのドキュメントに、このことについての説明は特にありません。 コードブロックのsyntaxハイライトは、内部的にShikiを利用していて、Nuxt/Contentsの設定で、Shikiのテーマを指定することができます。 Shikiのテーマは、文字のフロントカラーのセットで、表示に適した背景色があるはずですが、それを準備するのはコンテナ側になるようです。 感心の分離原則に従えば、もちろんNuxt/Contentsにこれらを説明する責任はありません。しかし、やはり戸惑います; ProseComponentについての説明はありますが、そのソースコード自体は、Nuxt/Contents所有ではありません。

もしTailwindでNuxt/Contentsの場合は、/components/content/ProsePre.vueのカスタマイズが必要になると思います。 というか、ほぼ全てのProseComponentで、スタイルのカスタマイズが必要になるでしょう。 というか、Nuxt/Contentsを導入するサイトで、Tailwindを採用しているのが間違いなのかもしれません。 という説明までしようがないですよね;

登録:2025-05-25 19:53
by nasu38yen
Copyright (C) 2014 スタジオピース