Hugo テーマ作成

とりあえず、ベーシックなテンプレをインストールしましょう。

git clone https://github.com/gohugoio/hugoBasicExample.git

次に、自作のテーマを作りましょう。クローンしたリポジトリに移って、早速テーマを作成します。

cd hugoBasicExample
hugo new theme [Your theme name]

とのことなので私は

hugo new theme GoldExperience

でいきます。themes/以下にフォルダが作成されているのを確認できると思います。

まず、hugoBasicExample/config.tomlを弄ってテーマの読み込み設定を行います。下記を書き込みましょう(激うまギャグ)。

theme = "GoldExperience"

Semantic UI インストール

いつの日かVuetify使いたいと言っていました。 Hugoの自作テーマを作ろう！[外伝] - pop-web

それは今も変わらないのですが、Hugoとは相性が悪そうです。

Semantic UIというのが気に入ったので、今回はこれを使ってみましょう。

『Simpler Setup』からダウンロードしてきてstatic配下に設置

semantic-ui.com

f:id:pop-ketle:20211124073308p:plain

こんな感じのフォルダ構成になっていると思います(package.jsonはないかも)。

.
├── LICENSE
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   ├── index.html
│   └── partials
│       ├── footer.html
│       ├── head.html
│       └── header.html
├── package.json
├── static
│   ├── Semantic-UI-CSS-master
│   ├── css
│   └── js
└── theme.toml

まず、ちゃっちゃとSemantic UIを読み込みつつ画像を表示するようにします。

相変わらずコードブロックで表示がおかしくなるので、行間を詰めて書いてます(多分コードブロックでファイル名を表示するためのCSS周りがおかしいんだろうけど、ファイル名表示できないのはかなり不便なのでそのまま放置してます)。皆さんは適宜改行を入れてください。私も実コードは改行入れてます。

{{ define "main" }}
<h1>Hello World</h1>
{{ end }}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{ hugo.Generator }}
    <title>{{ .Title }} {{ default "::" .Site.Params.titleSeparator }} {{ .Site.Title }}</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="{{"/Semantic-UI-CSS-master/semantic.min.css" | relURL}}">
</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{{"/Semantic-UI-CSS-master/semantic.min.js" | relURL}}"></script>
<script src="{{"/js/main.js" | relURL}}"></script>

{{ define "main" }}
<article>
    {{ .Content }}
</article>
{{ end }}

<!DOCTYPE html>
<html lang="{{ .Page.Language | default "ja" }}" class="js csstransforms3d">
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}
    </body>
</html>

大雑把に説明するとbaseof.htmlが全ての基本です。

baseof.html内の下記の部分でコンテンツ(とりあえず最初はindex.html)を読み込んでいます。

<div id="content">
{{- block "main" . }}{{- end }}
</div>

あとは、見ればなんとなくわかると思いますが、適宜head.html、header.html、footer.htmlを読み込んでいます。

hugoBasicExample/themes/GoldExperience/static/js/main.jsは自分でファイルを作成しましょう。今は空です、後々書き込みます。

ここらで、Hugoのサーバを立ち上げてみましょう。

$ hugo server
// config.tomlにthemeを設定していない場合はこっち
$ hugo server -t GoldExperience

多分こんな感じになると思う。これからheader.htmlを書き込んでいく。

f:id:pop-ketle:20211124090912p:plain

まずメニューバーみたいなものが欲しいので作ってみようと思う。

前述したように、今回はSemantic UIというライブラリを使う。 header.htmlと.jsファイルに書き込んでいく。

<div class="ui celled grid">
    <div class="row">
        <div class="three wide column">
            <!-- サイドバー トグルボタン -->
            <div class="ui fixed menu">
                <div class="menu">
                    <div id="js-sidebar" class="item"><i class="icon large grey content"></i></div>
                </div>
            </div>
            <!-- サイドバー -->
            <div class="ui sidebar inverted vertical menu">
                <a class="item">1</a>
                <a class="item">2</a>
                <a class="item">3</a>
            </div>
        </div>
        <div class="thirteen wide column">
            <p></p>
        </div>
    </div>
</div>

$('#js-sidebar').click(function() {
    $('.ui.sidebar').sidebar('toggle');
});

左上の三つのバーみたいなものをクリックするとトグル式でメニューのような物がスライドして出てくるようになったと思う。かっこいいな！

f:id:pop-ketle:20211126153934p:plain

ゴリゴリ触ってサイドバーを弄っていく。

static配下にimagesフォルダを作って、top_icon.jpgを配置して読み込んで、これをサイドバーの上部に配置してみる(猫画像にしておいた)。ついでにconfig.tomlにauthorの情報を追加して配置する。

かわいいので Flag | Semantic UI このサイトを参考に、ロケーションに応じて国の旗が立つようにする。

<div class="ui celled grid">
    <div class="row">
        <div class="three wide column">
            <!-- サイドバー トグルボタン -->
            <div class="ui fixed menu">
                <div class="menu">
                    <div id="js-sidebar" class="item"><i class="icon large grey content"></i></div>
                </div>
            </div>
            <!-- サイドバー -->
            <div class="ui sidebar inverted vertical menu">
                <div class="ui segment">
                    <img class="ui centered medium image" src="/images/top_icon.jpg">
                    <p style="text-align: center">
                        {{ if .Site.Author.name }} Name: {{ .Site.Author.name }} <br>{{ end }}
                        {{ if .Site.Author.location }} Place: {{ .Site.Author.location }}<i class="{{ .Site.Author.location | urlize }} flag"></i>{{ end }}
                    </p>
                </div>
                <a class="item" href={{ .Site.BaseURL }}>TOP PAGE</a>
                {{ range .Site.RegularPages }}
                    <a class="item" href={{ .Permalink }}>{{ .Name }}</a>
                {{ end }}
            </div>
        </div>
        <!-- <div class="thirteen wide column">
            <p>{{ .Site.Title }}</p>
        </div> -->
    </div>
</div>

デフォルトで色々書いてあるので、端折って書くがこんな感じで[author]の情報を書く必要がある。(流石に読みにくいので、今回は改行をそのままにする。改行タグが余分に含まれるけどまぁ仕方ない。)

baseURL = "https://gohugo.io"
title = "Theme GoldExperience"
paginate = 3
languageCode = "ja"
DefaultContentLanguage = "ja"
enableInlineShortcodes = true
ignoreErrors = ["error-remote-getjson"]
theme = "GoldExperience"

[outputs]
  home = ["html", "rss", "json"]

[author]
  name = "pop-ketle"
  location = "Japan"

f:id:pop-ketle:20211127092221p:plain