HugoのPV順の記事リストを作ってみました。

Google Analyticsのpageview情報を利用していて、サイトビルド時にデータを取得するためのAPIはGo言語を使って自前で作りました。

Go lang + EchoでGoogle Analytics APIの結果をHugoから使えるように - PIYO Notes
またもやHugo用にGoのサーバーにAPIを追加しました。HugoでGoogle Analyticsで取っているPV順に並べた結果を使ってコンテンツを作るためです。 似たようなことをこの辺↓↓で書いてます。 https://blog.piyo.tech/posts/2018-04-04-ogp-json/ まず認証情報を作るところがなかなか面倒です。こちらのURLがほぼまんま参考になるので順を追って実施してみてください（丸投げ）。
blog.piyo.tech

まずはサイドバーにエリアを追加しました。

1<aside class="l-sidebar">
2  <div class="sections sidebar">
3    {{ partial "author.html" . }}
4    {{ partial "popular.html" . }} ←これを追加
5    {{ partial "latests.html" . }}
6    {{ partial "tags.html" . }}
7  </div>
8</aside>

全体としては↓のようになってて、APIでPV順に戻ってきた$json.rowsのうち先頭5件を取り出してループを回しています。

 1{{- $json := getJSON .Site.Params.GAURL -}} 作っておいたAPIを呼び出す
 2{{- $ogpUrl := .Site.Params.OgpJsonBaseUrl -}} ←あとで使う
 3
 4<section class="sidebar">
 5  <header>POPULAR</header>
 6  <div>
 7    <div class="articles sm">
 8      {{ range $row := (first 5 $json.rows) }}
 9        ここに内容を書く
10      {{ end }}
11    </div>
12  </div>
13</section>

記事ごとの要素はLATESTにあるものと同じような見え方にすべく、HTMLもほぼ同じようにしました。ですが、GAの結果には記事のサムネイルやタグなどがありません。

タグは無くてもいいとしてサムネイルを載せないと寂しくなってしまったので、OGP画像を表示したときのようにOGPのAPIを呼び出してその結果を利用する形でサムネイルを表示しました。

ブログのビルド用にOGPの情報をJSONで返すサーバーも作った - PIYO Notes
前回の続きです。 https://blog.piyo.tech/posts/2018-04-02-blog-link/ リンクの見た目をいい感じにするためにOGPのJSONのサーバーを作って、Data-Driven Contentで表示するようにしたよ、というのが前回の話です。 echoのサーバーに機能追加 https://blog.piyo.tech/posts/2018-03-27-deploy-go/ すでに動かしているGoのサーバーに機能を追加しました。 /ogp?url=http://xxxxx とリクエストすると欲しいサイトのOGPをJSONで返してくれるようにします。
blog.piyo.tech

以下に ループの内側のHTMLを掲載します。

 1{{- $date := substr (index $row 2) 1 10 }}
 2{{- $path := printf "%s%s" (index $row 1)  (substr (index $row 2) 1)}}
 3{{- $url := printf "https://blog.piyo.tech%s" $path}}
 4{{- $json2 := getJSON (printf "%s%s" $ogpUrl $url) }}
 5{{- $image := index $json2.Image 0 -}}
 6{{- $imageUrl := $image.URL -}}
 7
 8<article class="lism">
 9  <a href="{{ $path }}">
10    <div class="thumb" {{ printf "style='background-image: url(%s)'" $imageUrl | safeHTMLAttr }}></div>
11    <div class="inner">
12      <div class="title sm">{{ index $row 3 }}</div>
13
14      <ul class="facts sm">
15        <li><i class="fa fa-calendar" aria-hidden="true"></i><time datetime="{{ $date }}">{{ $date }}</time></li>
16      </ul>
17    </div>
18  </a>
19</article>

$json2というのが、OGP用のAPIの結果で、その中身である$image.URLをサムネイルとして利用しました。