コンフィグセット機能とは

コンフィグセット機能ができる以前は、ブログ毎にコンフィグを設定する必要がありサイト全体で共通の設定（サイト全体にベーシック認証をかけるなど）を行いたい場合でも、全ブログのコンフィグを設定を行う必要がありブログ数が多いと大変でした。

Ver. 2.10.0 で導入されたコンフィグセット機能を利用すると、コンフィグのセットを作成することができ、このセットをブログまたはカテゴリーにセットすることで、コンフィグ設定できるようになりました。これにより、同じコンフィグセットを利用しているブログやカテゴリーのコンフィグを一回の操作で変更できるようになります。

また、コンフィグセットは複数作成しておくことができるので、カテゴリー毎にコンフィグを変更するといったことも可能になりました。

コンフィグセット機能を利用する

例えば、サイト全体（複数ブログ）のコンフィグを１つのコンフィグで管理し、サイト全体にBASIC認証をかけてみます。

1. サイト全体の共有のコンフィグセットを作成

管理画面 > コンフィグ よりコンフィグセットを新規作成します。

2. 作成したコンフィグセットを編集

先ほど作成した、「サイト全体の共有のコンフィグセット」を選択して、コンフィグ一覧に移動します。

BASIC認証をかけるため「アクセス設定」に移動して、BASIC認証を設定します。

3. ルートブログにコンフィグセットを適応

「管理画面 > ブログ」に先ほど設定したコンフィグセットを割り当てます。

この時重要なのが「子ブログにも継承する」にチェックをつけることです。ここにチェックをつけることで、チェックをしたブログまたはカテゴリーの子ブログ・子カテゴリーも同じコンフィグセットを参照するようになります。

以上で設定は完了です。これでサイト全体にBASIC認証をかけることができました。

子ブログへの継承

Ver. 3.1.0 で、コンフィグセットをブログやカテゴリーにセットした時、子ブログや子カテゴリーにも継承させることが出来るようになりました。

「子ブログ（子カテゴリー）にも継承する」にチェックをつけた場合

「子ブログ（子カテゴリー）にも継承する」にチェックをつけた場合は、設定したブログ（カテゴリー）の子ブログ（子カテゴリー）にも同じコンフィグが設定されます。

「子ブログ（子カテゴリー）にも継承する」にチェックをつけなかった場合

子ブログ（子カテゴリー）にも継承する」にチェックをつけなかった場合は、そのブログ（カテゴリー）でのみ、コンフィグが適応されます。

まず、実践的な実装方法の一つとして、標準的なページャー UI を Ajax を使用した動的コンテンツ読み込みに置き換える方法を紹介します。これを実現するために、htmx を利用します。

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ajax-header.js"></script>

a-blog cms を htmx のバックエンドに利用する場合、ajax-header.js の読み込みが必要ですので、ご注意ください。

リスト表示用のモジュールのページャーをカスタマイズします。以下の例では、次のページへのリンクをカスタマイズしています。

<!-- BEGIN pager:veil -->
<!-- BEGIN forwardLink -->
<form hx-post="" hx-ext="ajax-header" hx-trigger="click" hx-target="this" hx-swap="outerHTML" class="acms-text-center">
 <input type="hidden" name="bid" value="1">
 <input type="hidden" name="cid" value="7">
 <input type="hidden" name="tpl" value="/include/htmx/headline.html">
 <input type="hidden" name="page" value="{forwardPage}">
 <p class="acms-text-center">
  <input type="submit" name="ACMS_POST_2GET" value="次の{forwardNum}件へ"
  class="acms-btn acms-btn-primary acms-btn-large">
 </p>
</form><!-- END forwardLink -->
<!-- END pager:veil -->

forbid_tpl_url_context: off

forbid_tpl_url_context: on
allow_tpl_path: [include/htmx/headline.html]

拡張子が .html のファイルが HTML フォーマットでない場合に 404 エラーを返す設定を無効にします。これは、a-blog cms が部分的な HTML を読み込めるようにするために必要です。

html_format_validate: off

<h2 class="section-heading acms-text-center">お知らせ</h2>
<div class="module-section">
	<ul class="headline headline-1col acms-list-group clearfix" aria-labelledby="layout-top_headline">
	@include("/include/htmx/headline.html")
	</ul>
</div>

<!-- BEGIN_MODULE Entry_Headline id="headline_news" -->
@include("/admin/module/setting.html")
<!-- BEGIN entry:loop -->
  <li class="headline-item {entry:loop.class}">
   <!-- BEGIN url#front --><a href="{url}" class="acms-list-group-item headline-link"><!-- END url#front -->
   <time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#week} )</time>
   <!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->
   <span class="headline-title">{title}</span><!-- BEGIN new --><span class="acms-label acms-label-danger">NEW</span><!-- END new -->
   <!-- BEGIN url#rear --></a><!-- END url#rear -->
  </li><!-- END entry:loop -->
  <!-- BEGIN pager:veil -->
  <li>
   <!-- BEGIN forwardLink -->
   <form hx-post="" hx-ext="ajax-header" hx-trigger="click" hx-target="this" hx-swap="outerHTML"
    class="acms-text-center">
    <input type="hidden" name="bid" value="1">
    <input type="hidden" name="cid" value="7">
    <input type="hidden" name="tpl" value="/include/htmx/headline.html">
    <input type="hidden" name="page" value="{forwardPage}">
    <p class="acms-text-center">
     <input type="submit" name="ACMS_POST_2GET" value="次の{forwardNum}件へ"
      class="acms-btn acms-btn-primary acms-btn-large">
    </p>
   </form><!-- END forwardLink -->
  </li>
  <!-- END pager:veil -->
<!-- END_MODULE Entry_Headline -->

a-blog cms のテンプレートエンジンでは変数に波括弧を使用しているため、JavaScriptなどの波括弧とぶつかってしまい、そのままでは正常にJavaScriptが動作しません。 JavaScriptを正常に動作させるためには、波括弧をバックスラッシュでエスケープする必要があります。

<div id="app">
  \{\{ message \}\}
</div>

@verbatimブロック

テンプレートの広い箇所でJavaScript変数を表示する場合は、 HTMLを @verbatim ブロックで囲めば、波括弧を１つ１つをバックスラッシュでエスケープする必要がなくなります。

Ver. 2.10.8 で追加