春雨日記 about me tags

テーマを新しく作った

目次

前々よりテーマを作りたいと思っていましたが，気が向いたので作ってみました．

hugo-theme-harusame

安直な名前です笑

ソースは

https://git.haru3.me/haru/hugo-theme-harusame

に置いてありますので，使ってもらえると喜びますし，テーマを製作する際の参考にして頂ければと思います．

使う人居ないとは思いますが，備忘録的に設定方法書いておきます．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

baseURL = 'http://localhost:1313/'
languageCode = 'ja-jp'
title = 'My New Hugo Site'
theme = 'harusame'

[taxonomies]
  category = 'categories'
  tag = 'tags'

[Params]
  profile_img = '/img/paper.png'
  profile_author = 'user'
  profile_biohtml = '挨拶<br>改行'

[menu]
[[menu.main]]
  name = 'test1'
  url = '/about/'
[[menu.main]]
  name = 'test2'
  url = '/about2/'

[Params]にてプロフィールの項目を操作します．biohtmlはsafeHTMLとしてある為タグを使えます．

指定しなかった項目は要素が作成されません．

上のナビゲーションにある項目は[Menu.main]にて定義します． 複数追加すると全て表示されます．

自分の為に作ったので自由度はこのぐらいです…

使いたい時はテーマ自体をカスタマイズして下さい．笑

なお，作る際にはこのページを大変参考にさせて頂きました．

https://retrolog.io/blog/creating-a-hugo-theme-from-scratch/

躓いた点

Paginatorをheadから扱いたい

canonical要素にきちんとページを含めたURLを指定したかったのですが，.Permalinkでは取得できませんでした． そこで，Paginatorが存在する時はPaginator.URLで取得するようにしました．．

https://tekki-tipps.de/en/hugo-multiple-pagination/

このページが参考になりました．

私のテーマでは，baseof.htmlを

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
    {{ $paginator := slice }}
    {{ if .IsHome }}
    {{ $paginator = .Paginate (where .Site.RegularPages "Section" "posts") }}
    {{ else }}
    {{ if not .IsPage }}
    {{ $paginator = .Paginate .Pages }}
    {{ end }}
    {{ end }}
    {{- partial "head.html" . -}}

としてあり，ホーム要素，もしくはカテゴリ等のページでは無い要素にてPaginateを行うようにしました．

こうすることでhead.htmlから参照可能になります．

1
2
3
4
5

    {{ if .Paginator }}
    <link rel="canonical" href="{{ .Paginator.URL | absURL }}">
    <meta property="og:url" content="{{ .Paginator.URL | absURL }}" />
    <meta property="og:type" content="blog" />
    {{ else }}

Syntax Highlighterが崩れる

よくMarkdownのコード要素を使っていたのですが，どうもwidthを守ってくれないようです．

で，CSSでdiv.highlightにてwidth: 100%にしてみたところ，confファイルのみ効いていない事が判明．

見てみるとここではlighlightクラスではなかっった…

というわけで，CSSにてダーティハックをしております．多分言語によってはまた対応が必要だと思う．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

div.highlight{
    padding: 0.5rem;
    overflow-x: scroll;
    max-width: 100%;
}

code.language-conf{
    padding: 0.5rem;
    overflow-x: scroll;
    max-width: 100%;
    display: inline-block;
}

モバイルとデスクトップの切り替え

最初はCSSでうまいことやりたかったのですが，良い案が浮かばなかったのでjsでやりました．

具体的には，コンテナをflexで作成し，一定のinnnerWidth以下だと並びを縦にしています．

クソコードなので気になる人はstatic/js/harusame.jsを見てくれ…

おわりに

いざ書こうと思ったら浮かばないな… 結構時間掛かったんですけどね．

ところで，下部のナビゲーションどうですか．結構気に入ってるんですけど笑