HUGOの記事一覧をカードみたいにする方法

たかし

あー、HUGOで作ったブログの見た目をWordPressみたいにできないかな。

記事一覧をカードみたいに表示したいんだけど。

スゴショウ

それメチャわかります。

僕のやり方とコードを共有するので参考にしてください！

WordPressだったらカンタンに導入できる、記事一覧のカード表示。
HUGOで実装しようにも、なかなか良いテンプレートがない。

ということで、今回私が記事一覧をカード状にした方法とコードを紹介します。
参考にしてみてください。

HUGOの記事一覧カードの完成形を決める

1. スマホとPCでデザインは分ける
2. 参考デザインを探す
3. 入れるパラメータを決める

1つずつ、掘り下げていきます！

スマホとPCでデザインは分ける

投稿カードを作る前に、スマホとPCで別々のデザインで作ることを考えましょう。
PCで見やすい投稿カードがスマホだと見にくかったり、その逆もあります。

手間はかかりますが、両方作成する前提で考えましょう。
タブレットもありますが、PCかスマホのレイアウトをそのまま使うか少し調整するくらいで良いでしょう。

参考デザインを探す

いきなり投稿カードを作ると、挫折の原因になるので先にカードの参考デザインを探しましょう。

私はPCだと縦長のボックス、スマホだと横長のボックスが好きなのでそれぞれ探しました。

「投稿一覧 デザイン」とかで画像検索したら、参考になりそうな記事カードのレイアウトがでてくるので、そこから探すと便利です。

スゴショウ

自分はWordPressのときにつかっていた、

SWELLというテーマを参考にしました。

入れるパラメータを決める

だいたいのデザインが決まったら、記事カードに入れるパラメータを決めましょう。

上記あたりのパラメータがあれば足りるでしょう。
HUGOでもともと定義されていない変数は、頭文字が小文字になるので気をつけてください。

HUGOの記事一覧カードを制作する

では、実際の制作に入りましょう。

1. パラメータを持ってくる
2. HTMLで入れ子にする
3. CSSで装飾する

上記の順番に進めていきます。

パラメータを持ってくる

まずはじめにパラメータを持ってきましょう。
実際に私が使ってるパラメータをそのまま載せます。

今回使用したパラメータは7つです。

• 最新記事 {{ range.Site.RegularPages.ByDate.Reverse }}
• リンク {{ .Permalink }}
• 記事のタイトル {{ .Title }}
• 記事ヘッダー {{.Params.image }}
• 記事の親セクション {{.Section}}
• 記事の要約 {{ .Summary | plainify }}
• 投稿日 {{.Date.Format “2006-01-02”}}

記事ヘッダーの{{.Params.image }}は私が設定してる値なので、ご自身の環境に合わせてください。

あとは、記事の要約にあるplainifyは要約元テキストからHTMLタグを外す処理をする関数です。

スゴショウ

そのほかに自分で必要な値があったら適時用意してください。

HTMLで入れ子にする

パラメータをHTMLでマークアップして入れ子にしていきます。
そのまま私のコードを載せます。

<ul class="list-article-box">
            {{ range first 5 .Site.RegularPages.ByDate.Reverse }}
            <a class="list-article-card-link" href="{{ .Permalink }}">
                <li class="list-article-card">
                    <div class="list-article-card-link-head">

                        <img class="list-article-card-image" src="{{.Params.image }}" alt="{{ .Title }}のブログカード">

                        <div class="list-article-card-section">{{.Section}}</div>
                    </div>

                    <div class="list-article-card-body">
                        <h3 class="list-article-card-title">{{ .Title }}</h3>
                        <div class="list-article-card-summary">{{ .Summary |  plainify }}</div>
                        <div class="list-article-card-date"><i class="icon-clock"></i>{{.Date.Format "2006-01-02"}}</div>
                    </div>
                </li>
            </a>
            {{ end }}
        </ul>

カード全面をリンクにしたかったので、aタグがliタグの外側に来ています。
細かいところは好みに合わせて調整してください。

CSSで装飾する

あとはcssで装飾したらOKです。
cssもそのまま載せようと思ったのですが、var()で処理してるのが多いので必要そうな部分だけ抜粋して載せます。

  .list-article-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4rem;
  }

  .list-article-card {
    position: relative; 
  }

    .list-article-card-section {
    position: absolute;
    width: fit-content;
  }

ブラウザ幅に合わせて記事カードの数が変わるように親要素をflex-boxに対応させる。
flex-boxの子要素のスキマは親要素のgapで管理した方がコードが短くて済む。

セクション名を画像にラップさせるために、それぞれpositionを設定。

あとは、他の部分のcssの記述に依存すると思うので割愛します。

こんな感じになりました。

スゴショウ

仮完成です！

ページ幅に合わせて最適表示されるように調整します。

まとめ：HUGOの記事一覧カードもWordPressと同じ

HUGOのテーマで日本のブログ向きのものは少ないですが、記事一覧カードの構造自体はWordPressとなんらかわりません。

カードに入れるパラメータを決めたら模写ベースで進めたら完成します。

スゴショウ

まずは、参考にするデザインを探しましょう！