読み込みが必要なJavascriptファイル
スニペット
通常以下の２行のコードを読み込む事により、a-blog cmsでJavaScriptが動作するようになります。
acms.js は 必ず <head></head> 内で読み込むようにしてください。
<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 -->a-blog cms の表示、動作に関するファイル「acms.js」
a-blog cmsでは、ページの表示に関する様々な機能を記述したJavascriptファイル「acms.js」があります。a-blog cms のテンプレートファイルでは、このacms.js を読みこむ必要があります。 acms.js は 必ず <head></head> 内で読み込むようにしてください。
※Ver.2.5以降から「index.js」→「acms.js」にファイル名が変更になりました
acms.js 読み込みの記述
<!-- BEGIN_MODULE Js --><script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->index.js 読み込みの記述 ※Ver.2.5以前の記述です
<!-- BEGIN_MODULE Js --><script src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->jQuery の読み込みについて
jQuery はa-blog cms に標準で組み込まれています。前述のacms.js （Ver.2.5以前ではindex.js）内で必要に応じて読み込みます。a-blog cmsが標準で使用しているバージョンが書いてあるのは、config.system.default.yamlです。
jquery_version: 3.5.1 # (3.5.1|3.4.1|2.2.3|2.1.1|2.0.3|1.12.3|1.11.1|1.10.1|1.9.1|1.8.3|1.7.2|1.6.4) 2.xはIE9〜
ただし、外部のjQueryのプラグインを使用する場合や、独自のJavaScriptファイルを読み込む場合は、以下のようにacms.jsの前にjQuery本体を読み込む必要があります。acms.jsの後でjQueryを読み込むと、jQueryがバッティングし正常に動作しないことがありますのでご注意ください。
<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 -->
<script src="/js/site.js" charset="UTF-8"></script>
<script src="/js/main.js" charset="UTF-8"></script>(非推奨) 以前のJavaScriptファイルの読み込みについて
Ver. 2.5.0 で javascriptの読み込みが非同期になったことにより、以下のようなJavaScriptファイルの読み込み方法がありました。しかし現状では、上記にあるように acms.jsの前にjQueryを読み込む方法を推奨しています。
<!-- BEGIN_MODULE Js --><script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script>
ACMS.Ready(function() {
new ACMS.SyncLoader()
.next('%{HTTP_THEMES_DIR}site2015/js/site.js')
.next('%{HTTP_THEMES_DIR}site2015/js/main.js')
.load();
});
</script>組み込みJSについて
a-blog cmsには、標準でJavaScriptが組み込まれています（組み込みJSと呼んでいます）
組み込みJSでは自分でJavaScriptを書かなくてもいいようにすでに様々な便利な機能が用意されています。
ここでは、その組み込みJSの設定変更の方法について紹介します。各機能の詳細については下記のリファレンスを参照してください。
https://developer.a-blogcms.jp/reference/latest/builtinjs/index.html
各種ライブラリの使用と設定について
各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js に記載しています。 CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。 設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js を作成し、必要な値を上書きするようにします。 直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。
テンプレートごとに組み込みJSの設定を変更する
またconfig.jsで値を上書きしなくても、別のscriptファイルやHTMLファイルで設定を変更することができます。 Ver. 2.5.0以上のバージョンを使用されている方はacms.jsが非同期的にJavaScriptを読み込み実行しますのでconfig.jsが読み込まれたことを保証するACMS.Ready(function(){});の中に設定項目を記述するようにしてください。
ACMS.Ready(function() {
//例）検索キーワードのハイライトを適用するセレクタ要素を追加する場合
ACMS.Config.searchKeywordHighlightMark = '.entryTitle, .search .summary, .selectKeyword';
//例）絵文字の設定を配列で複数設定する場合
ACMS.Config.emoArray = [
{
'mark' : 'textarea.js-emoditorEmoji',
'toolbar' : [['Emoji']],
'config' : {
enterMode : 1,
language : 'ja'
}
},
{
'mark' : 'textarea.js-emoditorColor',
'toolbar' : [['TextColor','BGColor']],
'config' : {
enterMode : 1,
language : 'ja'
}
}
];
});実行順序
テンプレートファイル上での実行順序
テンプレートエンジンの実行順序は以下のようになります。
- グローバル変数を解決
- インクルード処理を解決
- setTemplateを処理（テンプレートの変数化）
- getTemplateを解決（変数の挿入）
- タッチモジュールを解決（デフォルトON）
- モジュール類を内側から解決（同じ階層の場合は下から）
- IFブロックを解決
- setRenderedを処理（解決済テンプレートを変数化）
- getRenderedを解決（変数の挿入）
テンプレートの実行順序を頭に入れておく事はテンプレートを作成していく上で非常に重要になってきます。
例えば、インクルード文を書くときに、グローバル変数を使ったパスで指定するテクニックがあります。
今 @include("/admin/entry/category%{CID}.html")
旧 <!--#include file='/admin/entry/category%{CID}.html'-->上のコードは、正常に動きますが、これはグロバール変数が解決された後にインクルードが動くためです。
下のコードをご覧ください。
<!-- BEGIN_MODULE Blog_ChildList -->
<ul><!-- BEGIN blog:loop -->
<li><a href="{url}">{name}</a></li>
@include("/admin/entry/categoryblog_{bid}.html")<!-- END blog:loop -->
</ul>
<!-- END_MODULE Blog_ChildList -->ここでは、ブログリストでブログ毎にインクルードをしてこようとしていますが、{bid} はモジュールの変数なのでインクルード文より後で解決されます。
つまり、インクルード文が実行される段階では"blog_{bid}"というファイルを探しにいってしまい、うまく動作しません。