Hugo v0.55 で Hugo Icarus テーマ を使う

Hugo v0.55Hugo Icarus(Last Updated 2017-05-20)のテーマを使いたいけど、使い方がよくわからなかったので、調べた。

とりあえずicarusのテーマ検証用にブログをつくる

コマンドでサイトを作成

$ hugo new site HugoIcarus
$ cd HugoIcarus/themes
$ git clone https://github.com/digitalcraftsman/hugo-icarus-theme.git

config.toml にテーマを設定

theme = "hugo-icarus-theme"

content/post/foobar.md に適当に記事を追加

---
title: "foobar.md"
date: "2019-05-19T17:25:04+09:00"
draft: false
---
foooooooooo
<!--more-->
barrrrrrrrr

hugo server でローカルサーバを起動…できない。 2019/5/19に使える最新のHugo.exe(v0.55)では動かないようだ…

エラー内容は以下。ながながと出力されたので諦めようかと思ったが、同じようなエラーが多いので自分で直すことにする。

Building sites …

WARN 2019/05/19 12:02:40
Page's .Hugo is deprecated
and will be removed in a future release. Use the global hugo function.

WARN 2019/05/19 12:02:40
Page's .RSSLink is deprecated
and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.

ERROR 2019/05/19 12:02:40
render of "home" failed:
execute of template failed:
template: index.html:2:7: executing "main" at <partial "article_list" .>:
error calling partial: "hugo-icarus-theme\layouts\partials\article_list.html:12:87":
execute of template failed:
template: partials/article_list.html:11:11:
executing "partials/article_list.html" at <partial "article_header" .>:
error calling partial: "hugo-icarus-theme\layouts\partials\article_header.html:12:87":
execute of template failed:
template: partials/article_header.html:12:87:
executing "partials/article_header.html" at <.Site.Params.date_format>:
invalid value; expected string

ERROR 2019/05/19 12:02:40
render of "page" failed:
execute of template failed:
template: _default\single.html:2:7: executing "main" at <partial "single_article" .>:
error calling partial: "hugo-icarus-theme\layouts\partials\single_article.html:12:87":
execute of template failed:
template: partials/single_article.html:7:11:
executing "partials/single_article.html" at <partial "article_header" .>:
error calling partial: "hugo-icarus-theme\layouts\partials\article_header.html:12:87":
execute of template failed:
template: partials/article_header.html:12:87:
executing "partials/article_header.html" at <.Site.Params.date_format>:
invalid value; expected string

ERROR 2019/05/19 12:02:40
.Render: failed to execute template "_default/summary.html"
  v: "hugo-icarus-theme\layouts\_default\summary.html:20:91":
execute of template failed:
template: _default/summary.html:20:91:
executing "_default/summary.html" at <.Site.Params.date_format>:
invalid value; expected string
ERROR 2019/05/19 12:02:40
failed to render pages:
render of "page" failed:
execute of template failed:
template: _default\single.html:2:7: executing "main" at <partial "single_article" .>:
error calling partial: "hugo-icarus-theme\layouts\partials\single_article.html:12:87":
execute of template failed:
template: partials/single_article.html:7:11:
executing "partials/single_article.html" at <partial "article_header" .>:
error calling partial: "hugo-icarus-theme\layouts\partials\article_header.html:12:87":
execute of template failed:
template: partials/article_header.html:12:87:
executing "partials/article_header.html" at <.Site.Params.date_format>:
invalid value; expected string

Total in 137 ms

Error:
Error building site:.Render:

failed to execute template "_default/summary.html"
 v: "hugo-icarus-theme\layouts\_default\summary.html:20:91":
execute of template failed:
template: _default/summary.html:20:91:
executing "_default/summary.html" at <.Site.Params.date_format>:
invalid value; expected string

Hugo 0.55 リリースでまた後方互換性が壊れた — ゼロから始める Hugo | text.Baldanders.info に大体書いてあった。

  • .Hugohugo に変更する。
  • .RSSLink を ヘッダでは.Site.Home.AlternativeOutputFormats.Get "RSS" に、ヘッダ以外では .OutputFormats.Get "RSS" に変更する。

layouts/partials/head.html

- {{ .Hugo.Generator }}
+ {{ hugo.Generator }}

layouts/partials/head.html

- {{ with .RSSLink }}
+ {{ with .Site.Home.AlternativeOutputFormats.Get "RSS" }}

layouts/partials/profile.html

- <td><a href="{{ .Site.RSSLink }}" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></td>
+ <td><a href="{{ .OutputFormats.Get "RSS" }}" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></td>

長々ERRORが出ている部分は config.toml (※ theme.tomlではない) の設定が 不足しているだけだったので下記の「icarusの設定」をすればエラーはなくなる。

icarusの設定

icarusのgithub

themes/hugo-icarus-theme/exampleSite/config.tomlHugoサイトのルートフォルダ/config.toml にマージ config.tomlにはDisqusなどの設定があるようだが詳しい内容はまだ見ていない。 themesDirの設定をコメントアウトしないとテーマが動かない

- themesDir = "../.."
+ # themesDir = "../.."

themes/hugo-icarus-theme/exampleSite/data/l10n.toml を を Hugoサイトのルートフォルダ/data/l10n.toml に上書き。

とりあえず、この状態で hugo server して http://localhost:1313/ を見ればサイトが表示されるはず。

