Stilig
归档 标签 分类 关于 友链
Stilig

目录

Hugo 添加友链卡片及页面

 收录于 Hugo 博客
     约 1848 字   预计阅读 4 分钟   次阅读

作为一个博客，交换友链是一件很正常的事儿，但是 LoveIt 主题并没有内置什么友链操作，因此只能靠自己来添加友链卡片的shortcodes，以及一个友链页面。

添加友链卡片

为了我们的友链显得更加的好看，这里我们引入友链卡片。

添加friend.html文件

在your_site\layouts\shortcodes\路径下，新创建文件friend.html，并且在里面添加如下内容：

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

{{ if .IsNamedParams }}
{{- $src := .Get "logo" -}}
{{- $small := .Get "logo_small" | default $src -}}
{{- $large := .Get "logo_large" | default $src -}}
<div class="friend-div">
  <a target="_blank" href={{ .Get "url" | safeURL }} title={{ .Get "name" }} >
  <img class="lazyload"
       src="/svg/loading.min.svg"
       data-src={{ $src | safeURL }}
       alt={{ .Get "name" }}
  data-sizes="auto"
  data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" />
  <span class="friend-name">{{ .Get "name" }}</span>
  <span class="friend-info">{{ .Get "word" }}</span>
  </a>
</div>
{{ end }}

添加_friend.scss文件

在your_site\assets\css\_partial\_single\路径下（如果没有就自己创建），新建文件_friend.scss，并在里面添加如下内容：

  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
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

#article-container {
 word-wrap: break-word;
 overflow-wrap: break-word
}

#article-container a {
 color: #49b1f5
}

#article-container a:hover {
 text-decoration: underline
}

#article-container img {
 margin: 0 auto .8rem
}

.flink#article-container .friend-list-div > .friend-div a .friend-info,
.flink#article-container .friend-list-div > .friend-div a .friend-name {
 overflow: hidden;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
 white-space: nowrap
}

.flink#article-container .friend-list-div {
 overflow: auto;
 padding: 10px 10px 0;
 text-align: center;
}
.flink#article-container .friend-list-div > .friend-div {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 15px 7px;
 width: calc(100% / 3 - 15px);
 height: 90px;
 border-radius: 8px;
 line-height: 17px;
 -webkit-transform: translateZ(0)
}

@media screen and (max-width: 1100px) {
 .flink#article-container .friend-list-div > .friend-div {
  width: calc(50% - 15px) !important
 }

@media screen and (max-width: 600px) {
 .flink#article-container .friend-list-div > .friend-div {
  width: calc(100% - 15px) !important
 }
}
}

.flink#article-container .friend-list-div > .friend-div:hover {
 background: rgba(87, 142, 224, 0.15);
}

.flink#article-container .friend-list-div > .friend-div:hover img {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg)
}

.flink#article-container .friend-list-div > .friend-div:before {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 background: var(--text-bg-hover);
 content: '';
 -webkit-transition: -webkit-transform .3s ease-out;
 -moz-transition: -moz-transform .3s ease-out;
 -o-transition: -o-transform .3s ease-out;
 -ms-transition: -ms-transform .3s ease-out;
 transition: transform .3s ease-out;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0)
}
.flink#article-container .friend-list-div > .friend-div:hover:before,
.flink#article-container .friend-list-div > .friend-div:focus:before,
.flink#article-container .friend-list-div > .friend-div:active:before {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1)
}
.flink#article-container .friend-list-div > .friend-div a {
 color: var(--font-color);
 text-decoration: none
}

.flink#article-container .friend-list-div > .friend-div a img{
 float: left;
 margin: 15px 10px;
 width: 60px;
 height: 60px;
 border-radius: 35px;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -o-transition: all .3s;
 -ms-transition: all .3s;
 transition: all .3s
}

.flink#article-container .friend-list-div > .friend-div a .friend-name {
 display: block;
 padding: 16px 10px 0 0;
 height: 40px;
 font-weight: 700;
 font-size: 20px
}

.flink#article-container .friend-list-div > .friend-div a .friend-info {
 display: block;
 padding: 1px 10px 1px 0;
 height: 50px;
 font-size: 13px
}

在_single.scss中引入代码

把your_site\themes\LoveIt\assets\css\_page\_single.scss复制粘贴到路径your_site\assets\css\_page\下。 再在文件your_site\assets\css\_page\_single.scss里添加如下内容：

1

@import "../_partial/_single/friend";

调用友链卡片

至此，我们便可以使用如下的shortcodes在我们文章的任意地方调用友链卡片了：

1
2
3
4
5
6
7
8

<div class="flink" id="article-container">
<div class="friend-list-div" >

{{< friend name="友链名称1" url="友链地址1" logo="友链图片链接1" word="友链描述1" >}}
{{< friend name="友链名称2" url="友链地址2" logo="友链图片链接2" word="友链描述2" >}}

</div>
</div>
注意
不能省略这两个div

创建友链页面

有了友链卡片，我们最好还要有一个页面来专门放置友链。之前我讲过如何添加关于页面，而其实这次与添加关于页面差不多。

创建friend/index.md文件

于终端中来到博客的根目录，我们来创建一个.md文件作为友链页面，代码如下：

1

hugo new friend/index.md

提示
如果你设置了多语言，如果是中文的话，这里新建的文件应为friend/index.zh-cn.md；如果是英文的话，这里新建文件应为friend/index.en.md。
此外我们还要修改index.md的文章头（如果不知道什么是文章头可以点这里）：如把draft的参数值改为false；删掉slug参数（如你不知道就不用管）；把comment的enable值改为true，以方便我们在评论区互换友链。

修改配置文件

找到your_site/config.toml配置文件的中# 菜单配置，在这一项下面添加：

1
2
3
4
5
6
7
8

      [[menu.main]]
        weight = 5
        identifier = "friend"
        pre = ""
        post = ""
        name = "友链"
        url = "/friend/"
        title = "Friend"
提示

如果你设置了多语言，如中文，则在[languages.zh-cn.menu]下新增：

1
2
3
4
5
6
7
8

      [[languages.zh-cn.menu.main]]
        weight = 5
        identifier = "friend"
        pre = ""
        post = ""
        name = "友链"
        url = "/friend/"
        title = "Friend"

其他语言类似。

结尾

只要大伙们的网站不涉及违法犯罪内容，我都欢迎来互换友链。

大家可以按照下面的格式，在我的友链页面下留言。

1

friend name="Stilig's blog" url="https://stilig.me" logo="https://stilig.me/webhead.png" word="一个分享自己杂七杂八知识的网站"

参考文章：

  1. Hugo LoveIt主题添加友链页面
警告
本文最后更新于 August 7, 2023，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系删除。
若文章帮助到了您，就不妨点一下👇广告，支持博主吧！

更新于 2023-08-07
 博客
返回 | 主页