a-blog cmsでは、入力欄の文字数をカウントする機能が実装されています。（Ver. 2.0.0より）

デモ

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//-----------
// input count up
countupMark     : '.js-countup',
countupMarkOver : 'acms-admin-text-danger',

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.countupMark = '.js-countup-sample';
  ACMS.Config.countupMarkOver = 'countover';
});

HTMLとCSSの編集

HTML

「data-label-target」でカウント数のラベルを指定します。また「data-max」で制限文字数を指定できます。

<textarea name="demo_area" title="" cols="20" class="acms-form-width-3quarters js-countup" data-label-target=".js-countup-demo_area" data-max="10"></textarea>
<p><span class="js-countup-demo_area">0</span> / <span>10</span></p>

CSS

countupMarkOverで指定したクラスを設定します

.countover {
    color: #990000;
}

現在開発中の Ver. 3.2.0 のアルファ版を公開します。

Ver. 3.2 アルファ版を試す方法

アップデートの場合

private/config.system.yaml に、以下コードを追記ください。

system_update_repository: http://www.a-blogcms.jp/api/update-edge.json

次に管理画面 > コンフィグ > 機能設定のオンラインアップデートで「マイナーバージョンも含める」にすることで、メニューから Ver. 3.2.0-alpha にアップデートできるようになります。

新規インストールの場合

新規でインストールする場合は、以下よりURL新規パッケージをダウンロードしてお使いください。

php7.3 〜 php8.3

https://developer.a-blogcms.jp/_package/3.2.0-alpha.3/acms3.2.0-alpha.3.zip

新機能

• カスタムフィールドメーカーを改善
• CMS-6817 WebP画像をそのままアップロードできるように対応
• CMS-6895 カスタムユニットのデータがテキスト置換の対象外になってしまう問題を改善（シリアライズをしないように改善）
• CMS-6915 自動でシステム更新（パッチバージョンのみ）をする機能を追加
• CMS-6894 ログインユーザーの最終アクセス時間をダッシュボードやユーザー・会員一覧で確認できるように改善
• CMS-6920 WordPress eXtended RSS 形式のエントリーエクスポート機能を追加
• CMS-6930 ブロックエディターの組み込みJSを新しく用意 & ブロックエディターの新ユニットを追加
• CMS-6979 Twigを利用できるテンプレート機能を追加
• CMS-6821 エントリー一覧画面のUI・機能を刷新

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。（v1.3.0より）

基本的にはキャッシュ機能が利用できる状態の時には、post_include機能で追加で表示されるHTMLについても部分的にキャッシュされる事になります。そのためソート順をランダムとしていたとしてもキャッシュされ同じものが表示される事になります。

キャッシュ機能が利用されている時にも、ランダムが利用できるようにする方法を紹介します。

使用方法

実際にはキャッシュさせないという事ではなく、毎回違うURLでアクセスしているような状態にして処理しています。アクセス数が多いサイトの際にはキャッシュファイルサイズが大きくなりますので注意が必要になります。

Ver.2.7.xまでの記述

<form action="" method="post" class="js-post_include-ready">
<!-- キャッシュがオンでもランダム表示が可能になる記述ここから-->
<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />
<input type="hidden" name="query[]" value="hash" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->
</form>

class="js-post_include-eval_value"が書かれている事でvalueにはMath.random()というプログラムが実行され編集される事になります。

<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />

上記のHTMLが実行されると、0から1までのランダムな実数を生成するコードになり実際には以下のようになります。

<input type="hidden" name="hash" value="0.8770308238454163" class="js-post_include-eval_value" />

http://example.com/?hash=0.8770308238454163 のようなアドレスでアクセスする事になりますが、?hash= というアドレスにするためには以下の1行も必要になります。

<input type="hidden" name="query[]" value="hash" />

Ver.2.8.0からの記述

<form action="" method="post" class="js-post_include-ready">
<!-- キャッシュがオンでもランダム表示が可能になる記述ここから-->
<input type="hidden" name="hash" value="" class="js-random" />
<input type="hidden" name="query[]" value="hash" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->
</form>
<script>
  $('.js-random').val(Math.random());
</script>