Developテーマの使い方

Develop テーマとは、フロントエンドの開発環境が整備された a-blog cms の公式テーマです。

Develop テーマは a-blog cms を開発する際によく使うテンプレートをシンプルにしたものが同梱されており、独自のデザイン・レイアウトでテーマ開発する場合に最適なテーマです。

また、テンプレートは a-blog cms Ver. 3.2 から導入された Twig テンプレートを利用して記述されており、より保守性・再利用性に優れたテーマを開発することができます。

ツールについて

Develop テーマでは次のようなツールを導入してしています。

• Tailwind CSS （ユーティリティファーストCSSフレームワーク）

• Alpine.js （HTMLに直接振る舞いを記述できるようにするJavaScriptフレームワーク）

• htmx （HTML の属性だけで Ajax や部分更新、履歴管理といった高度なインタラクションを実現できる軽量な JavaScript ライブラリ）

• Vite （高速なフロントエンドビルドツール）

また、これらを快適に使用できるように、 EditorConfig、ESLint、Prettier、Stylelint の設定が組み込まれています。

バンドル環境の使い方

インストール

themes/develop/ に移動して、下記のコマンドを実行します。実行することでビルドに必要なツールなどがインストールされます。

$ npm install

npm コマンド自体が存在しない場合、Node.js をインストールすることで npm コマンドが有効になります。Node.js はこちらのサイトからインストールできます。

ビルドコマンド

本番用ビルド

cssのbuildとjsのbuildを行います。 納品時にはこのコマンドを実行して納品してください。 JavaScriptが productionビルド となります。

$ npm run build

また、本番ビルドしたCSSとJavaScriptを利用する場合は a-blog cms 設置ディレクトリの .env ファイルで、VITE_ENVIRONMENT に production を指定します。

# Vite
VITE_ENVIRONMENT=production # development | production

開発用ビルド

以下のコマンドを実行すると、cssとjsの変更をwatchしてビルドを行います。余分なコードが入ったり、最適化されないため納品時には必ず npm run build しましょう。

$ npm run dev

また、開発用にビルドしたCSSとJavaScriptを利用する場合は a-blog cms 設置ディレクトリの .env ファイルで、VITE_ENVIRONMENT に development を指定します。

# Vite
VITE_ENVIRONMENT=development # development | production

Vite 連携について詳しくはドキュメントを御覧ください。

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