hugo—fixlt主题建站的记录

Hollis 收录于 Hugo

2024-01-22 2025-05-14 约 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: 做好自己，保持童真！

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

短代码

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

文章的前置参数

参考：前置参数