目录

Hugo 添加友情链接页面

参考:

本文借鉴了 hexo-theme-butterfly 的样式以 Hugo LoveIt 主题为基础进行 Hugo 的友链界面开(chao)发(xi)。

废话不多说,直入正题~

代码

虽然可以直接改themes/LoveIt的内容,但是我用了git submodule的方式下载的主题,若要修改则必须建立自己的仓库拥有改过后的主题内容,否则即使提交了也没法 CI 部署修改后的主题内容(而且会报错);同时,为了方便日后更新主题,我个人还是建议在assets目录下更改。

注意:后面说的assetslayouts目录都不是themes/LoveIt/*下的,而是博客根目录/*

  1. 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 }}
    
  2. 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
    }
    
  3. 拷贝themes/LoveIt/assets/css/_page/_single.scssassets/css/_page/_single.scss,并引入下面一行:

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

预览

使用实例:

新建友链界面 markdown,自行在 config 中配置链接,然后 md 文件中写如下代码:

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

{{< friend name="{友链名}" url="{友链地址}" logo="{友链图标链接}" word="{友链描述}" >}}
{{< friend name="{友链名}" url="{友链地址}" logo="{友链图标链接}" word="{友链描述}" >}}
...

</div>
</div>

注意:两个 div 不能少!!

适配了移动端,这里就不贴了,有兴趣的话自行试试效果吧~