hugo—fixlt主题建站的记录

Hollis 收录于 Hugo

2024-01-22 2025-04-08 约 2300 字预计阅读 5 分钟 - 次阅读 - 条评论

文章中图片的路径问题

图片的存放位置

需要把图片放到 static 文件夹下面，才会编译到 public 中。

如：博客文件的名称为：test.md，其中包含图片有：pic_1.jpg、pic_2.jpg。

我们需要把图片放到和博客同名的文件夹 test 中，并将 test 文件夹放到 static 目录中。

MD 中的引用地址

在 markdown 文件中，我们只需要指定图片的名称即可，不需要指定文件的路径。因为按照上面这样存放图片之后，生成的 public 目录中，图片和 html 文件都在同一个目录 test 下面。

在 typora 中，可以设置插入图像时，将图片复制到指定目录，把目录名称设置为：./${filename}，即表示将图片插入到和当前文件同名的文件夹中。

这样 MD 文件引用的图片路径为：./test/pic_1.jpg，在发布 MD 文件到，我们需要把 content/posts 目录时，我们需要把./test/ 部分路径批量删除掉，只保留图片名称部分。

案例

文件层级结构如下：

1
2
3
4
5
6
7


├── content
│   └── posts
│       └── test.md
└── static
    └── test
        ├── pic_1.jpg
        └── pic_2.jpg

hugo 编译后，public 目录中文件层级结构如下：

1
2
3
4
5
6


└── public
    └── test
        ├── index.html
        ├── index.md
        ├── pic_1.jpg
        └── pic_2.jpg

test.md 中引用的图片路径如下：

1

<img src="pic_1.jpg" alt="pic_1" />

创建多级菜单

想要实现的效果：

先创建一个 “合辑”，然后合辑中有多种不同的知识领域，如：“Golang”、“Linux 命令” 等。

只需要在主配置文件 hugo.toml 中使用 taxonomies 标签自定义标签 collections 即可，如下：

也可能是 yaml 或 json 格式，需要按照对应格式进行修改。

1
2
3


# 自定义分类法
[taxonomies]
  collections = "collections"

然后再使用 menu.main 标签，定义菜单栏的层级结构，如：

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


[menu]
  # ......
  [[menu.main]]
      identifier = "collections"
      name = "合辑"
      url = "/collections"
      weight = 2
    [[menu.main]]
      identifier = "golang"
      parent = "collections"
      name = "Golang"
      url = "/collections/golang"
      weight = 1
    [[menu.main]]
      identifier = "linux"
      parent = "collections"
      name = "Linux命令"
      url = "/collections/linux"
      weight = 2
    # ......

identifier 参数：唯一标识每个菜单栏的，名字不能重复。
name 参数：当前菜单栏在网页上显示的名称。
parent 参数：定义当前菜单的父级菜单，第一级菜单无需指定该参数。
url 参数：单击该菜单栏时，访问的 url，可以使用相对路径（相对于根目录），也可以使用绝对路径。
weight 参数：在同级目录中的优先级，值小的显示在前面。

上面的配置中，二级菜单 golang 指定了其父级菜单为 collections，这样当鼠标悬停在菜单 “合辑” 上时，就会自动显示出其子菜单 “Golang” 了，和图片中的效果相同。

参考：

配置分类法

菜单配置

创建合辑

上面创建了一个多级菜单，现在我们要向 “Golang” 合辑添加内容。

我们只需要在博客 md 文件的前言部分加上 collections 标签即可，也就是指定该文章属于哪个合辑。

1
2
3
4
5
6
7
8
9


+++
title="test"
summary="测试合辑。"
tags=[""]
categories=[""]
collections=["algorithm"]
date="2024-01-22T09:00:00+08:00"
toc=true
+++

因为我们前面自定义了菜单 “collections”，则编译生成 public 时，会在 pubilic 中生成一个 collections 的目录，目录中会存放所有的合辑内容，每个合辑单元会单独存放在一个文件夹中。

public 中的文件层级结构：

1
2
3
4
5
6
7
8
9


└── public
    └── collections
        ├── index.html
        └── golang
            ├── index.html
            ├── index.xml
            └── page
                └── 1
                    └── index.html

collections 文件夹中会有一个 html 用来存放所有的合辑单元列表和各自的前 5 篇文章，方便直接查看。内容格式如下：

所以，前面 “合辑” 菜单的 url 我们要设置为： "/collections"；Golang 菜单（合辑单元）的 url 我们要设置为："/collections/golang"。

图标

fixlt 主题使用的是 Font Awesome 图标，这是一个流行的图标库，通常用于增强网页的可视化效果。

github： https://github.com/FortAwesome/Font-Awesome。

官网： https://fontawesome.com/。

只能使用 free 的图标，其他图标是需要付费购买的。

可以在这里面找到想要的图标，然后复制。

粘贴到 menu.main 标签的 pre 中，或者 menu.main.params 标签的 icon 中（不加 i 标签）。

示例：

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


 [[menu.main]]
      identifier = "collections"
      pre='<i class="fa-solid fa-layer-group" aria-hidden="true"></i>'
      name = "合辑"
      url = "/collections"
      weight = 2
    [[menu.main]]
      identifier = "golang"
      parent = "collections"
      name = "Golang"
      url = "/collections/golang"
      weight = 1
      [menu.main.params]
        icon='fa-brands fa-golang'

效果：

设置友链

效果图：

使用下面的命令，生成友链模板文件。

1
2


hugo new friends/index.md
hugo new about/index.md

得到的文件层级结构如下：

1
2
3


/blog/content
└── friends
    └── index.md

得到的内容为英文，可以根据需要自己修改，修改后的内容如下：

---
title: 友情链接
subtitle:
layout: friends
date: 2024-01-22T21:50:41+08:00
description: "Hollis's friends"
keywords:
  - 'Hugo FixIt'
  - 'friends template'
  - 友情链接
comment: true
---

## 我的友链信息

```yaml
- nickname: Hollis
  avatar: https://www.hollis.top/images/avatar.png
  url: https://www.Hollis.top/
  description: 做好自己，保持童真！
```

## 友情提醒


    
      Notice
    
    
      

如果您想交换链接，请以上述格式留言。（仅限个人非商业博客/网站）


 网站故障、停止维护和不当内容可能会被取消链接！


那些不尊重他人劳动成果、无来源转载或恶意行为的网站，请不要前来交换。

然后在 blog/data 目录下新建 friends.yml 文件，在这个文件中添加友链信息。

示例：

1
2
3
4


- nickname: Hollis
  avatar: https://www.hollis.top/images/avatar.png
  url: https://www.Hollis.top/
  description: 做好自己，保持童真！

可以添加多个这样的标签，添加多个友链信息。

短代码

生成像下面这种，多样式的提示，可以参考：警告短代码

文章的前置参数

参考：前置参数