以前まではモジュールの入れ子が不可能でしたが、モジュールがエスケープできるようになったことでモジュールの入れ子が行えるようになりました。また、URLコンテキストをモジュールで呼び出すこともできるようになりました。 これによって標準機能ではできなかった子ブログのエントリーリストもできるようになりましたので、実際に表示をさせてみましょう。

下準備

インストール後では、子ブログとエントリーがありませんのでまずは作成します。

これで下準備は完了です。

カスタマイズ

子ブログリストとエントリーリストを使用します。

今回は子ブログリスト li の中にエントリーリストの ul が入ることになりますので li 閉じタグの前にエントリーリストを貼り付けます。

<!-- BEGIN_MODULE Blog_ChildList -->
<ul class="acms-list-group">
	<!-- BEGIN blog:loop -->
	<li>
		<a href="{url}" class="acms-list-group-item">{name}</a>
		<!-- ここにエントリーリストを貼り付け -->
	</li>
	<!-- END blog:loop -->
</ul><!-- END_MODULE Blog_ChildList -->

このままではエントリーリストがルートブログのものになってしまうので、子ブログのエントリーが出るように修正を行います。 URLコンテキストをモジュールで呼び出すことができる「ctx（コンテキスト）」を使用します。 記述方法はモジュールIDと同様で、今回は子ブログリストのブログIDでエントリーリストを絞り込むため下記のような記述になります。

<!-- BEGIN_MODULE Entry_List ctx="bid/{id}" -->

次にモジュールのエスケープを行います。 a-blog cmsではモジュールは内側から解決させるため{id}が解説されないままエントリーリストが動いてしまいうまく絞り込まれません。

「BEGIN」「END」「変数」に必要となりますが、ctxに記述した{id}は子ブログリストの変数で先に解決がされて欲しいものになるのでエスケープが必要ありません。

例：
<!-- BEGIN_MODULE\ Entry_List -->
<!-- END_MODULE\ Entry_List -->
<!-- END\ entry:loop -->
\{url\}

変数には中かっこ（例：{}）全てにエスケープが必要ですので注意が必要です。

下記のように「基本テーマの刷新」などのエントリーが出ていなければ正解です。

ctxの利用

時間がある方はトップページの「新着情報」と「採用情報」をモジュールIDを使わずにカテゴリーの絞り込みで表示をしてみましょう。

投稿内容を絞り込む

投稿データを投稿された期間、連番などから絞り込めます。また、チェックした投稿データだけ削除することもできます。

管理者宛のメール内容を閲覧する

フォームログで表示されているのは一般宛に送信されたメールの内容が表示されています。管理者宛のメール内容を見るには絞り込むの「管理者宛（件名/本文） 」にチェックをして[表示]ボタンを押すと管理者宛のメール一覧が表示されます。

CSVデータでダウンロードする

投稿データはダウンロードする文字コードを選択してCSV形式でダンロードすることができます。

a-blog cms Ver.2.8.0 より新しくテキストエリアが生まれ変わります。今までは「リンク」や「強調」を挿入した際にHTMLタグが直接見えてしまう形になっていましたが、Ver.2.8.0より「リンク」や「強調」などが視覚的にわかりやすくなります。

このテキストエリアには、弊社が独自で開発したインライン専用のWYSIWYG、「Lite Editor」が導入されています。

カスタマイズ

a-blog cmsではデフォルトで、「リンク」「強調１」「強調２」のボタンが用意されていますが、カスタマイズして、新たにボタンを追加してみましょう。 下記のように、ACMS.Ready内で、ACMS.Config.LiteEditorConf.btnOptionsに挿入したいボタンの設定をpushすることで、新たにボタンを追加することができます。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions.push({
        label: 'アンダーライン',
        tag: 'u',
        className: '',
        sampleText: 'アンダーライン'
    });
});

課題

下記のようにエントリーのテキストエリアに「アンダーライン」「斜体」「赤色」の３つのボタンを追加してみましょう。

ヒント

赤色のボタンに関しては、自分で下記のようにスタイルも書いてあげる必要があります。

.red {
    color:red;
}