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'});
});

この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

見出し２が入ります

この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

見出し３が入ります。

この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

見出し4が入ります。

この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

インライン系のHTMLタグ

この文章はダミーです。太字B。この文章はダミーです。

この文章はダミーです。イタリックI。この文章はダミーです。

この文章はダミーです。取り消し線T。この文章はダミーです。

この文章はダミーです。コード acms-mt-4 この文章はダミーです。

この文章はダミーです。リンク（https://www.appleple.com/）。この文章はダミーです。

テキスト配置

左寄せ短め。

左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。左寄せ長文。

中央寄せ短め。

中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。中央寄せ長文。

右寄せ短め。

右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。右寄せ長文。

リスト表示

• リストが入ります

• リストが入ります

  • リストが入ります

  • リストが入ります

• リストが入ります

1. 番号付きリストが入ります

2. 番号付きリストが入ります

   1. 番号付きリストが入ります

   2. 番号付きリストが入ります

3. 番号付きリストが入ります

引用文

引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。引用文が入ります。

コード

.tag-wrapper {
  margin: 0 0 1.5rem;
}

.tag-title-inline {
  margin: 0 0 1rem;
  font-size: map.get(global.$font-scales, body-m);
}

.tag-box {
  padding: 1rem 0.5rem 0.25rem;
  background: global.$color-gray20;
}

リンクボタン

ファイル

sample.pdf

sample.pdf

テーブル

マルチカラム

テキストがテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。