PIYO - Tech & Life -

HugoにPV順の記事リストを配置する

Hugo ブログ

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

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

Go lang + EchoでGoogle Analytics APIの結果をHugoから使えるように - PIYO - Tech & Life -
またもやHugo用にGoのサーバーにAPIを追加しました。HugoでGoogle Analyticsで取っているPV順に並べた結果を使ってコンテンツを作るためです。 似たようなことをこの辺↓↓で書いてます
blog.piyo.tech

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

<aside class="l-sidebar">
  <div class="sections sidebar">
    {{ partial "author.html" . }}
    {{ partial "popular.html" . }} ←これを追加
    {{ partial "latests.html" . }}
    {{ partial "tags.html" . }}
  </div>
</aside>

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

{{- $json := getJSON .Site.Params.GAURL -}} 作っておいたAPIを呼び出す
{{- $ogpUrl := .Site.Params.OgpJsonBaseUrl -}} ←あとで使う

<section class="sidebar">
  <header>POPULAR</header>
  <div>
    <div class="articles sm">
      {{ range $row := (first 5 $json.rows) }}
        ここに内容を書く
      {{ end }}
    </div>
  </div>
</section>

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

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

ブログのビルド用にOGPの情報をJSONで返すサーバーも作った - PIYO - Tech & Life -
前回の続きです。 Hugoでブログリンクの見た目をはてなブログっぽくする - PIYO - Tech &amp; Life - これまでHeartRails Captureを使ってきたブログ内リンクを自前の実装とショートコードに置き換えました。 以
blog.piyo.tech

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

{{- $date := substr (index $row 2) 1 10 }}
{{- $path := printf "%s%s" (index $row 1)  (substr (index $row 2) 1)}}
{{- $url := printf "https://blog.piyo.tech%s" $path}}
{{- $json2 := getJSON (printf "%s%s" $ogpUrl $url) }}
{{- $image := index $json2.Image 0 -}}
{{- $imageUrl := $image.URL -}}

<article class="lism">
  <a href="{{ $path }}">
    <div class="thumb" {{ printf "style='background-image: url(%s)'" $imageUrl | safeHTMLAttr }}></div>
    <div class="inner">
      <div class="title sm">{{ index $row 3 }}</div>

      <ul class="facts sm">
        <li><i class="fa fa-calendar" aria-hidden="true"></i><time datetime="{{ $date }}">{{ $date }}</time></li>
      </ul>
    </div>
  </a>
</article>

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