Hugo 備忘録

September 17, 2021

ほぼほぼ備忘録

layout に配置する html は Ananke のレイアウトで使われるものなので他の Theme だとファイル名などが違うでしょう。

title

どのテーマもタイトルでかすぎ。現在、使っている Theme は Ananke。タイトルのサイズを抑えて見やすくするために css で飾りをつける。

layout/partials/head-additions.html を追加してさらに css 追加。

<link rel="stylesheet" href="CSS の URL">

layout/_default/single.html を追加。

Title の装飾をする。h1 全体に装飾すると思わぬところでデザインが崩れるから。

ナビゲーションバー

layout/partials/site-navigation.html を追加。

ナビゲーションバーのバックグラウンドカラーが white-90 で決め打ちだったので black-90 に変更。

各 h1, h2 など

md で # 等を使った時にアンダーラインなどの装飾をしたい。 shortcodes をつくる。これが正しいみたい。div にした方が見やすいけどそうすると goldmark で unsafe を true にしないといけない。

[markup.goldmark.renderer]
  unsafe = true

これよく考えたら .HasShortcode とかこのコンテンツならとか( たぶんそういうのがあるでしょう) の if で切り分けて全体のページに波及させるという方法がありそう。

アドセンス使ってみる

これもショートコードで作った。らくちん。

複数 Theme

これで出来る？

theme = ["ananke", "reveal"]

[params.reveal_hugo]
  custom_css = "/css/slides-fonts.css"

[outputFormats.reveal]
  baseName = "index"
  mediaType = "text/html"
  isHTML = true

reveal を使ったスライドの方は

+++
title = "Programming with Python"
date = "2021-02-20T23:23:11+09:00"
outputs = ["Reveal"]
+++

これどうやってつくったのだろう？全く覚えていない。

個別のレイアウト

フロントマターの type、layout プロパティでレイアウトを指定するを参考にやってみた。

ARTS

posts と ARTS を別にした。ARTS の _index.md を特別なレイアウトにした。基本は list だが、上の部分のイメージをやめている。

index.html に header を追加することで解決している、、、が、これ partial みてるね。というか partial という shortcodes。別のディレクトリの html を差し込みたい。どうすればよいかは謎。

{{ define "header" }}
{{ partial "page-header.html" . }}
{{ end }}

さらに個々の page は summry-with-image.html を使っているのだがここのイメージがでかすぎなので半分にした。

具体的には w-40-ns を w-20-ns にした。

<div class="pr3-ns mb4 mb0-ns w-80 w-20-ns">
  <img src="{{ $featured_image }}" class="db" alt="image from {{ .Title }}">
</div>

あと、なぜか summry-with-image.html を個別の layout/partials にコピーしただけでフォーカス時にイメージが拡大する Javascript が働かくなった(謎)。0.88.1 でも確認してみる予定。

summry の image は各コンテンツの featured_image なので、それを指定すると各コンテンツのページがださい(写真大きすぎ)。 featured_image の写真を各ページで小さくすべき。

Summary

Summary に adsense が入ってしまうので、more で区切ることにした。

<!--more-->

css

ananke は tachyons を使っているので次のサイトが便利でした。

https://segakuin.com/css/tachyons

イメージと Bundle

イメージを static に置かないでよいようにするには Bundle を使えばいいみたいです。 Bundle というと難しいけど、要はディレクトリを作ればよいのです。 Branch Bundle と Leaf Bundle というのがあるらしく、通常のコンテンツは Leaf Bundle です。今まで

$ hugo new posts/0917.md

とやっていたのを

$ hugo new posts/0917/index.md

とやれば Leaf Bundle になります。一方、Bundle をまとめたあげたものが Branch Bundle。中間的な posts とか blog とかが典型的な Branch Bundle。

$ hugo new posts/_index.md

Branch Bundle の場合は _index.md とアンダースコアーが最初に来ます。

イメージ

Ananke で 100% width のイメージになって「ナニコレ?」みたいになってます。

![説明](setsumei.png)

https://qiita.com/atuyosi/items/4100bd502e373c088c74