テスト

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="{{ JS_LIB_JQUERY_DIR }}jquery-{{JS_LIB_JQUERY_DIR_VERSION}}.min.js" charset="UTF-8"></script>
<script src="{{ ROOT_DIR }}acms.js{{ js.arguments }}" 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-lazyload

import LazyLoad from 'vanilla-lazyload';

domContentLoaded(() => {
  new LazyLoad({elements_selector: '.js-lazy-load'});
});

お知らせ