博客搭建四：hugo添加友链

交个朋友，为博客添加友链功能（还不完善，显示界面不美观），详情参看https://ziyue.tech/friend/有好的解决办法会继续在这里更新。

hugo博客文件架构：

注：以下操作均在你的本地博客根目录下进行（换了主题理论上依然可用）

1
2
3
4
5
6
7
8


config.toml：所有的hugo站点都有一个全局配置文件，用来配置整个站点的信息，hugo默认提供了跟多配置指令。
content：站点下所有的内容页面，也就是我们创建的md文件都在这个content目录下面。
data：data目录用来存储网站用到一些配置、数据文件。文件类型可以是yaml|toml|json等格式。
layouts：存放用来渲染content目录下面内容的模版文件，模版.html格式结尾。
【layouts可以同时存储在项目目录和themes//layouts目录下（不建议）。】
static：用来存储图片、css、js等静态资源文件。
themes：用来存储主题，主题可以方便的帮助我们快速建立站点，也可以方便的切换网站的风格样式。
public：hugo编译后生成网站的所有文件都存储在这里面，把这个目录放到任意web服务器就可以发布网站成功。

首先，在博客根目录创建assets/css文件夹，在css文件夹下创建_page和_partial文件夹，在_page文件夹下创建_single.scss文件并填写以下内容(或者拷贝你主题文件夹下的该文件然后添加一句@import “../_partial/_single/friend”;）

  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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348


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

.single {
  .single-title {
    margin: 2rem 0 .5rem;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 140%;
  }

  .single-subtitle {
    margin: .5rem 0;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 100%;
  }

  .post-meta {
    font-size: .875rem;
    color: $global-font-secondary-color;

    span {
      display: inline-block;
    }

    [theme=dark] & {
      color: $global-font-secondary-color-dark;
    }

    @include link(false, true);

    .author {
      font-size: 1.05rem;
    }
  }

  .featured-image {
    margin: .5rem 0 1rem 0;

    img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      overflow: hidden;
    }

    img.lazyloaded {
      width: 100%;
    }
  }

  .content {
    > h2 {
      font-size: 1.5rem;

      & code {
        font-size: 1.25rem;
      }
    }

    > h3 {
      font-size: 1.375rem;

      & code {
        font-size: 1.125rem;
      }
    }

    > h4 {
      font-size: 1.25rem;

      & code {
        font-size: 1rem;
      }
    }

    > h5 {
      font-size: 1.125rem;
    }

    > h6 {
      font-size: 1rem;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: bold;
      margin: 1.2rem 0;

      [theme=dark] & {
        font-weight: bolder;
      }
    }

    > h2,
    > h3,
    > h4,
    > h5,
    > h6 {
      > .header-mark::before {
        content: "|";
        margin-right: .3125rem;
        color: $single-link-color;

        [theme=dark] & {
          color: $single-link-color-dark;
        }
      }
    }

    > h2 > .header-mark::before {
      content: "#";
    }

    p {
      margin: .5rem 0;
    }

    b, strong {
      font-weight: bold;

      [theme=dark] & {
        color: #ddd;
      }
    }

    @include link(false, false);

    a {
      @include overflow-wrap(break-word);

      [theme=dark] & b, [theme=dark] & strong {
        color: $single-link-color-dark;
      }
    }

    [theme=dark] a:hover b, [theme=dark] a:hover strong {
      color: $single-link-hover-color-dark;
    }

    ul, ol {
      margin: .5rem 0;
      padding-left: 2.5rem;
    }

    ul {
      list-style-type: disc;
    }

    ruby {
      background: $code-background-color;

      rt {
        color: $global-font-secondary-color;
      }

      [theme=dark] & {
        background: $code-background-color-dark;

        rt {
          color: $global-font-secondary-color-dark;
        }
      }
    }

    .table-wrapper {
      overflow-x: auto;

      &::-webkit-scrollbar {
        background-color: $table-background-color;

        [theme=dark] & {
          background-color: $table-background-color-dark;
        }
      }

      > table {
        width: 100%;
        max-width: 100%;
        margin: .625rem 0;
        border-spacing: 0;
        background: $table-background-color;
        border-collapse: collapse;

        [theme=dark] & {
          background: $table-background-color-dark;
        }

        thead {
          background: $table-thead-color;

          [theme=dark] & {
            background-color: $table-thead-color-dark;
          }
        }

        th, td {
          padding: .3rem 1rem;
          border: 1px solid darken($table-thead-color, 2%);

          [theme=dark] & {
            border-color: darken($table-thead-color-dark, 2%);
          }
        }
      }
    }

    img {
      max-width: 100%;
      min-height: 1em;
    }

    figure {
      margin: .5rem;
      text-align: center;

      .image-caption:not(:empty) {
        min-width: 20%;
        max-width: 80%;
        display: inline-block;
        padding: .5rem;
        margin: 0 auto;
        font-size: .875rem;
        color: #969696;
      }

      img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
      }
    }

    .lazyload, .lazyloading {
      @include object-fit(scale-down);
    }

    .lazyloaded {
      @include object-fit(fill);
    }

    blockquote {
      display: block;
      border-left: .5rem solid $blockquote-color;
      background-color: rgba($blockquote-color, .2);
      padding: .25rem .75rem;
      margin: 1rem 0;

      [theme=dark] & {
        border-left-color: $blockquote-color-dark;
        background-color: rgba($blockquote-color-dark, .2);
      }
    }

    .footnotes {
      color: $global-font-secondary-color;

      [theme=dark] & {
        color: $global-font-secondary-color-dark;
      }

      p {
        margin: .25rem 0;
      }
    }

    @import "../_partial/_single/code";
    @import "../_partial/_single/instagram";
    @import "../_partial/_single/admonition";
    @import "../_partial/_single/echarts";
    @import "../_partial/_single/mapbox";
    @import "../_partial/_single/music";
    @import "../_partial/_single/bilibili";

    hr {
      margin: 1rem 0;
      position: relative;
      border-top: 1px dashed $global-border-color;
      border-bottom: none;

      [theme=dark] & {
        border-top: 1px dashed $global-border-color-dark;
      }
    }

    kbd {
      display: inline-block;
      padding: .25rem;
      background-color: $global-background-color;
      border: 1px solid $global-border-color;
      border-bottom-color: $global-border-color;
      @include border-radius(3px);
      @include box-shadow(inset 0 -1px 0 $global-border-color);
      font-size: .8rem;
      font-family: $code-font-family;
      color: $code-color;

      [theme=dark] & {
        background-color: $global-background-color-dark;
        border: 1px solid $global-border-color-dark;
        border-bottom-color: $global-border-color-dark;
        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
        color: $code-color-dark;
      }
    }

    .version {
      height: 1.25em;
      vertical-align: text-bottom;
    }
  }

  @import "../_partial/_single/footer";
  @import "../_partial/_single/comment";
}

