Hugo 添加友情链接页面
目录
参考:
本文借鉴了 hexo-theme-butterfly 的样式以 Hugo LoveIt 主题为基础进行 Hugo 的友链界面开(chao)发(xi)。
废话不多说,直入正题~
代码
虽然可以直接改
themes/LoveIt
的内容,但是我用了git submodule
的方式下载的主题,若要修改则必须建立自己的仓库拥有改过后的主题内容,否则即使提交了也没法 CI 部署修改后的主题内容(而且会报错);同时,为了方便日后更新主题,我个人还是建议在assets
目录下更改。
注意:后面说的assets
和layouts
目录都不是themes/LoveIt/*
下的,而是博客根目录/*
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 }}
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 }
拷贝
themes/LoveIt/assets/css/_page/_single.scss
到assets/css/_page/_single.scss
,并引入下面一行:1
@import "../_partial/_single/friend";
预览
使用实例:
新建友链界面 markdown,自行在 config 中配置链接,然后 md 文件中写如下代码:
|
|
注意:两个 div 不能少!!
适配了移动端,这里就不贴了,有兴趣的话自行试试效果吧~