このブログはHexoという静的ページジェネレーターで生成したHTMLをGitHubPagesにpushして公開しています。タイトルの通りいろいろとカスタマイズしてみました。

Wordpressとかと違ってデータベースを使用していないので、あんまり大したことができないのではと思っていました。そういうのもあって「ちょっとWordpress辺りに移行してみようかな」とか考えたのですが「そういえばプラグインがいろいろあったよな~」というのを思い出しました。探した結果、いろいろできそうだったので導入してみました。

以下、今日やったこと。

タグクラウドプラグインの導入


もともと、タグクラウド的なやつを表示したいと思ってまして、このサイトで使っているtranquilpeakというテーマでもともと生成できるタグページをカスタマイズして、なんちゃってタグクラウドみたいなことをやってます。(全体のタグ種類に占める割合をもとに10段階で色分けするような単純なやり方)

下のような感じです。

でも、もっとぐりぐり動いてイケイケなタグクラウドを表示したかったところ、hexo-tag-cloudというよいプラグインがありました。
導入後は下記のような感じですね。

イケてますね。
タグ数によってフォントサイズとか変えてくれればもっとイケイケなんですが、まあ、オシャレなので満足です。ただし、レスポンシブ対応できてないので、スマホで見たら横が切れます。

Pocket保存ボタンとはてなブックマーク追加ボタンを表示


もともとテーマでFacebookとTwitterとGoogle+へのシェアができるので、できるだろうとおもってやってみました。
結論から書くと、テーマの次期バージョンで任意サービスへのシェア機能が実装される予定です。

まだリリースはされていませんが、この機能自体の実装は終わっていたので開発ブランチから私のリポジトリのブランチへマージして、ボタンを追加することができました。こんな感じ。

ボタンの表示はFont Awesomeを使用しているのですが「はてなブックマーク」のFont Awesomeは存在しないので「ビットコイン」のアイコンで代用しました。はてなはアカウント持ってないのでちゃんとブックマークできるのかどうかと言われたらわかりません。たぶんできると思います。
また、こちらもスマホで見たときにうまく表示してくれません…が、スマホから見てるユーザーさんは少ないみたいなのでいいか…

どうでもいい話ですが、もともとコードを自分でいじって表示させたのですが「もうすぐできるぜ!」ってところでFont Awesomeのところで若干詰まりまして、テーマのリポジトリを見ていたところ上記のIssueを見つけました。次で実装されるなら今のうちにマージしてしまえという勢いでやりました。テーマのコードとは一切関係ないところで詰まってました。この辺りは完全に私の環境とカスタマイズの問題なのでここでは書きませんが。

関連記事の表示


これはデータベースがないのでできないだろうと思っていたのですが、なんとhexo-related-popular-postsというプラグインがありました。 作者のtea3さんの記事を見ると、「タグ」と「Google Analyticsのページビュー」もしくは「形態素解析」のどちらかで関連記事を表示するそうです。

いや、スゴイですね、そういう発想が浮かばない。浮かんだとしても私のレベルだと技術的にもできないんですが…
早速使わせて頂きました。環境変数設定のところでexportを見て若干嫌な予感がしたのですが、一応、Windowsでも使えます。Windowsでも普通に環境変数に値を放り込めばいいです。

ただ、設定ファイルに記述するキャッシュのオプションのところのexpiresDateは「文字列を指定してください」と怒られるので消しました。(これはWindowsの問題のはずです)

追記 2016/11/16

この記事作成時点(2016/11/3)では「タグ」と「Google Analyticsのページビュー」をもとに関連記事を生成するようになっていましたが「形態素解析」での生成も実装されたそうです。プラグインのアップデート後に実際に形態素解析をやってみたところ、記事内の単語の関連を基に生成されるようになっていました。素晴らしい!!
また、expiresDateの方もプラグインの問題だったとのことでわざわざtea3さんからご連絡頂きました。素晴らしいプラグインをありがとうございます。作者のtea3さんにはこの場を借りて重ねてお礼申し上げます。

コメント欄の表示


Disqusを使用してコメント欄を表示するようにしました。
この話は別記事で書こうと思います。

追記 2016/11/16

書きました

感想


「Javascriptができれば割となんでもできるんだな~」と思いました。問題は私はフロント周りは一切やらないのでやろうにもできないのですが…