コンテンツの読み込みに時間がかかっています
daisyUI の a-blog cms テーマを github に公開
NEW
まだ、完成ではないが daisyUI の a-blog cms テーマを github に公開してみました。テーマだけではなく、サンプルデータと設定も用意したので簡単にインストールもできるようになっていますので、よかったらお試しください。
https://github.com/kazumich/daisyui
daisyUI とは
Tailwind css を利用した コンポーネントライブラリ で、Tailwind css 版の Bootstrap みたいなものです。.btn、.card のようなクラスがある程度定義されていて便利に使えます。daisyUI で足りない部分や改良したい部分を Tailwind css のクラスを追記していくことが可能になります。
daisyUI テーマで新規インストール
専用の簡単セットアップを用意しましたので、以下の setup.zip をダウンロードし解凍した中にある setup.php を設置先にアップロードし、ブラウザからアクセスすることで a-blog cms と daisyUIテーマのインストーラーがセットアップされます。
テーマのカスタマイズ
テーマのカスタマイズには、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 対応なんかもやってみたいところです。
