Hugo添加友链页面

友链是博客扩大影响力的好工具,本文介绍如何为Hugo博客添加友链页面。

步骤

配置友链页面链接在《Hugo搭建个人博客(2)》的config.yml中有提到,对应如下配置:

1
2
3
4
          - identifier: links
            name: 🤝友链
            url: links
            weight: 60

为了保持简单,便于修改,故以内联html实现。

编辑content/links.md,添加如下内容:

 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
---
title: "🤝友链"
layout: links
summary: links
---

<style>
.friend-links {
  display: flex;
  justify-content: space-between; /* 让元素均匀分布在一排 */
  flex-wrap: wrap; /* 允许元素换行 */
}

.friend-link {
  display: inline-block;
  margin: 5%;
  text-align: center;
  text-decoration: none;
  color: var(--content);
  max-width: 15%;
}

.friend-link img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.friend-link .name {
  margin-top: 5px;
}
</style>

<div class="friend-links">
  <a class="friend-link" href="https://333rd.net/" target="_blank">
    <img src="https://333rd.net/img/logo.gif" alt="友链图标">
    <div class="name">3rd's Blog</div>
  </a>
  <!-- 添加更多友链元素 -->
</div>

执行hugo --gc更新博客即可。