a-blog cms カスタムフィールドのHTML部分をインクルード化するサンプル

imgの呼び出し

@include("/include/field-parts/template/img.html", {"field":"hoge"})
<input type="hidden" name="field[]" value="hoge">
<input type="hidden" name="hoge:extension" value="image">
<input type="hidden" name="hoge@size" value="1400">
<input type="hidden" name="hoge@filename" value="">

imgの外部ファイル化

<div class="js-img_resize_cf">
  <div class="js-drop_area" style="min-height: 100px;">
    <div class="acms-admin-drop-area-wrap">
      <div class="acms-admin-drop-area drag-n-drop-hover">
        <div class="acms-admin-drop-area-inner">
          <span class="acms-admin-icon acms-admin-icon-media acms-admin-drop-area-icon"></span>
          <p class="acms-admin-drop-area-text"><!--T-->ここにファイルをドロップ<!--/T--></p>
        </div>
      </div>
    </div>

    <div>
      <!-- BEGIN_IF [{{{field}}@path}/nem] -->
      <div><img src="%{ARCHIVES_DIR}{{{field}}@path}" width="600" class="js-img_resize_preview" style="width:300px;"></div>
      <input type="hidden" name="{{field}}@old" value="{{{field}}@path}">
      <!-- ELSE -->
      <div><img src="" class="js-img_resize_preview" style="width:300px;display:none;"></div>
      <!-- END_IF -->
      <div class="acms-admin-form-group">
        <input type="file" name="{{field}}" size="20" multiple="multiple" accept="image/*" id="input-img-{{field}}" class="js-img_resize_input acms-admin-hide-visually">
        <label for="input-img-{{field}}" class="acms-admin-btn-admin" style="cursor:pointer;"><i class="acms-admin-icon-config_export"></i>ファイル選択</label>
        <div class="acms-admin-form-checkbox">
          <input type="checkbox" name="{{field}}@edit" value="delete" id="input-img-{{field}}_delete">
          <label for="input-img-{{field}}_delete">
            <i class="acms-admin-ico-checkbox"></i>削除
          </label>
        </div>
      </div>
      <div<!-- BEGIN_IF [{{alt}}/eq/none] --> style="display: none"<!-- END_IF -->>
      <br>画像の説明文:<br>
      <textarea name="{{field}}@alt" class="acms-admin-form-width-large">{{{field}}@alt}</textarea>
    </div>
  </div>
</div>
</div>

textareaの呼び出し

@include("/include/field-parts/template/textarea.html", {"field": "hoge", "class":"js-countup", "countup": "25"})
<input type="hidden" name="field[]" value="hoge">
<input type="hidden" name="hoge:v#maxlength" value="25" id="hoge-v-maxlength">
<div data-validator-label="hoge-v-maxlength" class="validator-result-{hoge:v#maxlength}">
  <p class="acms-admin-text-error">最大文字数を超えています</p>
</div>

textareaの外部ファイル化

<textarea
    name="{{field}}"
    rows="5"
    id="{{field}}"
    class="{{class}} acms-admin-form-width-large"
    data-max="{{countup}}"
    data-label-target=".{{field}}_countup"
    data-validator="{{field}}">{{{field}}}</textarea>