Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた

Hugo Data-Driven Contentを試してみる。

目的

サイドバーの人気記事をJavascriptを利用せずに、表示できるようにしたい。
脱サードパーティアプリ。

対応方法

Hugo Data Filesを利用する
Hugo Data-driven contentを利用する

1つ目のData Filesは、関連記事表示の際に利用したので、今度は2つのHugo Data-driven Contentを試してみる。

PythonでTF-IDFによる文書推薦

実装方法は、以下の通り。

Google Analyticsから情報を取得し、その結果を加工してJSONを返すAPIサーバを作る。
その後、HugoのData-driven contentの機能を利用して、APIを叩いてJSONを取得し、表示させる。

JSONを返すAPIサーバを立てる

以下のページを参考に、Pythonのfalconでつくった。さくっとAPIサーバが構築できて非常に良い。

# -*- coding: utf-8 -*-
import json
import falcon
from analytics import Analytics

class HelloResource(object):

    def on_get(self, req, resp):
        analytics = Analytics()
        scope = ['https://www.googleapis.com/auth/analytics.readonly']

        service_account_email = "analytics@meganii-reports.iam.gserviceaccount.com"
        key_file_location = './key.pem'

        # apiの呼び出し・結果出力
        service = analytics.get_service('analytics', 'v3', scope, key_file_location, service_account_email)
        profile = analytics.get_first_profile_id(service)
        resp.body = json.dumps({ "rows" : analytics.get_json(analytics.get_rankings_results(service, profile))} )

app = falcon.API()
app.add_route("/", HelloResource())


if __name__ == "__main__":
    from wsgiref import simple_server
    httpd = simple_server.make_server("127.0.0.1", 3000, app)
    httpd.serve_forever()

Hugo

popular.html

{{ $dataJ := getJSON "http://localhost:3000/" }}
<ul class="list-unstyled urllist">
{{ range first 5 $dataJ.rows }}
  <li>
    <div>
      <a href="{{ index . 1 }}">
        <img class="urllist-img" src="{{ index . 2 }}" width="75" height="75" />
      </a>
      <a href="{{ index . 1 }}">{{ index . 0 }}</a>
    </div>
  </li>
{{ end }}
</ul>