Blogger に目次を設置する

前エントリーでは、本ブログに目次を付けたとアナウンスした。本エントリーでは、テンプレートの編集方法を解説しませう。

• ref. clmemo@aka: Blogger に目次を付けた

Contents Includable

目次を作成するためのコードを、まず示しませう。

<b:includable id='contents'>
  <div id='blog-contents'>
    <b:if cond='data:blog.pageType != "item"'>
      <h2>目次</h2>
      <ul>
        <b:loop values='data:posts' var='post'>
   <li><a expr:href='data:post.url'><data:post.title/></a></li>
        </b:loop>
      </ul>
    </b:if>

    <!-- navigation -->
    <b:include name='nextprev'/>
  </div>
</b:includable>

上記コードを言葉に直すと、次のやうになる。

• 目次を個別記事以外のページに表示する
• 「目次」を h2 要素で書く
• 目次を ul 要素で列挙する
• 目次の後に、「Newer Post」「Home」「Older Post」という 3 つのナビゲーション・リンクを表示する

ナビゲーション・リンクを目次の後に附けた理由を書いておきませう。

ラベル・ページと検索結果ページは、一ページに 20 個の記事しか含まない。もし、20 個以上の記事が存在する場合は、「次のページ」が用意される。例えば、このブログは「About this blog」というラベルの付いた記事を、78 個持っている。言い換えると、「About this Blog」の付いた記事は一ページには収まらなくて、都合 4 ページ必要になっている。この 2 ページ目以降にアクセスするために、ナビゲーション・リンクを目次の下に置いている。

なお、ナビゲーション・リンクは、個別ページにも表示される。こっちは、単に前後の個別記事へのアクセス性を高めるため。

テンプレートの編集

注意: テンプレートの編集は、事前にバックアップを取ってから行ないましょう。なお、ブラウザー上からテンプレートを編集する場合は、「Expand Widget Templates」にチェックを入れる必要がある。

まず、次のコードを見つけませう。

        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

ここが、記事を表示するセクションになる。

このコードの直後に、上で示したコード (contents includable) を挿入する。これは、いわば「目次ユニット定義」に当たる。

次に、目次を表示させたい場所に下の一行を追記する。

<b:include name='contents'/>

そのためには、テンプレートから次の一行を見つけませう。

<b:includable id='main' var='top'>

これが本文を表示させるトップのユニット (includable)。このコードは、次のやうな構造を持っている。

<b:includable id='main' var='top'>
  <!-- posts -->
  ...

  <!-- navigation -->
  ...

  <!-- feed links -->
  ...
</b:includable>

そこで、posts の前で、目次の includable を include させる。具体的なコードは、こんな感じになる:

<b:includable id='main' var='top'>
  <!-- contents -->
  <b:include name='contents'/>

  <!-- posts -->
  <div class='blog-posts'>

    <b:include data='top' name='status-message'/>
  (略)

あとは、Save して、お終い。

ref

• クリボウの Blogger Tips: Blogger beta のページエレメントタグ
• クリボウの Blogger Tips: Blogger beta のウィジェットタグ