RobustはHugoのテーマの1つ. デモページのようなブログ風のページを作ることができる.
リポジトリは https://github.com/dim0627/hugo_theme_robust.gitにある.
HugoやRobust自体の標準で設定する必要のある事.
タグ/カテゴリ/シリーズの分類機能を使うには config.toml を少し編集してやる必要がある. 以下を追記する.
[taxonomies]
tag = "tags"
category = "categories"
series = "series"
また, 記事にカテゴリを割り当てる際はフロントマターを以下のように設定する.
---
title: "hoge"
date: piyo
categories :
- "po"
- "popo"
---
デフォルトだと要約されて表示される記事の文面がかなり長めに表示される. それを日本語用に適切な長さにするためには config.toml に以下を追記する.
hasCJKLanguage = true
記事のサムネイルも設定できる.
お好みの画像をjpgファイルにして static/images/default.jpg におけば良い.
各記事に個別にサムネイルを設定することもできる. 記事のフロントマターに以下を追記すれば良い.
thumbnail: "images/hoge/thumbnail.jpg"
すると static/images/hoge/thumnail.jpg がサムネイル画像になる. サムネイル画像自体はpngでもsvgでも入れてくれる. 要はブラウザ側がそのファイル形式に対応できているかによる.
記事の最初に目次をつけることもできる. デフォルトでは挿入されないが, フロントマターに以下を追記すると目次が表示されるようになる.
toc: true
画像はShortcodeを使って挿入できる. 以下を本文中に挿入すれば良い. ただしShortcodeの前後は空行にしておくこと.
{{% img src="images/foo/bar.jpg" w="600" h="400" caption="hoge" href="https://example.com" %}}
captionとhrefは省略可能.
disqusに登録してshort nameを貰えれば, 後は config.toml を以下のように設定するだけ.
disqusShortname = "hoge"
copyrightを追加する. クリエイティブ・コモンズの画像なり文章なりを無理やり入れることで出来た. config.toml を以下のように設定した.
copyright = "Copyright © 2017-2017, BrownieAlice.<br><a rel='license' href='http://creativecommons.org/licenses/by-sa/4.0/'><img alt='クリエイティブ・コモンズ・ライセンス' style='border-width:0' src='https://i.creativecommons.org/l/by-sa/4.0/80x15.png' /></a><br>このサイトのテキストは原則として <a rel='license' href='http://creativecommons.org/licenses/by-sa/4.0/'>クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンス</a> の下に提供されています."
すごい無理やり….
一部はRobustのthemeを直接いじらないと設定できない.
右のサイドバーにAboutを追加したい. これをするには layouts/partials フォルダを作りそこに sidebar.html を追加し中身を以下のようにする.
<aside class="l-sidebar">
<div class="sections sidebar">
<section class="sidebar">
<header>ABOUT</header>
<div>
hogehogehoge. <br>
<div align = "center">
<a href = "https://example.com/">foo</a> /
<a href = "https://example.com/">bar</a> /
<a href = "https://example.com/">poyo</a> /
<a href = "https://example.com/">piyo</a>
</div>
</div>
</section>
<section class="sidebar">
<header>LATESTS</header>
<div>
<div class="articles sm">
{{ range $i, $p := (first 10 .Site.Pages) }}
{{ .Render "li_sm" }}
{{ end }}
</div>
</div>
</section>
{{ range $key, $value := .Site.Taxonomies }}
<section class="sidebar">
<header>{{ $key | upper }}</header>
<div>
<ul class="terms">
{{ range first 10 $value.ByCount }}<li><a href="{{ $.Site.BaseURL}}{{ $key }}/{{ .Name | urlize }}">{{ .Name }}</a></li>{{ end }}
</ul>
</div>
</section>
{{ end }}
</div>
</aside>
実はほとんどrobustの layouts/parials/sidebar.html のコピー. それを少し改変しただけ. themes/layouts より layouts のほうが優先されるのでthemes フォルダを直接いじることなくカスタマイズすることができる.
iPhone向けのlogoは static/images/logo.png を配置すればすむ. ただ普通は林檎みたいな産業廃棄物は使わないのでちゃんと設定しないといけない.
layouts/partials フォルダに meta.html を作り中身を以下のようにする.
<meta charset="utf-8">
<meta name="pinterest" content="nopin">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="theme-color" content="#263238">
{{ with .Site.Params.contact }}<meta name="contact" content="{{ . }}">{{ end }}
{{ .Hugo.Generator }}
<link rel="apple-touch-icon" href="{{ .Site.BaseURL }}images/logo.png">
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}favicon.ico">
{{ with .RSSLink }}<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ . }}">{{ end }}
<link rel="canonical" href="{{ .Permalink }}">
そうしたあと static フォルダに favicon.ico を配置すればアイコンが表示されるようになる.
dim0627/hugo_theme_robust
HUGO のテーマ Robust のカスタマイズ - zzzmisa's blog
Github Pages/Hugoでブログを作成してみた - A1 Blog