HugoのテーマをMediumishにした
最近ずっと気になっていたことのひとつに、ブログの読みやすさがある。
テーマを変えて、デザインはなかなか気に入っていたものの、自分で見ても読みやすさに不満があった。
ネットで記事を読むときにどういうフォントでどういうフォントサイズが読みやすいのか見ていたところ、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.html | layouts/_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.htmlをindex.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だけでなんとかなるけど、検索はちょっと面倒なので後日。