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
更新博客即可。