UniqueIDに関する警告の除去

動かしてみると以下の警告が表示された。

WARN 2019/05/19 17:26:42
Page's .UniqueID is deprecated and
will be removed in a future release. Use .File.UniqueID.

この警告を除去するために、article_footer.htmlに以下の変更をする。

icarusの設定 config.toml

サイドバーに表示するウィジェット(最近の記事, カテゴリー, タグ, タグクラウド)を 表示するかしないかを切り替える。

[params.widgets]
    recent_articles = false
    categories = true
    tags = true
    tag_cloud = true

icarusの投稿のフロントマッター

---
tags:
- タグ1
- タグ2
categories:
- カテゴリー1
- カテゴリー2
description: "説明"
menu: "main" # "main"を指定するとヘッダのメニューに記事が表示される
banner: "サムネイル画像のパス" # /static/ フォルダがルート
images: ["asdf", "asdfff"]
disable_comments: true # disqusコメントを表示しない
nodateline: true # 日付の部分(文字数や読了時間も含む)を表示しない
disable_profile: true # プロフィールの部分を表示しない
disable_widgets: true # ウィジェットを表示しない
---

プロフィールとウィジェットを表示しない場合のバグの修正

disable_profiledisable_widgetを両方ともtrueにすると幅が広がるような仕様のようだが、バグで動いていなかったので以下のように修正

  <style>
-     .full-width {
+     #main {
          width: 100% !important;
      }
  </style>

ウィジェットは表示するがプロフィールを常に表示しない

「プロフィールを常に表示しない」という設定はないので追加する。

また、プロフィールを表示しない場合に、 画面の幅が狭い時に右上に表示されるプロフィール表示ボタンが機能しないバグがある。

これも同時に修正する。

(1) config.toml にプロフィールを表示しない設定を追加する

[params]
    icarus_disable_profile = true

(2) baseof.html を編集する

左カラムのプロフィールを非表示にしても、HTML自体はレンダリングしないと、 右上のプロフィールボタンが機能しなくなるので、表示条件を削除する。

- {{ if not .Params.disable_profile }}
    {{ partialCached "profile" . }}
- {{ end }}

(3) 右上のプロフィールボタンのバグ修正 (head.html)

以下のコードを head.html の適当な位置に挿入する。

{{ if .Params.disable_profile | or .Site.Params.icarus_disable_profile }}
<style>
#profile { display: none!important; }
#profile.card { display: block!important; }
</style>
{{ end }}

プロフィールを表示しない時のstyleを調整

プロフィールを表示しないと表示領域が余るため、 幅を適当に変更する。

head.html に以下を挿入する。

{{ if .Params.disable_profile | or .Site.Params.icarus_disable_profile }}
<!-- 左カラムのプロフィールを表示しない場合のサイズ調整 -->
<style>
@media screen and (min-width: 1200px) {
  #main { width: calc(200px + 52.307692307692314%); }
}
@media screen and (min-width: 1200px) {
  #sidebar { width: calc(50px + 21.53846153846154%); }
}
</style>
{{ end }}

widthは適当に調整する。

最近の記事のタイトルやカテゴリなどが大文字になるのをやめる

style.css から text-transform: uppercase; のスタイルを削除、またはコメントアウトする。

uppercaseで検索すれば該当箇所が見つかる。

/* text-transform: uppercase; */

CSSの編集

font-style: italic

イタリックは好みではないので、italicで検索して該当部分をコメントアウトした。

Webフォントの読み込み

読み込みが遅くなるのが避けるため、該当部分head.htmlから削除した。

- <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

SRI (サブリソース完全性) 対応

jqueryなどをcdnから読み込んでいるがSRIで記述されていないので、SRIで記述する。

(1) head.html

  <!-- needs to be loaded first for following scripts -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha256-ImQvICV38LovIsvla2zykaCTdEh1Z801Y+DSop91wMU=" crossorigin="anonymous"></script>

(2) footer_js.html

- <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" integrity="sha256-SDRP1VVYu+tgAGKhddBSl5+ezofHKZeI+OzxakbIe/Y=" crossorigin="anonymous"></script>

icarusのギャラリー表示用のショートコード

ショートコードで画像を複数していしてギャラリーを作成できる。

{{< gallery
    "/img/placeholder.png"
    "/img/placeholder.png"
    "/img/placeholder.png"
>}}

指定する画像の場所は themes/hugo-icarus-theme/static/img/画像ファイル名

target="_blank" な要素に rel="noopener noreferrer" をつける

Tabnabbing対策のため、 target="_blank" な要素に rel="noopener noreferrer" をつけたい。

noopener_blank の付いたリンク先で開いた画面にアクセスできてしまうセキュリティ上の問題に対処するためのもので、 最近のブラウザであればほぼサポートされている

noreferrer をつけると _blank で開くURLのリクエストにリファラーを送信しない。 noopener がサポートされていないブラウザのために noreferrer が使われていたが、 最近のブラウザなら不要なのでつけなくてもいいかもしれない。

なので、 _blank でテーマを検索して、外部リンクしているHTMLでtarget="_blank"が付いているものにrel="noopener"をつけた。 (article_footer.htmlsocial.html)

propertyIgnoredDueToDisplay の警告が style.css で出る

これどうすりゃいいんだ?

CSSがおかしいのだろうけど、とりあえず無視した。

Share
関連記事