a-blog cms サンプルサイト

バンドル環境の使い方

インストール

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

$ npm install

設定

テーマ名（デフォルト: develop）を変更した場合は、package.json の config.theme を変更してください。
もし、LiveReload を行う場合は、実行しているローカル環境のアドレスに合わせて config.local に ドメイン を設定してください。

"config": {
  "local": "localhost",
  "theme": "テーマ名"
},

ビルドコマンド

本番用ビルド

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

$ npm run build

開発用ビルド

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

Watchのみ

$ npm run dev

LiveReloadを行う場合

$ npm run start

JavaScriptの読み込みについて

JavaScriptは、include/head/js.html で読んでいます。
標準では以下の記述により組み込みJSを読み込むようにしています。

<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

組み込みJSを使わない場合

もしパフォーマンス向上のために、組み込みJSを外す場合は、Touch_SessionWithContributionを使って、投稿者以上以上の場合だけ読み込むようにします。

<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<!-- END_MODULE Touch_SessionWithContribution -->

組み込みJSを読まないようにすると、スライダーや、画像ビューワーなどすべての組み込みJSが動作しなくなりますのでご注意ください。
必要な機能やライブラリは、自分でインストール、実装する必要があります。
バンドル環境が整っていますので、 npm経由でライブラリをもってきて、 importする方式をお勧めします。以下 lazy load を実装する例になります。

$ npm i vanilla-lazyload

import LazyLoad from 'vanilla-lazyload';

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

スタイル（CSS）の読み込みについて

カスタムスタイルは、include/head/preload.html で読んでいます。
以下記述のように preload 属性を使って読み込むようにしており、非同期でスタイルを読み込んでいます。

<link rel="preload" href="/dest/bundle.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/dest/bundle.css"></noscript>

Above the fold（ファーストビュー）に含まれる CSS のインライン化

preload属性を使って、非同期にスタイルを読むようにしたことで、スタイル読み込みでブロックされずレンダリングが速くなりました。
ただその影響で、スタイルが当たっていないHTMLが一瞬表示されるようになってしまいます。これを解決するために、Above the fold（ファーストビュー）のCSSをインライン化して読み込む方法を以下に示します。

ファーストビューのスタイルが完成したら、themes/develop/src/index.html に現在のソース貼り付けます。（ブラウザで表示したときのソースを貼り付ける）
npm run build コマンドを実行します。
ビルドコマンドを実行すると、themes/develop/dest/index.html にファイルができます。
dest/index.html にインラインCSSが書き出されているので、このCSSを、include/head/preload.html に設置します。

<style>
<!-- ファーストビュー（above the fold ）のインラインCSS を挿入。インラインCSSは webpackでbuildすると、dest/index.html に生成される。 -->
</style>

アイコン（fontawesome5）の使い方

アイコンの利用を考え、developテーマでは、Font Awesome 5 の SVG with JavaScript が利用できるようになっています。

使い方

themes/develop/src/fonts.js をカスタマイズしていきます。

アイコンのインポート

SVG with JavaScript では必要なアイコンのみインポートして利用します。
アイコンの種類により、インポートするパッケージが違うので気をつけてください。例えばブランドアイコン系は、@fortawesome/free-brands-svg-icons から読み込みます。

import { faUser, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';

命名規則はクラス名（ケバブケース）をキャメルケースにしたものになります。

例: <i class="fas fa-sign-out-alt"></i> のアイコンを使いたい場合は、 faSignOutAlt を読み込む。

import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';

アイコンの登録

インポートしたアイコンを以下のように使用できるように登録します。使用するアイコン全てを指定します。

library.add(faUser, faSignOutAlt, faFacebook, faTwitter, faInstagram);

アイコンの表示

あとは、以下のようにアイコンを表示させることができます。

<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fas fa-sign-out-alt"></i>