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

这是构建网站的命令。会在 public 目录下生成HTML文件。

部署

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 中可用的简码

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

HUGO 中可用的简码

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
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。