前エントリーでは、本ブログに目次を付けたとアナウンスした。本エントリーでは、テンプレートの編集方法を解説しませう。
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 して、お終い。
こちらを参考にさせていただきました。
ReplyDelete目次ができて便利です。
ありがとうございました。
ブログを拝見しました。当記事が参考になったようで、何よりです :)
ReplyDelete大変参考になりました。ありがとうございます。
ReplyDeleteそれはようございました :)
ReplyDeleteコメントありがとうございます。