Cathi 的 Blog ！

用 Hugo 构建网页

存个档，省得我忘了怎么操作
 1817

1. 安装 hugo

使用包管理器安装即可，如 apt ：

1
2

sudo apt update
sudo apt install hugo -y

也可以参照官方文档的其它方法

2. 生成基本的网站

2.1. 创建新的网页项目

使用 hugo new site website 命令能方便地创建包含 hugo 必要组件的 website 目录。

进入 website 目录，可以看到目录结果如下：

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── public
├── static
└── themes

2.2. 安装主题

有很多人在 GitHub 上分享了他们的主题，只要克隆下来就可以使用了，这里以 tokiwa 为例：

1
2
3

git clone https://github.com/heyeshuang/hugo-theme-tokiwa themes/hugo-theme-tokiwa #克隆主题
cp -r themes/hugo-theme-tokiwa/exampleSite/* . #复制示例文件到hugo根目录
cp themes/hugo-theme-tokiwa/archetypes/default.md ./archetypes/default.md #复制主题的初始模板(这是可选的，具体取决于你)

你也可以在主题列表中找到其它主题。

2.3. 本地预览

hugo 可以在本地生成预览网页，使用以下命令：

1

hugo server --buildDrafts &

你可以在浏览器打开 http://127.0.0.1:1313/ 查看生成的网页。

2.4. 编辑文章

使用 hugo new post/test.md 命令创建文章，

然后用编辑器打开 content/post/test.md 在后面追加内容。

编辑完成后，将 draft: true 改为 draft: false 或者直接将这一行删掉。(如果有)

2.5. 生成静态网页

使用 hugo 命令会在 public 目录中生成 html 文件，把 public 目录下的文件 复制到网页根目录即可，例如：

1
2

hugo
sudo cp -r ./public/* /var/www/html

3. 其它配置

以下配置仅针对 tokiwa 主题

自定义标题

编辑 config.toml 并修改如下内容：

1

title = "xxx" #xxx为标题的内容

配置导航栏

添加菜单项

1
2
3
4
5

[menu]
[[menu.main]]
name = "xxx" #xxx为网页显示的名称
url = "xxx" #xxx为网址
weight = x #x是个数字，菜单按照x的大小升序排序

关于菜单的具体内容，请查看官方文档。

禁用分类

我认为有标签(tags)就够了，不需要分类(categories)。(反过来也成立)

修改分类法，如下：

1
2
3
4

[taxonomies]
#category = "categories"
#series = "series"
tag = 'tags'

关于分类法的具体内容，请查看官方文档。

编辑 config.toml ，把分类的菜单项删掉，或者添加注释，如下：

1
2
3
4
5
6
7

#[menu]
#...
#[[menu.main]]
#name = "Categories"
#url = "/categories/"
#weight = 2
#...

编辑 themes/hugo-theme-tokiwa/layouts/partials/tags.html 把以下内容删掉，或添加注释，如下：

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

    <!--
    {{ if isset .Params "categories" }}
    {{ $count := len .Params.categories}}
    {{ if gt $count 0 }}
    {{ range $k, $v := .Params.categories}}
    <a class="post-taxonomy-category text-medium-red-violet-600 hover:text-medium-red-violet-400"
        href='{{"/categories/"| relURL}}{{ . | urlize }}'>{{ . }}</a>{{ if lt $k (sub $count 1) }}&nbsp;&#47;{{ end }}
    {{end}}
    {{end}}
    {{end}}

    {{ if and (isset .Params "categories") (isset .Params "tags") }}
    &nbsp;&nbsp;
    {{end}}
    -->

禁用/删减社交媒体图标

把不想要的图标添加注释就好了，如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

[social]
#bilibili = "http://example.com/"
#github = "http://github.com/"
#gitlab = "http://gitlab.com/"
#instagram = "http://example.com/"
#mail = "mailto:anon@example.com"
#twitter = "http://twitter.com/"
#weibo = "http://example.com/"
#youtube = "http://youtube.com/"
#zhihu = "http://example.com/"

调整侧边栏比例

侧边栏占了网页的2/5，应该缩小一下。

这个方法不知道对不对，但是确实有效。

编辑 themes/hugo-theme-tokiwa/layouts/_default/baseof.html，修改以下内容：

<!--...-->
    <header class="w-full md:w-{} xl:w-1/2 md:pr-12 lg:pr-20 xl:pr-24 order-1 md:order-1 max-w-2xl">
<!--...-->
    <aside role="contentinfo" class="w-full md:w-{} xl:w-1/2 md:pr-12 lg:pr-20 xl:pr-24 order-4 md:order-3 md:sticky md:bottom-0 self-end max-w-2xl">
<!--...-->

只需要将上面的 {} 替换为分数即可，例如： 1/2 , 2/3

禁用相关推荐

这个功能我用不到，所以我把它禁用了。

编辑 themes/hugo-theme-tokiwa/layouts/partials/page-footer.html，删除以下内容或添加注释：

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

<!--
<div >
{{ $related := .Site.RegularPages.Related . | first 15 }}
{{ $count := len $related }}
{{ with $related }}
<div class="font-serif pb-2 flex align-start leading-loose">
    <span class="heading pr-6 leading-loose">Related</span>
    <span >
        {{ range $k, $v := . }}
            <a href="{{ $v.RelPermalink }}">
                {{- $v.Title -}}
            </a>{{ if lt $k (sub $count 1) }}&nbsp;&nbsp;&#47;&nbsp;{{end}}
        {{ end }}
    </span>
</div>
{{ end }}
</div>
-->

禁用 disqus 评论

这个功能我用不到，所以我把它禁用了。

编辑 themes/hugo-theme-tokiwa/layouts/partials/page-footer.html，删除以下内容或添加注释：

1
2
3
4
5
6

<!--
<div class="pb-2">
    {{ template "_internal/disqus.html" . }}
</div>
<hr />
-->

禁用页数和字数统计

桌面版页面侧栏底端或者移动版页面最底端有个 xxx words in this page ，总感觉不太简洁。

编辑 themes/hugo-theme-tokiwa/layouts/partials/site-aside.html ，删除以下内容或添加注释：

1
2
3

<!--
{{ len  .Site.Pages }} pages, {{$scratch.Get "total" }} words in total.
-->

编辑 themes/hugo-theme-tokiwa/layouts/partials/page-aside.html，删除以下内容或添加注释：

1

<!--{{.WordCount }} words in this page.-->

添加访问量计数

编辑 themes/hugo-theme-tokiwa/layouts/partials/site-aside.html，在第二层<div>的最后添加以下两行内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div>
    <!--...-->
    <div>
        <!--...-->
        <!--添加的是以下两行-->
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
        <!--到这里为止-->
    </div>
</div>

这里采用的是不蒜子的网页计数器。

禁用 RSS 和 sitemap (站点地图)

这个功能我用不到，所以我把它禁用了。

编辑 config.toml 并添加如下内容：

1
2
3

disableKinds = ["RSS"] #只禁用RSS
disableKinds = ["sitemap"] #只禁用sitemap
disableKinds = ["RSS", "sitemap"] #禁用两者
updatedupdated2023-01-122023-01-12