Movable Type 4.1をAutopagerizeに対応させる

MovableType4.1AutoPagerizeに対応させるコードを紹介しておきます。

mtentryautopagerize_jpg

AutoPagerize対応class指定を設定しておくことで、エントリーを昇順で読むことができるようになります。実際にMovableType.jpで対応されているので、導入している方には、過去のエントリーから読んでいくとページ末尾に新しい記事(次ページ)が追加表示されるようになり、読みやすさを実感できるかと思います。

インデックスページ(トップページ)で、エントリーがアップした日付で降順に表示されるのが一般的です。記事を読み始めると昇順に記事が追加され読めるようになります。逆でもいいのですが、こっちの方がスマートかもしれません。

最初のエントリー投稿内容からコードの追記修正いたしました。最新記事において、「次の記事」が表示されていたのを表示されないコードに修正しました。

Autopagerize対応情報について

こちらのautopagerize作成者のbrazilさんのブログAutoPagerize0.0.11 - SWDYHにて、その詳細が書かれています。

AutoPagerizeに必要な情報をページ中のHTMLに埋め込んでおけば、SITEINFOがなくてもAutoPagerが起動するようになります


埋め込みの形式は以下の通りです

link要素またはa要素でrel="next" (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_insert_before (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_page_element (複数指定可、指定したもの全てが挿入されます)

mtentry_jpg

上記で上げられている要素をアーカイブテンプレートに追加することで、AutoPagerizeに対応させることができます。

右のイメージのように色指定している部分の要素にclass指定します。

本文コンテンツ全体(右イメージ水色部分)を括ってあるタグにclass指定します。

デフォルトのテンプレートには、前後ページのナビゲーションが無いので新しく作り(右イメージ中のオレンジ部分とパープル部分)、それに対してautopagerize対応要素指定をします。

デフォルトのテンプレートを使って、追加部分の要素などについて紹介します。


autopagerize_page_elementをclassに指定

本文部分(ページ末尾に追加されるコンテンツ部分)のclassにautopaerize_page_elementを指定します。

モジュールテンプレートの中の「ブログ記事の詳細」を開いて、

最初の行のdiv要素のclass に追加します。

新しいモジュールテンプレート作成

autopagerize_insert_beforeとlink要素またはa要素でrel="next" を指定については、新規にモジュールテンプレートを作成し、その中に指定した要素を挿入します。そのモジュールをアーカイブテンプレートの中のブログの記事の中にインクルード(include module)させることで後々の管理がしやすくなります。

追記 修正;最新記事のときに「次のページ」だけが表示されてしまいます。下記に修正コードを表示させておきます。

ブログメインコンテンツの下に、前後ページへのリンクを生成するようにし、それをdiv要素で囲んでclassにautopagerize_insert_beforeを指定すればいいわけです。

ちなみにMovableType.jpでは、divではなくhrの水平線のタグにautopagerize_insert_beforeを指定しています。

autopagerize_insert_beforeをclassに指定

追加する内容を差し込む位置の指定です。autopagerize_insert_before指定されている部分に次ページ指定されている内容が差し込み表示されます。

link要素をdivで括り、それに指定をします。

link要素またはa要素でrel="next" を指定

次ページのリンク指定するためのrel指定をします。こちらも新しいモジュールテンプレートの中に前後のページ情報へのリンクを作成し、挿入します。

追記修正:

次ページへのナビゲーションを作成し、そのリンク要素にrel指定でnextを追加します。 尚、前の記事のリンク要素には、prev指定をしておくといいですね。

追記修正:

新しいモジュールテンプレートに名前を付けて(たとえば、autopagerize_link)アーカイブテンプレートのブログ記事の中でコメントモジュールをincludeしているその下に挿入(インクルード)します。

以上の設定をすることでMovableType4.1AutoPagerizeに対応させることができます。

追記:
もう一度MTのブログを見てみたら、最新記事においてNEXTページのリンクが表示されていませんね。ここにも条件分岐が使われているようなので、考えてみて後から情報追加しておきます。

トラックバック(1)

このブログ記事を参照しているブログ一覧: Movable Type 4.1をAutopagerizeに対応させる

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/439

「[を] AutoPagerize は便利なのでこのブログでも対応しました」経由で知った AutoPagerize が便利そうだったので、このブログでも... 続きを読む

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2008年2月 8日 10:11に書いたブログ記事です。

ひとつ前のブログ記事は「Movable Type 4.1でリストをストライプにする変数設定」です。

次のブログ記事は「HighslideJS対応コードをMT4.1で自動生成するカスタマイズ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。