HugoのBlowfishテーマでArticleショートコードを常にカード表示にするカスタマイズ方法です。List設定に依存せず、記事リンクをカード化できます。
BlowfishテーマにはArticleショートコードがあります。記事名・タグ・サマリーなどを表示した記事リンクを埋め込めます。
ただし、デフォルトではカードスタイルで表示するかどうかはparams.list.showCardsに依存します。このため、List表示と切り分けることができません。
結果として「Listは通常表示」「Articleショートコードはカード表示」といった使い分けが難しくなっています。
この記事では、Articleショートコードを常にカード表示にするための方法を紹介します。
- Windows 11
- Git Bash
- Hugo v0.150.0
- Blowfish v2.90.0
ショートコードテンプレートの編集
#テーマ内のショートコードテンプレートをプロジェクト側にコピーします。
Bash
cp themes/blowfish/layouts/partials/article-link/_shortcode.html layouts/partials/article-link/_shortcode.html
コピーしたファイル内の条件{{ if site.Params.list.showCards }}を{{ if true }}に置き換えます。
layouts/partials/article-link/_shortcode.html
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| {{ $articleClasses := "group-hover-card group flex flex-wrap md:flex-nowrap article relative" }}
{{ if true }}
{{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
{{ else }}
{{ $articleClasses = delimit (slice $articleClasses "") " " }}
{{ end }}
{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }}
{{ if true }}
{{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }}
{{ else }}
{{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }}
{{ end }}
{{ $articleInnerClasses := "" }}
{{ if true }}
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-2.5 pl-4") " " }}
{{ else }}
{{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }}
{{ end }}
|
これでArticleショートコードは常にカード表示されるようになり、List表示設定に依存せずリッチな記事リンクをカード化できます。
