Hugo LoveIt主题添加友链页面

Resowolf 收录于 Hugo

2023-01-28 约 1280 字预计阅读 3 分钟

https://img.cdn.resowolf.com/static/lovelt-friend.png

参考

Hugo 添加友情链接页面

在迁移到Hugo的过程中还发现LoveIt没有对友链页面的处理，所有找了一个看起来比较好看的友链处理基本上是借鉴了 Hugo 添加友情链接页面的方案

注意

以下所有的改动我也放在自己的Github上了，具体的分支develop 包含了以下的改动，欢迎大家直接clone使用

1.代码

我基本上把所有的修改都放到LoveIt主题对应的目录下，使用时直接克隆就好

1.1 新增`friend.html`

在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 }}

1.2 新增`_friend.scss`文件：

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
}

1.3 引入friend

在assets/css/_page/_single.scss中引入如下代码

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

Tip

以上的改动我都放在自己的Github上了，具体的分支feature_add_friend

2.编写friend.md

新建friend.md文件，在文件中写入如下代码

1
2
3
4
5
6
7
8
<div class="flink" id="article-container">
<div class="friend-list-div" >

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

</div>
</div>

警告

要保留这两个div

3.样式预览

Resowolf Resowolf

4.菜单配置

在[languages.zh-cn.menu]下新增如下配置，url、name、顺序，请自行调整

1
2
3
4
5
6
7
8
      [[languages.zh-cn.menu.main]]
        weight = 5
        identifier = "friend"
        pre = ""
        post = ""
        name = "友链"
        url = "/friend/"
        title = ""

目录

Hugo LoveIt主题添加友链页面

1.代码

1.1 新增friend.html

1.2 新增_friend.scss文件：

1.3 引入friend

2.编写friend.md

3.样式预览

4.菜单配置

1.1 新增`friend.html`

1.2 新增`_friend.scss`文件：