HUGO on kenji.blog

Hugo 指令列表

Fri, 31 May 2024 01:36:00 +0900

什麼是 Hugo

Hugo 是一個靜態網站生成器。您可以透過將 Markdown 檔案轉換為 HTML 來建立網站。Hugo 使用 Go 語言編寫，運行速度非常快。

這個部落格也是使用 Hugo 建立的。

安裝 Hugo CLI

要安裝 Hugo CLI，請執行以下指令。

※ 這是 macOS 的範例。對於其他作業系統，請參考官方文件。

1

brew install hugo

您可以使用 Homebrew 進行安裝。

Hugo 指令列表

Hugo 提供了各種指令。以下總結了常用的指令。

建立新網站

1

hugo new site <網站名稱>

建立新網站的指令。在 <網站名稱> 中指定網站的名稱。

建立新文章

1

hugo new <文章名稱>.md

建立新文章的指令。在 <文章名稱> 中指定文章的名稱。

啟動伺服器

1

hugo server

啟動本地伺服器的指令。可以透過 http://localhost:1313 進行存取。

建置網站

1

hugo

建置網站的指令。HTML 檔案將產生在 public 目錄中。

部署網站

1

hugo deploy

部署網站的指令。部署目標的設定在 config.toml 檔案中進行。

顯示文章列表

1

hugo list all

顯示文章列表的指令。

確認設定

1

hugo config

確認設定的指令。

顯示幫助

1

hugo help

顯示幫助的指令。

顯示版本

1

hugo version

顯示版本的指令。

以上是 Hugo 的指令列表。還有其他各種指令可供使用，請參考官方文件。

參考資料

Hugo 官方文件

如何從 Google Analytics 取得並配置熱門頁面排行榜

Mon, 10 Apr 2023 20:26:57 +0900

前言

使用名為 Ranklet 的服務，可以從 Google Analytics 取得熱門頁面排行榜並輕鬆進行配置。

本文將介紹如何將其配置到 HUGO 部落格中。

效果預覽

事前準備

網站已設定 Google Analytics

步驟

前往 Ranklet
點擊 Sign in with Google 並使用 Google 帳號登入（需與已綁定 Google Analytics 的帳號一致）

點擊 允許

設定基本資訊

如上圖所示進行設定。

在 Google Analytics ビュー（Google Analytics 檢視）中，選擇想要取得排行榜的檢視。

設定文字取代

如上圖所示進行設定。此設定是為了刪除頁面標題中的 | kenji.blog。

設定範本

HTML（隱藏了排名的數字）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS（修改了字型大小，並讓說明文字以 3 行顯示）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // 重設
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 行數 */
 }
 }
 }
}

JavaScript 保持不變

從「サイトへの掲載（發佈至網站）」複製 HTML

複製畫面上顯示的 HTML

貼上至 HUGO 範本中

建立 layouts/partials/ranklet.html，並將複製的 HTML 貼上

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

在 layouts/_default/single.html 中的 </footer> 前一行貼上以下程式碼

1

{{- partial "ranklet.html" . }}

以上步驟完成。這樣一來，頁面下方就會像本頁底部一樣顯示出排行榜。

如何在 hugo 中啟用 KaTeX（LaTeX 風格的數學公式顯示）

Fri, 31 Mar 2023 23:11:26 +0900

什麼是 KaTeX

KaTeX 是一個用於在 HTML 中顯示 LaTeX 風格數學公式的 javascript 函式庫。

具體來說，您可以顯示如下的數學公式。

$$f(x) = x^2 + x + 41$$

似乎還有其他 LaTeX 風格的數學公式顯示函式庫，但 KaTeX 以簡單且快速而聞名。

如何導入到 hugo

在 hugo 的資料夾層次結構中建立一個新的 layouts/partials/math.html。

內容應如下所示。

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


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(
 document.body,
 {
 delimiters: [
 {left: "$$", right: "$$", display: true},
 {left: "\\[", right: "\\]", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\(", right: "\\)", display: false}
 ]
 });
 });
</script>

接下來，將以下程式碼新增至現有檔案 layouts/partials/extend_head.html 中。

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

現在您已經準備好使用 KaTeX 了。

您可以透過在頁面的 front matter 中加入 math: true 來啟用 KaTeX。

剩下的就是在頁面文章的正文中以 LaTeX 風格編寫公式即可。

1

$$ e^{i \pi} = -1 $$

如上所述編寫，將會如下顯示。

$$ e^{i \pi} = -1 $$

參考資料

在 HUGO 中使用 HTML 標籤

Tue, 17 Jan 2023 19:20:32 +0900

預設情況下，HUGO 不允許在文章中使用 HTML 標籤，但您可以透過在 config.toml 中加入以下描述來啟用它。

1
2


[markup.goldmark.renderer]
 unsafe = true

參考: Configure Markup

HUGO 可用的 Shortcodes

