chlonolog

web, digital gadgets, and more.

HexoでWordpressのnextpageっぽいことをする

WordpressからHexoへ乗り換えるに当たり、問題がひとつありました。それは、「Wordpressの<!-- nextpage -->に該当する処理がない」ということです。

どうしてもページ分割したい!

調べまくった結果、同様の案件で困っている方を発見。まあいますよね。

こちらの「アプローチを変えて、Asset Foldersを使ってみたらどうかな!」というコメントを参考に、タグをこさえてみました。久々にJavaScript触ったので、無駄に時間がかかりました。
JavaScriptは修正するたびにいちいちHexoを再起動した上でmdを更新しないと反映してくれなくて、非常に面倒臭かったです。そういうものなのか、おま環なのかすら分からない。とほほ。


独自タグを作ってみた

'use strict';
/**
 * 個別ページで擬似ページネーションっぽい処理
 * 
 * 使い方:
 * {% articlePagination 1:'' 2:'./02' 3:'./03' %}
 * ページ番号:url をページの数だけ列挙する
 * 現在のページはurlを '' にすればタグにclassを追加する
 *
 * 注意:
 * 疑似的にnextpageっぽい動作に見せているだけです。
 * カテゴリリストやタグリストに2ページ目が出てきて鬱陶しいので、
 * Front-matterに index: false とかページ変数を追加してから
 * テンプレート内で if (post.index != false) {} とかやって弾くとよろし。
 *
 * 2ページ目以降の date は 1900-01-01 00:00:00 にでもしておけば
 * post.prev.path や list_archives で直近に表示されなくなるので
 * とりあえずは問題ないんじゃないかな!(妥協)
 */
hexo.extend.tag.register('articlePagination', function(args) {
  var html = '';
  var v = '';
  
  args.forEach(function(arg) {
    v = arg.split(':');
    
    if (v[1].length == 0) {
      html += '<li class="active"><span class="page-number">' + v[0] + '</li>';
    }
    else {
      html += '<li><a href="' + v[1] + '" class="page-number">' + v[0] + '</a></li>';
    }
  });
  
  return '<div id="page-nav"><ul class="pagination">' + html + '</ul></div>';
});

できればconfig.rootからパスを持ってきてくっつけたかったんですが、this.config.rootとかしても取れなくて面倒臭くなったので、渡したものを表示するだけの超簡素なものです。

動作

動作としては、本文中に

{% articlePagination 1:'' 2:'./02' 3:'./03' %}

と書くと、

<div id="page-nav">
  <ul class="pagination">
  <li class="active"><span class="page-number">1</span></li>
  <li><a href="./02" class="page-number">2</a></li>
  <li><a href="./03" class="page-number">3</a></li>
  </ul>
</div>

といった感じで展開されます。
よく考えたら、この動作自体はAsset Folders関係ないですね。使いたいデータを内部的にディレクトリへ格納しているだけで、別に適当なページを指定しても飛ばせますし。

日付指定で2ページ目以降を無理矢理リストから追いやっているのが美しくありませんが、動作自体は問題ないので、とりあえずはこれで妥協しようかなーと考えています。

コメント

© 2018 chlono