読み込みが必要な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'
        }
    }
    ];
});