.typeit {
  .highlight {
    padding: .375rem;
    font-size: .875rem;
    font-family: $code-font-family;
    font-weight: bold;
    word-break: break-all;
    white-space: pre-wrap;
  }

  --ti-cursor-font-family: $global-font-family;
  --ti-cursor-font-size: $global-font-size;
  --ti-cursor-font-weight: $global-font-weight;
  --ti-cursor-line-height: $global-line-height;
  --ti-cursor-color: $global-font-secondary-color;
  --ti-cursor-margin-left: 0;

  [theme=dark] & {
    --ti-cursor-color: $global-font-secondary-color-dark;
  }
}

.lg-toolbar .lg-icon::after {
  color: #999;
}

然后，在D:\myblog\assets\css_partial下创建_single文件夹，并在_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
}

在博客根目录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 }}

最后，在博客根目录content里创建friend文件夹并创建index.md文件，在配置文件里修改菜单增加友链按钮。

1
2
3
4
5


[[menu.main]]
    weight = 6 # 友链这个按钮的权重，数字越大排位越靠后
    identifier = "friend"
    name = "友链"
    url = "/friend/"

在index.md文件里添加以下内容即可，就是正常的md文件，可任意在别的区域增加你想显示的信息，这个花括号花括号< friend name=“kai” url=“http://ziyue.tech” logo=“https://s2.loli.net/2022/07/26/T4VPEMvKFzQ3O1A.jpg” word=“A funny guy” >}}是你要添加的友链，在对应的双引号区间填写具体信息。（注：【 div class=“friend-list-div” 】下要保留一个空行，如果删去友链会显示不出来，我试出来的（滑稽），层级关系之间缩进2个空格）

1
2
3
4
5
6
7
8


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

    花括号花括号< friend name="名字" url="博客地址" logo="logo图片地址" word="个人介绍" >}}
    ...

  </div>
</div>

嗯，暂时这样，由hexo迁移至hugo博客功能基本完善了，这个系列应该也就完更了，后面就是好好写内容。