daisyUI の a-blog cms テーマを github に公開

---

まだ、完成ではないが daisyUI の a-blog cms テーマを github に公開してみました。テーマだけではなく、サンプルデータと設定も用意したので簡単にインストールもできるようになっていますので、よかったらお試しください。

https://github.com/kazumich/daisyui

daisyUI とは

Tailwind css を利用した コンポーネントライブラリ で、Tailwind css 版の Bootstrap みたいなものです。.btn、.card のようなクラスがある程度定義されていて便利に使えます。daisyUI で足りない部分や改良したい部分を Tailwind css のクラスを追記していくことが可能になります。

https://daisyui.com/

daisyUI テーマで新規インストール

専用の簡単セットアップを用意しましたので、以下の setup.zip をダウンロードし解凍した中にある setup.php を設置先にアップロードし、ブラウザからアクセスすることで a-blog cms と daisyUIテーマのインストーラーがセットアップされます。

• https://kazumich.com/download/setup.zip

テーマのカスタマイズ

テーマのカスタマイズには、Tailwind CLI の環境が必要になります。 「エンジニアじゃなくても MAMP と Tailwind CLI を活用できるようにしてみよう」も参考にしてみてください。

上記の参考の記事に加え daisyui を使えるようにする必要があります。

どこでインストールするかですが、私は MAMP のドキュメントルートを変更して使っているので、以下の場所にしています。

cd /Users/kazumich/MAMP/

そして、以下のコマンドを実行します。

npm install -D tailwindcss @tailwindcss/cli @tailwindcss/typography daisyui

Tailwind CLI を実行するには

cd /Users/kazumich/MAMP/daisyUI/themes/daisyui

テーマディレクトリのところに移動し

npx @tailwindcss/cli -i ./src/base.css -o ./src/style.css --watch

としたら、準備完了です。

./src/style.css を削除して、実行すると style.css 作られ正しく動作しているか確認ができますので、お試しください。

デモ環境

https://ablogcms.sakuraweb.com/

実装状態の紹介

extends機能を利用したテーマになっていますが、not_extendsフォルダの中に extends機能実装前のファイルが置いてあります。 あとは、staticフォルダには、静的なHTMLでファイルが色々用意してあり、一旦静的なHTMLで作ってみてから CMS 化していることから、static の中が最新である可能性も高いです。

テーマはコンテンツが入ってないと確認がしづらいので、20件サンプルデータが入っています。必要無い場合には削除ください。

View Transitions API も使って一覧から詳細ページへの遷移の際にメイン画像がズームするアニメーションが入っています。

ダークモードの切り替えができるようにしてあります。

トップ・一覧・詳細・年間カレンダー・お問い合わせフォーム が用意してあります。（今のところフォームは動くところまで実装してない）

この後は、htmx 対応なんかもやってみたいところです。