HugoのThemeを修正する
tech hugo theme
Lastmod: 2020-07-05

Hugoのテーマを色々と探していたのだけど,どうしてもデザインと機能・設定項目とが どちらも理想通りのテーマを見付けられなかった. デザインは自分でいじるのが難しいので,好きなデザインのテーマに対しサイドバーを つけるなど修正をした話.

今回使用したテーマはこちら.

Hugo Primer | Hugo Themes

なおフォークして修正したので,手っ取り早く変更箇所を見たければリポジトリを見るのが早い.

hadacchi/hugo-primer: Hugo theme based on GitHub’s Primer CSS

以下では,変更の意味ごとにdiffをまとめて簡単に説明をつける.

faviconファイルのパスを変更

私のサイトのようにhugoをルートディレクトリではなくサブディレクトリで運用してい る場合,faviconをhugoの外で配置する必要があり分かりづらいので設定のbaseURLで 指定できるようにする.

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a1bc923..a773ba2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -25,7 +25,7 @@
     <meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
     <!-- favicon & touch-icon -->
     {{ if .Site.Params.UseIcon }}
-    <link rel="icon" href="/favicon-64.png">
+    <link rel="icon" href="{{ .Site.BaseURL }}favicon-64.png">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="mask-icon" size="any" href="/pinned-icon.svg">
     {{ end }}

記事のページのToC(目次)のタイトルを「Table of Contents」にする

記事のToCのタイトルが記事タイトルって分かりづらくない?
なので変更する.

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b735167..c0110e1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -45,7 +45,7 @@
 {{ define "side" }}
   {{ if and (gt .WordCount 0 ) (ne .Params.toc "false") }}
     <div id="toc" class="Box Box--blue mb-3">
-      <b>{{ .Title }}</b>
+      <b>Table of Contents</b>
       {{- $toc := .TableOfContents -}}
       {{- $toc := replaceRE `<nav id="TableOfContents">\n<ul>\n<li>\n<ul>` `<nav id="TableOfContents"><ul>` $toc -}}
       {{- $toc := replaceRE `</ul>\n</li>\n</ul>\n</nav>` `</ul>\n</nav>` $toc -}}

記事のページのサイドバーにタグやカテゴリを表示

表示するためのパーツを呼び出す.

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b735167..c0110e1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -53,6 +53,8 @@
     </div>
   {{ end }}
 
+  {{ partial "side.taxonomy.html" . }}
+
   {{ if .Site.Params.ShareTo }}
     {{ $baseURL := .Site.BaseURL }}
     {{ with .Site.Params.ShareTo }}

トップページをカードビューにする

実は cp layouts/_deafult/list.html layouts/index.html しただけ.

diff --git a/layouts/index.html b/layouts/index.html
index 56ae4df..d682680 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -11,45 +11,19 @@
   {{ .Content }}
 
   {{ range .Paginator.Pages }}
-  <div>
-    <div>
-      <a href="{{ .RelPermalink }}">
-        <h3>{{ .Title }}</h3>
-      </a>
-      <small>{{ .Permalink }}</small>
-      {{ .Date.Format "2006-01-02" }}
-    </div>
-    {{ .Summary }}
-  </div>
+    <!-- single page card -->
+    {{ partial "card.page.html" . }}
   {{ end }}
 
-  {{ if gt .Paginator.TotalPages 1 }}
-  <nav class="paginate-container">
-    <div class="pagination">
-      <ul>
-        {{ if .Paginator.HasPrev }}
-        <a href="{{ .Paginator.Prev.URL }}" class="previous_page">Prev</a>
-        {{ else }}
-        <span class="previous_page disabled">Prev</span>
-        {{ end }}
-
-        {{ range .Paginator.Pagers }}
-          <a href="{{ .URL }}">
-            {{ .PageNumber }}
-          </a>
-        {{ end }}
-
-        {{ if .Paginator.HasNext }}
-        <a href="{{ .Paginator.Next.URL }}" class="next_page">Next</a>
-        {{ else }}
-        <span class="next_page disabled">Next</span>
-        {{ end }}
-      </ul>
-    </div>
-  </nav>
-  {{ end }}
+  <!-- paginator nav -->
+  {{ partial "paginator.html" . }}
 
 
 </div>
 
 {{ end }}
+
+
+{{ define "side" }}
+  {{ partial "side.taxonomy.html" . }}
+{{ end }}

参照したwebsite

comments powered by Disqus