developテーマ使い方ガイド
公開日：
更新日：
CMS Ver. 3.2 より、新しい公式テーマ「develop」が追加されました。このテーマは、現代的なWeb開発のスタイルに合わせて設計されており、拡張・カスタマイズのベースとしても最適です。
採用技術・特徴
Twigテンプレートによる実装
Viteによる高速ビルド
Tailwind CSS によるスタイル実装
htmx による部分的なインタラクション
Prettierによるコード整形
V2モジュールについて
新しく追加された、V2モジュールは twigテンプレートのみで使用できるモジュールです。 twigテンプレートによるテーマ実装では、基本的に V2モジュールを使って実装していきます。
V2モジュールのスニペット
管理者でログインしている状態で Ctl + K （⌘K） を押すことで、クイックサーチ機能が開きます。ここで ;v2 と入力することにより、V2モジュールのスニペット一覧を表示できます。
V2モジュールの変数表の見方
V2モジュールでは、変数表が用意されていません。代わりにテンプレートでモジュールを読み込んだ状態で、クイックサーチから利用できる変数を確認できるようになっています。
モジュールの記述例
{% set blogField = module('V2_Blog_Field', null, { bid: RBID }) %}管理者でログインしている状態で Ctl + K （⌘K） を押すことで、クイックサーチ機能が開きます。
この時 デバックモード状態 であれば # を入力することで、読み込んでいる V２モジュールの変数表を表示することができます。
バンドル環境の使い方
インストール
themes/develop に移動して、下記のコマンドを実行します。実行することでビルドに必要なツールなどがインストールされます。
$ npm install本番用ビルド
cssのbuildとjsのbuildを行います。 納品時にはこのコマンドを実行して納品してください。 JavaScriptが productionビルド となります。
$ npm run build開発用ビルド
以下のコマンドを実行すると、cssとjsの変更をwatchしてビルドを行います。スムーズにビルド・確認ができるため、開発中はこちらのコマンドをご利用ください。
$ npm run dev組み込みJSについて
JavaScriptは include/head/js.twig で読んでいます。developテーマではパフォーマンス向上のために、Touch_SessionWithContributionを使って、投稿者以上の場合だけ読み込むようにしています。
{% if touch('Touch_SessionWithContribution') %}
<script src="jquery-.min.js" charset="UTF-8"></script>
<script src="acms.js" charset="UTF-8" id="acms-js"></script>
{% endif %}組み込みJSを読まないようにすると、スライダーや、画像ビューワーなどの組み込みJSが動作しなくなりますが、一部のよく利用する組み込みJSを src/js/lib/buildIn/ に実装しsrc/js/main.js で読み込んでいます。
import {
// 組み込みJS
} from './lib/buildIn/';これ以外に必要な機能やライブラリは、自分でインストール、実装する必要があります。
バンドル環境が整っていますので、 npm経由でライブラリをもってきて、 importする方式をお勧めします。以下 lazy load を実装する例になります。
$ npm i vanilla-lazyloadimport LazyLoad from 'vanilla-lazyload';
domContentLoaded(() => {
new LazyLoad({elements_selector: '.js-lazy-load'});
});