組み込みJSについて
a-blog cmsには、標準でJavaScriptが組み込まれています(組み込みJSと呼んでいます)
設定変更の方法について紹介します。各機能の詳細についてはリファレンスを参照してください。
各種ライブラリの使用と設定について
各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js に記載しています。
CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。
設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js を作成し、必要な値を上書きするようにします。
直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。
設定を編集する
使用したいJavaScriptファイルを用意する
適用しているテーマフォルダ内にJavaScriptファイルを入れます。
例)「sample.js」というJavaScriptファイルを使用したい場合
/themes/適用しているテーマ/js/sample.js
テンプレートから参照する
JavaScriptを適用したいテンプレートのhead内に、使用したいJavaScriptファイルを参照するソースコードを記述します。a-blog cms用のJavaScriptファイルの参照コード(「BEGIN_MODULE Js」〜「END_MODULE Js」の部分)より後に記述してください
例)「sample.js」というJSファイルを使用したい場合のhead内の記述
<!-- BEGIN_MODULE Js --><script type="text/javascript" src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js --> <script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>
JavaScriptを編集する
手順1項で作成したJavaScriptファイルに、設定を記述します。/js/config.jsの設定を上書きすることになります。頭に「ACMS.Config.」を付けて記述してください。
また、Ver. 2.5.0よりacms.jsが非同期的にjavascriptを読み込み実行しますので、config.jsが読まれた事が保証される
ACMS.Ready(function() { });
の中に書きます。
例)検索キーワードのハイライトを適用するセレクタ要素を追加する場合
ACMS.Ready(function() { ACMS.Config.searchKeywordHighlightMark = '.entryTitle, .search .summary, .selectKeyword'; });
配列で設定を複数記述する記述方法
同じページで同じJavaScriptの動作を複数の場所で動作させたい場合、ブログ内で違う設定で動作させたい場合などに、配列で記述します。括弧([], {})の位置に注意してください。
例)絵文字の設定を配列で複数設定する場合
ACMS.Ready(function() { 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' } } ]; });
ACMS.Ready(function() { ACMS.Config.bxsliderConf = { mode : 'fade', // horizontal | vertical | fade speed : 800, captions : true, auto : true, pause : 6000, adaptiveHeight :true }; });