HugoのテーマをMediumishにした

Ken published on
6 min, 1123 words

Categories: blog

最近ずっと気になっていたことのひとつに、ブログの読みやすさがある。
テーマを変えて、デザインはなかなか気に入っていたものの、自分で見ても読みやすさに不満があった。

ネットで記事を読むときにどういうフォントでどういうフォントサイズが読みやすいのか見ていたところ、Mediumがよさそうだと思った。文章に特化したサービスだけあって、よく考えられているようだ。
もう、いっそのことMediumに移行してしまおうか? とも思ったが、トップページに行くとやっぱり「全体のひとつ」という感があってやめた。次の集団はブログをMedium風にすること。HugoのテーマでMedium風のものがないかなぁ…と検索したら発見!!

Mediumish

[-] lgaida/mediumish-gohugo-theme: A mediumish gohugo theme, ported from jekyll
https://github.com/lgaida/mediumish-gohugo-theme

読みやすそうだったのでこのテーマを使うことにした。

気になる箇所

テーマを採用したところで自分が求めるものがすべて揃っているわけがなく、少し手を加えることにした。

  • トップページをブログにする
  • 公開日時を表示
  • カテゴリ表示
  • タグを記事上部に表示
  • アイキャッチ画像のフルパス対応
  • アラートバーを削除
  • タグクラウドを非表示

テーマを上書きするのは次のファイル。

./layouts
├── _default
   ├── rss.xml
   └── single.html
├── index.html
└── partials
    ├── _shared
       ├── alertbar.html
       └── jumbotron.html
    └── list-partials
        └── postbox.html
要望対象ファイル概要
トップページをブログにするindex.htmllayouts/_default/list.html をindex.htmlとしてコピー。
公開日時を表示single.html記事に公開日時がなかったので表示。
カテゴリ表示single.html記事にカテゴリがなかったので表示。
タグを記事上部に表示single.html記事の最下部にあったタグをタイトル下にも表示。
アイキャッチ画像のフルパス対応index.html
single.html
postbox.html
FrontMatterのimageパラメータを絶対パス対応。
アラートバーを削除alertbar.htmlページ最下部にメールアドレス登録の欄があったので削除。
タグクラウドを非表示jumbotron.html大量のタグでタグクラウドがひどいことになっていたので非表示。

rss.xmlについてはHugoのRSSテンプレートを作成に書いてある。

トップページをブログにする

このテーマはトップページが自己紹介ページのようになっていて、パスを切ってブログ記事を表示するような作りになっている。

[-] Mediumish | Mediumish https://lgaida.github.io/mediumish-gohugo-theme-demo/

デモサイトを見ればわかるが、ページ上部の「Blog」が実際のブログ。
このサイトはブログなので、「Blog」のリンク先をトップページにしたかったので、記事の一覧を表示するlist.htmlindex.htmlとして使うことにした。

diff ./layouts/index.html ./themes/mediumish/layouts/_default/list.html

差分はない。

公開日時を表示

--- ./themes/mediumish/layouts/_default/single.html	2018-11-23 23:17:22.000000000 +0900
+++ ./layouts/_default/single.html	2018-11-24 15:45:03.000000000 +0900
@@ -38,13 +38,25 @@
                         {{end}}
                         {{end}}
                         {{end}}
+                        <span class="post-date">{{ dateFormat "Jan 2, 2006" .PublishDate }} - {{ .ReadingTime }} min read - {{ range .Params.categories }}<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{.}}</a>{{ end }}</span>
                         <!-- Post Title -->
                         <h1 class="posttitle">{{ .Title }}</h1>

カテゴリ表示

--- ./themes/mediumish/layouts/_default/single.html	2018-11-23 23:17:22.000000000 +0900
+++ ./layouts/_default/single.html	2018-11-24 15:45:03.000000000 +0900
@@ -38,13 +38,25 @@
                         {{end}}
                         {{end}}
                         {{end}}
+                        <span class="post-date">{{ dateFormat "Jan 2, 2006" .PublishDate }} - {{ .ReadingTime }} min read - {{ range .Params.categories }}<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{.}}</a>{{ end }}</span>
                         <!-- Post Title -->
                         <h1 class="posttitle">{{ .Title }}</h1>

タグを記事上部に表示

--- ./themes/mediumish/layouts/_default/single.html	2018-11-23 23:17:22.000000000 +0900
+++ ./layouts/_default/single.html	2018-11-24 15:45:03.000000000 +0900
@@ -38,13 +38,25 @@
                         <!-- Post Title -->
                         <h1 class="posttitle">{{ .Title }}</h1>
+                        <!-- Post Categories -->
+                        <div class="after-post-tags">
+                            <ul class="tags">
+                            {{ range .Params.tags }}
+                            * 
+                            <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{.}}</a>
+                            
+                            {{ end }}
+                            
+                        </div>
+                        <!-- End Categories -->
                     </div>

                     <!-- Post Featured Image -->

アイキャッチ画像のフルパス対応

--- ./themes/mediumish/layouts/_default/single.html	2018-11-23 23:17:22.000000000 +0900
+++ ./layouts/_default/single.html	2018-11-24 15:45:03.000000000 +0900
@@ -38,13 +38,25 @@
                     <!-- Post Featured Image -->
                     {{with .Params.image}}
-                        <img class="featured-image img-fluid" src="{{ . | urlize | relURL }}" alt="thumbnail for this post" />
+                        <img class="featured-image img-fluid" src="{{ . | relURL }}" alt="thumbnail for this post" />
                     {{end}}
                     <!-- End Featured Image -->

アラートバーを削除

アラートバーを削除するため、表示用の記述を削除。

cat ./layouts/partials/_shared/alertbar.html                                                                 [/Users/ken/Workspace/blog]+[mediumish]
<!-- Bottom Alert Bar
================================================== -->

タグクラウドを非表示

アラートバー同様にタグクラウドの表示も削除。

cat ./layouts/partials/_shared/jumbotron.html                                                                [/Users/ken/Workspace/blog]+[mediumish]
<!-- Categories Jumbotron
================================================== -->

他にも対応したいこと

  • 見出しに番号を付ける
  • 検索したい

見出しに番号を付けるのはCSSだけでなんとかなるけど、検索はちょっと面倒なので後日。