a-blog cmsの実務制作の流れをまとめています。
今回から、静的なHTMLにa-blog cms用のタグを埋め込んでいきます。
管理用のタグ
a-blog cmsは、エントリーの追加や編集などの簡単な作業は、実際に表示しているサイトを見ながら行うことができます。
その機能を使うためには、サイトの全ページに
- 管理用のCSSとJavaScript
- ログインしているときだけ出てくる管理メニュー
の追加が必要です。
テーマファイルを作りながらやってもいいのですが、今のうちに全部やってしまいましょう。
管理用のCSSとJavaScript
全ページの<head>要素の閉じタグの直前に、以下のコードを貼り付けてください。
<link rel="stylesheet" href="/css/acms.css" type="text/css" media="all" />
<!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>
<!-- END_MODULE Js -->
「あ…あれ？acms.cssは、テーマに入ってないんですけど…」
と思うかもしれませんが、大丈夫です。
a-blog cmsは、管理メニューなどに必要なテンプレートやファイルを「system」というテーマセットに保管しています。これらが作成したテーマ内に見つからなかった場合、自動的に「system」から探します。
ここでは該当するファイルがないので、「system」のCSSを読み込んでいるわけです。
この機能を利用して、管理画面のテンプレートを自作することも可能です。
尚、index.jsはa-blog cmsを正常に設置していれば、ドメインルートに既にあるはずです。
管理用メニュー
全ページの<body>要素の開始タグの直下に、以下のコードを貼り付けてください。
<!-- BEGIN_MODULE Touch_Login --> <!--#include file="/admin/action.html"--> <!-- END_MODULE Touch_Login -->
先程と同様で、「system」テーマに入っている管理メニュー(/admin/action.html)を呼び出しています。
ここまで編集できたら、(2)の後半で説明したのと同様に、一旦a-blog cmsにテーマを反映してみてください。
うまく行っていれば、全ページの上に張り付くような形で管理メニューが現れます。
<body>要素の開始タグの直下が、だいたいのデザインで失敗しないため無難ですが、a- blog cmsの公式テーマのように、サイトタイトルなどが入っているヘッダー部分に埋め込んでしまっても問題ありません。
ページタイトル
次に、<title>要素(ページタイトル)をa-blog cmsに連動していきます。
各ページの<title>要素を、以下のように書き換えてください。
一覧ページ(/category/index.html)
<title>%{CATEGORY_NAME} | %{BLOG_NAME}</title>
個別ページ(/category/entry.html)
<title>%{ENTRY_TITLE} | %{CATEGORY_NAME} | %{BLOG_NAME}</title>
こう書くと、a-blog cmsにテーマを反映したときに
<title>2010年度株主総会が開かれました | ニュース | 株式会社シーエムエス</title>
という感じになってくれます。
尚、実務制作ではホーム(index.html)のtitle要素は手入力の対応でも問題ないだろうと思います。
ブログ説明文などを反映したい場合は、a-blog cmsの公式テーマを参照してください。
body要素のclass
HTML文書には、必ず<body>要素があります。
ここのclassやid属性にCMSの記事IDやカテゴリー名を入れておくと、CSSを使った柔軟なデザインの調整が可能になります。
a-blog cmsももちろん、このテクニックが使えます。
<body>を以下のように書き換えてください。
一覧ページ(/category/index.html)
<body class="%{CCD} %{VIEW}" id="%{CCD}-index">
個別ページ(/category/entry.html)
<body class="%{CCD} %{VIEW}" id="%{CCD}-%{EID}">
%{CCD}とは、現在の記事が属しているカテゴリーのコードネームです。
いちばん上の階層の親カテゴリーを取得する%{RCCD}などもあります。
%{VIEW}は、現在のページの状態です。
一覧だと「index」、個別ページだと「entry」になります。
%{EID}は、エントリーの一意のIDです。
これらを使うことで、a-blog cmsにテーマを反映したときに
<body class=”news index” id=”news-index”>
<body class=”news entry” id=”news-000″>
となり、カテゴリー別・エントリー別にCSSを調整することができるようになります。
パンくずリスト
今回のサイトには、ホーム以外にはパンくずリスト(トピックパス)があります。
a-blog cmsは、タグさえ書いておけば、ページの状態に併せて自動でパンくずリストが生成されます。
リファレンスのページにある、a-blog cms公式のスニペットをそのまま貼り付ければ良いと思います。
ちなみに私は、いつもコーディングで使っているHTMLに併せて以下のようなコードを作り、「/include/topicpath.html」というHTMLに保存して、インクルードで呼び出しています。
<!-- BEGIN_MODULE Topicpath -->
<p class="topic-path">
<!-- BEGIN blog:loop --> <!-- BEGIN glue --><!-- END glue --><a href="{url}" class="first">Home</a><!-- END blog:loop -->
<!-- BEGIN category:loop --> <!-- BEGIN glue --><span class="joint"> &raquo; </span><!-- END glue --><a href="{url}">{name}</a><!-- END category:loop -->
<!-- BEGIN entry --> <!-- BEGIN glue --><span class="joint"> &raquo; </span><!-- END glue --><a href="{url}">{title}</a><!-- END entry -->
<!-- /.topic-path --></p>
<!-- END_MODULE Topicpath -->
全ページ共通のタグを埋め込むことができました。次は、各テンプレートの編集をしていきます。