Octopressの頃からある(@alalwww)さんの作成されたGravatar aside in Octopressを利用して Gravatarからプロフィール表示をしていましたが、HUGOでも利用したいと思いポーティングしてみました。
と言っても、基本的にはHUGOが利用するGo言語のテンプレートライブラリの記法に置き換えただけです。

Gravatar aside in Octopress関連のページ

設定ファイル: config.tomlの編集

HUGOでは、サイト全体で利用する任意のパラメータ[Params]テーブル内に記述します。 ここでは、Gravatarに登録したEメールのMD5ハッシュをgravatar_hashに設定します。

[Params]
  gravatar_hash = "a957567ba0ce0106c0d1cfa646acdb71" # Gravatar hashed value of an email address

この設定を追加することで、テンプレート内から.Site.Prams.gravatar_hashとして参照できるようになります。

なお、メールアドレスのMD5ハッシュは以下のコマンドで取得できます。

$ md5 -s "MyEmailAddress@example.com"
MD5 ("MyEmailAddress@example.com") = a957567ba0ce0106c0d1cfa646acdb71

partialsの作成

HUGOは、partialsを定義することで、テンプレートをコンポーネントとして再利用することができます。 配置場所はサイト構成情報のディレクトリ直下のlayouts/partialsまたはテーマディレクトリ内のlayouts/partialsに設置可能です。
テーマ側をあまりいじりたくなかったので、今回はサイト構成情報ディレクトリ直下に配置することにしました。

layouts/partials/gravatar.html

{{ if .Site.Params.gravatar_hash }}
<section>
  <div id="gravatar-aside-profile" style="clear:both">
    <div style="height:2em"><span style="color:#ccc;font-size:small">loading profile from gravatar...</span></div>
  </div>
  <div style="clear:both"></div>
  <script type="text/javascript">
    $(function () {
        var url = "http://www.gravatar.com/{{ .Site.Params.gravatar_hash }}.json?callback=?";
        var $box = $("#gravatar-aside-profile")
        var $msg = $box.children().children()
        var blink = function (a) {
          a.fadeOut(400).fadeIn(400)
        };
        var intervalID = window.setInterval(blink, 1500, $msg)
        var setupProfile = function (data) {
          var entry = data.entry[0]
          $box
            .empty()
            .css("padding-top", 5)
            .append($("<img>")
              .attr("src", entry.thumbnailUrl)
              .attr("alt", "thumbnail from Gravatar")
              .css("float", "left")
              .css("margin-right", 5)
            )
            .append($("<div>")
              .css("padding", "5px 0px")
              .append($("<h2>")
                .css("margin-bottom", 5)
                .append("<a href='" + entry.profileUrl + "'>" + entry.displayName + "</a>")
              )
              .append($("<div>")
                .css("clear", "both")
                .css("margin", 0)
                .css("font-size", "90%")
                .html(entry.aboutMe.replace(/\n/g, "<br/>"))
              )
            )
        }
        var clearInterval = function () {
          window.clearInterval(intervalID)
        }
        var updateMessageToError = function () {
          $msg.stop().fadeOut().text("profile load failed.").fadeIn()
        }
        jQuery.getJSON(url)
          .always(clearInterval)
          .done(setupProfile)
          .fail(updateMessageToError)
    })
  </script>
</section>
{{ end }}

partials/gravatarの適応

ここまでの設定でgraviatarの表示準備が完了いたしました。実際に表示するには、使用しているテーマファイルの修正が必要になります。

テーマの表示したい位置に以下の記述を追加します。

{{ partial "gravatar.html" . }}

あとは、プレビューしつつ微調整するだけです。


今回作成したpartialsは折を見て、GitHubで公開する予定でいます。

以上。