Sun, 11 Sep 2022 22:59:52 +0900

HUGO 可用的 Shortcodes

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

其他

Shortcodes

題外話

若要在網站上顯示 {{< foo >}}，您必須撰寫 {{</* foo */>}}。

更改 PaperMod 中的圖片佈局

Sun, 11 Sep 2022 18:50:40 +0900

預設的佈局是將圖片置中且寬度為 100%，但因為有時覺得有點大，所以我嘗試讓圖片環繞在標題下方，並將寬度更改為約 150px。

檔案的變更如下。

blank.css

為了更改邊距、圖片大小和文字顯示行數，在 blank.css 中加入以下描述。

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


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

由於無法在 blank.css 端刪除定義，因此在 post-entry.css 中刪除以下位置的 1 行。

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← 刪除此行
 height: auto;
}

list.html

為了更改圖片佈局，我修改了 list.html 中的以下位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- 移至下方 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 移至下方 -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- 新增 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 新增 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 從上方移來 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 從上方移來 -->
 </div><!-- 新增 -->
 <div style="width:100%;"><!-- 新增 -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- 新增 -->
 </div><!-- 新增 -->
</article>

似乎有不少類似的要求。

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

如果官方也能支援就太好了。

如何在 PaperMod 中設定 Twitter Card

Sat, 10 Sep 2022 18:41:22 +0900

簡介

PaperMod 主題支援 Twitter Card。但是，Twitter Card 的設定必須寫在 config.toml 或每篇文章的 *.md 的標頭資訊中。如果您在每篇文章和 config.toml 中都進行了設定，則每篇文章的標頭資訊將優先。

設定方法

config.toml

在 config.toml 中，於 [params] 下方新增一個名為 images 的項目。在 images 中，描述要在 Twitter Card 顯示的圖片路徑。如果您將圖片放在 static 資料夾中，只需指定檔案名稱即可。

1
2


[params]
 images = ["twitter_card.jpg"]

資料夾結構

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (寫在這裡)
├─content
│ └─posts
│ └─文章資料夾
│ │ index.md (寫在這裡)
│ └─images
│ cover.png (放在這裡)
└─static
 twitter_card.jpg (放在這裡)

每篇文章的標頭資訊

在每篇文章的標頭資訊中，於 cover 下方新增一個名為 image 的項目。如果將 relative 設定為 true，您可以透過文章的 *.md 的相對路徑來指定。

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

如果不想顯示在文章頂部

如果您不想在文章頂部顯示封面圖片，請在 cover 下方新增一個名為 hidden 的項目，並將其設定為 true。

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

關於圖片大小

在 PaperMod 目前的規格中，Twitter Card 的大小似乎只支援 summary_large_image。對於 summary_large_image 的合適大小（解析度）有各種說法，但大約 800 x 418（圖片比例 1.91:1）似乎不錯。

參考網站 1 參考網站 2

如果可能的話，建議在發布前調整圖片大小。

如何檢查設定

要檢查 Twitter Card 的設定，請使用 Twitter Card Validator。但是，由於預覽在我的環境中無法正確顯示，如果無法顯示預覽，我建議您在發布前使用私人帳號等檢查一次。

更改 PaperMod 的配色方案

Wed, 07 Sep 2022 15:30:21 +0900

我更改了 PaperMod 主題的配色方案。更改方法參考了以下連結。

https://github.com/adityatelange/hugo-PaperMod/discussions/645

CSS 的路徑如下。

themes/PaperMod/assets/css/extended/blank.css

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


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

黑暗模式暫時沒有更改。

【HUGO】本機環境顯示預覽

Mon, 05 Sep 2022 12:28:01 +0900

安裝 HUGO

下載

下載 HUGO

從上述網站，下載並解壓縮符合您環境的 Windows 模組。就我而言，我下載了「hugo_0.102.3_Windows-64bit.zip」。

解壓縮

解壓縮下載的 zip 檔案，將其中的 hugo.exe 複製到您建立的資料夾中，例如 C:\bin。

登錄到環境變數

將其登錄到環境變數中，以便從任何位置執行 hugo.exe。以下是在 Windows 11 上的操作，但您應該可以透過類似的步驟進行登錄：

按 Win+Pause 鍵開啟版本資訊
點擊「進階系統設定」
點擊「環境變數」
選擇 Path，然後點擊「編輯」
點擊「新增」，在新的一行輸入「C:\bin」，然後點擊「確定」關閉對話框

預覽部落格

在命令提示字元中，移動到 HUGO 部落格的資料夾，然後執行以下命令。

hugo server -D

執行結果如下。（-D 是顯示草稿文章的選項。）

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


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

由於地址在執行時會顯示（在上述範例中為 http://localhost:1313/），請將該地址複製到您的瀏覽器中。每次儲存檔案時，預覽都會自動更新。要結束預覽，請在命令提示字元中輸入 Ctrl+C。