为了和LINUX DO交换友情链接，研究了一下怎么给Hugo添加这个功能。

搜索找到kkkgo的hugo-friendlinks，按照说明配置好之后，确实可以展示了，但是有两个问题：一是没有和博客的页面融合，显示的是单独的链接页面；二是，友情链接的博客描述是乱码，可能是我配置的问题。

于是又找到鐵手的 Hugo 白话文 | 添加友情链接，看完之后觉得配置的过程有点复杂。

于是想着其实友情链接也是一篇文章，把kkkgo和鐵手融合一下，借鉴kkkgo的关于友情链接的shortcodes内容，样式部分从kkkgo的links.html找到对应内容，试了一下，果然成功，效果还可以。进入我的 友链 看看效果。

增加友链菜单

需要修改Hugo的配置文件hugo.yaml，修改的内容如下：

languages:
    zh:
        languageName: "中文"
        weight: 1
        menu:
            main:
                - name: 标签
                  url: tags/
                  weight: 1
                - name: 存档
                  url: archives
                  weight: 2
                - name: 搜索
                  url: search/
                  weight: 3
                - name: 关于/联系
                  url: about/
                  weight: 5
                - name: 友链
                  url: links/
                  weight: 4

最下面的三行是添加友链的菜单内容，参数说明：

  • name：博客上显示的友链的菜单名称；
  • url：链接地址，links/对应content目录下links.md文件；
  • weight：参数是调整菜单顺序；

创建shortcodes

可以是直接从kkkgo的hugo-friendlinks下载layouts/shortcodes目录下的friend.html文件。

Hugo目录参考 hugo 目录结构 ，将friend.html放到layouts/shortcodes目录下。

也可以复制下面提供的friend.html内容：

{{ if .IsNamedParams }}
<p><a target="_blank" href={{ .Get "url" }} title={{ .Get "name" }} class="friendurl"></p> 
	<div class="frienddiv">
      <div class="frienddivleft">
        <img class="myfriend" src={{ .Get "logo" }} />
      </div>
      <div class="frienddivright">
        {{ .Get "name" }}<br />{{ .Get "word" }}
      </div>
    </div></a>
{{ end }}

接下来需要将shortcodes生成的html片段涉及使用css保存下来，在assets/css/extended目录下创建links.css文件。文件内容如下：

.friendurl {
	text-decoration: none !important;
	color: black;
}

.myfriend {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	border: 1px solid #ddd;
	padding: 2px;
	box-shadow: 1px 1px 1px rgba(0,0,0, .15);
	margin-top: 14px !important;
	margin-left: 14px !important;
	background-color: #fff;
}

.frienddiv {
	height: 92px;
	margin-top: 10px;
	width: 48%;
	display: inline-block !important;
}

.frienddiv:hover {
	background: rgba(87, 142, 224, 0.15);
}

.frienddiv:hover .frienddivleft img {
	transition: .9s!important;
	-webkit-transition: .9s!important;
	-moz-transition: .9s!important;
	-o-transition: .9s!important;
	-ms-transition: .9s!important;
	transform: rotate(360deg)!important;
	-webkit-transform: rotate(360deg)!important;
	-moz-transform: rotate(360deg)!important;
	-o-transform: rotate(360deg)!important;
	-ms-transform: rotate(360deg)!important;
}

.frienddivleft {
	width: 92px;
	float: left;
}

.frienddivleft {
	margin-right: 2px;
}

.frienddivright {
	margin-top: 18px;
	margin-right: 18px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

创建友链页面

在content目录下创建links.md文件，文件内容如下:

---
title: 友链
date: 2024-11-19T21:21:21+08:00
showtoc: false
comments: true
---
如需交互友情链接请留言联系。

{{< friend name="LINUX DO" url="https://linux.do/?source=bytejog_com" logo="/assets/post/linuxdo.png" word="新的理想型社区" >}}

友情链接的内容，一行一个链接：

{{< friend name="LINUX DO" url="https://linux.do/?source=bytejog_com" logo="/assets/post/linuxdo.png" word="新的理想型社区" >}}

其中的参数需要修改：

  • name：友链的博客名称
  • url：友链的博客链接地址
  • logo：友链的博客Logo图片地址
  • word：友链的博客描述

到这里就配置好了Hugo发布的博客友链功能，希望能帮助到大家。

参考：

  1. 鐵手的 Hugo 白话文 | 添加友情链接
  2. kkkgo的hugo-friendlinks