<div id="readability-page-1" class="page"><section><a href="https://rein.kr/posts/blog-migration-2023/">Blog 이전하기 (2023)</a>에서 썼던 것처럼 hugo로 블로그를 옮기긴했는데,
내가 원하는 기능을 모두 만족하는 theme이 없더라.
<ul>
<li>Light theme 지원 - 이젠 내가 어두운 화면으로 글 읽기가 힘들다.</li>
<li>Syntax highlight을 사용 중인 Solarized 를 쓸 수 있을 것.</li>
<li>Tag 및 category 지원.</li>
<li>Dark theme 지원 (되면 좋고…)</li>
</ul>
생각 외로 hugo를 쓰는 사용례가 많은지, 단순 개인 블로그 아닌 용도의 theme도 많고, 저걸 다 지원하는 경우가 없더라.
처음 옮겼을 때는 <a href="https://github.com/nanxiaobei/hugo-paper">Paper</a>로 시작했는데, tag 페이지가 동작하지 않아서,
hugo-paper에 기능을 추가로 올렸다는 <a href="https://github.com/adityatelange/hugo-PaperMod">hugo-PaperMod</a>로 옮겨갔다.
근데 이건 뭔짓을 해도 – 아마도 내가 hugo 설정을 이해못한 탓일 것 같지만 – 코드 syntaxh highlight으로 solarized 색상 팔렛을 쓰게 만들질 몰했다. 그래서 마지막으로 <a href="https://themes.gohugo.io/themes/hugo-theme-monochrome/">Monochrome</a>으로 넘어갔는데, 이 위에서 disqus를 못 써서 결국 원점으로 돌아와서 paper로 변경.
<h3 id="paper-theme에-tag-페이지-추가하기">paper theme에 tag 페이지 추가하기</h3>
결국 다시 돌아왔으니 tag만 해결해보자고 검색 좀 하고 구현해봤다.
<code>hugo-paper</code> 프로젝트의 GitHub 이슈를 찾아보니 힌트가 있더라.
<blockquote>
<a href="https://github.com/nanxiaobei/hugo-paper/issues/230">Taxonmies Category Page #230</a>
I think I figured out the issue. The paper theme doesn’t have the terms.html template. I added the terms.html template to the theme and the terms are showing.
</blockquote>
Tag 페이지를 지원하는 <code>PaeprMod</code> 쪽에는 <code>terms.html</code> 파일이 있더라 – <a href="https://github.com/adityatelange/hugo-PaperMod/blob/master/layouts/_default/terms.html"><code>layouts/_default/terms.html</code></a>.
이 내용을 참고해서, 사전순서 정렬대신에 빈도 많은 수 정렬로 수정해서 구현했다.
<img src="https://rein.kr/2024/09/tag-page-v0.png" alt="tag page">
이런 식으로 보이고, 구현도 단순하다.
<div><pre tabindex="0"><code data-lang="html">{{- define "main" }}
&lt;article&gt;
{{- if .Title }}
 &lt;header class="mb-14"&gt;
 &lt;h1 class="!my-0 pb-2.5"&gt;{{ .Title }}&lt;/h1&gt;
 &lt;/header&gt;
{{- end }}

 &lt;section&gt;
 &lt;div&gt;
 {{- $type := .Type }}
 {{- range $key, $value := .Data.Terms.ByCount }}
 {{- $name := .Name }}
 {{- $count := .Count }}
 {{- with site.GetPage (printf "/%s/%s" $type $name) }}
 &lt;span class="ml-1.5 text-lg
 bg-black/[3%]
 dark:bg-white/[8%]"&gt;&lt;a href="{{ .Permalink }}"&gt;
 {{- .Name }}&lt;sup&gt;{{ $count }}&lt;/sup&gt;&lt;/a&gt;
 &lt;/span&gt;
 {{- end }}
 {{- end }}
 &lt;/div&gt;
 &lt;/section&gt;

&lt;/article&gt;
{{- end }}
</code></pre></div><h3 id="빈도-수에-따라서-다른-글자-크기로-표현하기">빈도 수에 따라서 다른 글자 크기로 표현하기</h3>
크기가 눈에 들어오지 않고, 사전순서 정렬이 아니면 찾는게 번거로우니 예전에 WordPress에서 썼던 것처럼
빈도를 글자 크기로, 순서는 사전순서로 하고 싶더라. 그래서 누가 만들어놓은거 없나하고 찾아보니 <a href=""></a> 있더라고.
이걸 참고해서 고치면 아래처럼 보인다.
<img src="https://rein.kr/2024/09/tag-page-v1.png" alt="tag page">
구현은 아래와 같다:
<div><pre tabindex="0"><code data-lang="html">{{- define "main" }}
&lt;article&gt;
{{- if .Title }}
&lt;header class="mb-14"&gt;
 &lt;h1 class="!my-0 pb-2.5"&gt;{{ .Title }}&lt;/h1&gt;
&lt;/header&gt;
{{- end }}

{{ if eq .Type "tags" }}
&lt;section&gt;
 &lt;div class="flex-wrap"&gt;
 {{ if ne (len $.Site.Taxonomies.tags) 0 }}
 {{ $maxFontSize := 3.0 }}
 {{ $minFontSize := 0.7 }}
 {{ $fontSpread := sub $maxFontSize $minFontSize }}
 {{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
 {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
 {{ $spread := sub $max $min }}
 {{ $fontStep := div $fontSpread $spread }}
 {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
 {{ $tagCount := len $taxonomy.Pages }}
 {{ $currentFontSize := (add $minFontSize
 (mul (sub $tagCount $min) $fontStep)) }}
 {{ $weight := div (sub (math.Log $tagCount) (math.Log $min))
 (sub (math.Log $max) (math.Log $min)) }}
 {{ $currentFontSize := (add $minFontSize
 (mul (sub $maxFontSize $minFontSize) $weight)) }}
 {{- with site.GetPage (printf "/%s/%s" "tags" $name) }}
 &lt;span class="ml-1.5"&gt;&lt;a
 href="{{ "/tags/" | relURL }}{{ $name | urlize }}"
 style="font-size: {{ $currentFontSize }}rem;"&gt;
 {{- .Name }}&lt;sup&gt;{{ $tagCount }}&lt;/sup&gt;&lt;/a&gt;
 &lt;/span&gt;
 {{- end }}
 {{ end }}
 {{ end }}
 &lt;/div&gt;
&lt;/section&gt;
{{ else }}
&lt;!-- 생략 --&gt;
{{ end }}
&lt;/article&gt;
{{- end }}
</code></pre></div></section></div>

rein's world

Blog 이전하기 (2023)에서 썼던 것처럼 hugo로 블로그를 옮기긴했는데, 내가 원하는 기능을 모두 만족하는 theme이 없더라.
Light theme 지원 - 이젠 내가 어두운 화면으로 글 읽기가 힘들다. Syntax highlight을 사용 중인 Solarized 를 쓸 수 있을 것. Tag 및 category 지원. Dark theme 지원 (되면 좋고…) 생각 외로 hugo를 쓰는 사용례가 많은지, 단순 개인 블로그 아닌 용도의 theme도 많고, 저걸 다 지원하는 경우가 없더라. 처음 옮겼을 때는 Paper로 시작했는데, tag 페이지가 동작하지 않아서, hugo-paper에 기능을 추가로 올렸다는 hugo-PaperMod로 옮겨갔다.

hugo-paper에 tag cloud 추가하기

댓글