四 Hugo主题Blowfish添加友链

创建 shortcode 模板
#

在 <博客根目录>/layouts/shortcodes 下创建 friend.html文件，将以下内容写入并保存。

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

创建 CSS 样式
#

在 <博客根目录>/assets/css 目录下创建 custom.css ，需自行根据你使用的主题进行调整：

/* 根据主题修改颜色 */
:root {
    --friend-bg: rgb(196, 217, 246); /* 浅色模式背景颜色 */
    --friend-name-color: #000000;
    --friend-url-color: #000000;
    --friend-bg-edge: #ffffff /* 头像外的色圈颜色 */
}

.dark {
    --friend-bg: rgba(214, 181, 82, 0.9);/* 深色模式背景颜色 */
    --friend-name-color: #000000;
    --friend-url-color: #000000;
    --friend-bg-edge: #ffffff;
}

.friendurl {
    text-decoration: none !important;
    color: var(--friend-url-color);
    box-shadow: none !important;
}

/* 鼠标触碰放大时链接颜色 */
.friendurl:hover{
    color: #000000;
}

/* 深色模式下 */
.dark .friendurl:hover {
    color: #000000;
}

.myfriend {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%!important;
    padding: 2px;
    margin-top: 20px !important;
    margin-left: 14px !important;
    background-color: var(--friend-bg-edge); /* 头像外的色圈颜色 */
}

.frienddiv {
    overflow: hidden;
    height: 100px;

    /* 控制卡片长短 */
    /* width: 100%; */
    width: 282px;
    display: inline-block !important;

    /* 修改 margin 以调整两个友链间的间距 */
    margin-right: 15px;
    margin-bottom: 10px;

    /* 背景矩形圆角半径 */
    border-radius: 25px;
    background: var(--friend-bg);
    /* 背景磨砂玻璃 */
    backdrop-filter: blur(15px);

    -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
}

.dark .frienddiv {
    overflow: hidden;
    height: 100px;
    width: 282px;
    display: inline-block !important;

    margin-right: 15px;
    margin-bottom: 10px;
    border-radius: 25px;

    background: var(--friend-bg);
    /* background: rgba(var(--friend-bg-r), var(--friend-bg-g), var(--friend-bg-b), 1); */
    backdrop-filter: blur(15px);

    -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
}

.frienddiv:hover {
    /*浅色模式下鼠标碰到友链时放大的背景颜色 */
    background: var(--friend-bg); 
    transition: transform 0.9s;
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
}

.dark .frienddiv:hover {
    /* 深色模式下鼠标碰到友链时放大的背景颜色 */
    background: var(--friend-bg);
}

.frienddiv:hover .frienddivleft img { 
    transition: 0.9s !important;
    -webkit-transition: 0.9s !important;
    -moz-transition: 0.9s !important;
    -o-transition: 0.9s !important;
    -ms-transition: 0.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;
    margin-right: -5px;
}

.frienddivright {
    margin-top: 18px;
    margin-right: 18px;
}

.friendname {
    text-overflow: ellipsis;
    font-size: 100%;
    margin-bottom: 5px;
    /* color: var(--primary); */
    color: var(--friend-name-color);
}

.friendinfo {
    text-overflow: ellipsis;
    font-size: 70%;
    color: var(--primary);
}

@media screen and (max-width: 600px) {
    .friendinfo {
        display: none;
    }
    .frienddivleft {
        width: 84px;
        margin: auto;
    }
    .frienddivright {
        height: 100%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .friendname {
        font-size: 18px;
    }
}