51工具盒子-
参照参考教程中的Butterfly 友链界面配置教程先配置好默认友链页面。
-
在 Hexo 博客根目录
[Blogroot]下打开终端，输入|-----------|----------------------------| |
1|hexo new page link|打开
[Blogroot]\source\link\index.md，添加一行type: 'link':|-------------------|--------------------------------------------------------------------| |
1 2 3 4 5|--- title: link date: 2020-12-01 22:19:45 type: 'link' ---| -
新建文件
[Blogroot]\source\_data\link.yml，没有_data文件夹的话也请自己新建。以下是默认友链格式示例。打开[Blogroot]\source\_data\link.yml，输入：|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7 8|- class_name: 推荐博客 flink_style: flexcard link_list: - name：竹山一叶 link：https://zsyyblog.com avatar：https://img.zsyyblog.com/favicon.jpg descr：来了就不想走的小家 siteshot: https://img.zsyyblog.com/siteshot.png| -
取消
[Blogroot]\_config.butterfly.yml中menu配置项内link页面的注释。|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
1 2 3 4 5 6 7 8 9 10|menu: Home: / || fas fa-home Archives: /archives/ || fas fa-archive Tags: /tags/ || fas fa-tags Categories: /categories/ || fas fa-folder-open # List||fas fa-list: # - Music || /music/ || fas fa-music # - Movie || /movies/ || fas fa-video Link: /link/ || fas fa-link # About: /about/ || fas fa-heart| -
替换[Blogroot]\themes\butterfly\layout\includes\page\flink.pug
|------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
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|#article-container if top_img === false h1.page-title= page.title .flink if site.data.link each i in site.data.link if i.class_name h2!= i.class_name if i.class_desc .flink-desc!=i.class_desc if i.flink_style === 'butterfly' .butterfly-flink-list each item in i.link_list .flink-list-item a(href=url_for(item.link) title=item.name target="_blank") .flink-item-icon if theme.lazyload.enable img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) else img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) .flink-item-info .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr else if i.flink_style === 'flexcard' .flexcard-flink-list each item in i.link_list a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr) .wrapper.cover - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link if theme.lazyload.enable img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' ) else img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' ) .info if theme.lazyload.enable img.flink-avatar(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' ) else img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' ) span.flink-sitename= item.name != page.content| -
替换[Blogroot]\themes\butterfly\source\css_page\flink.styl
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
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|.flink-desc margin: .2rem 0 .5rem .butterfly-flink-list overflow: auto padding: 10px 10px 0 text-align: center & > .flink-list-item position: relative float: left overflow: hidden line-height: 17px -webkit-transform: translateZ(0) height: 100px; padding: 10px; width: calc(100% / 5 - 0.5rem) margin: 0.5rem 0.25rem; border-radius: 12px; border: var(--style-border); background-color: var(--anzhiyu-card-bg); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; +maxWidth1024() width: calc(50% - 15px) !important +maxWidth600() width: calc(100% - 15px) !important &:hover border-color: var(--anzhiyu-main)!important; background-color: var(--anzhiyu-main)!important; box-shadow: var(--anzhiyu-shadow-theme)!important; .flink-item-icon width: 0; height: 0; margin-left: -10px; .flink-item-name,.flink-item-desc color: var(--anzhiyu-white); &:hover:before, &:focus:before, &:active:before transform: scale(1) a color: var(--font-color) text-decoration: none .flink-item-icon float: left overflow: hidden margin: 15px 10px width: 60px height: 60px border-radius: 35px transition: all .3s ease-out margin: 8px 0 8px 0; background: var(--anzhiyu-background); border-radius: 50%; overflow: hidden; img width: 100% height: 100% transition: filter 375ms ease-in .2s, transform .3s object-fit: cover .img-alt display: none .flink-item-info display: flex; flex-wrap: wrap; padding-left: 10px; text-align: left; flex-direction: column; .flink-item-name @extend .limit-one-line padding: 12px 0 16px 0; height: auto; font-weight: bold font-size: 1.2em color: var(--anzhiyu-fontcolor); .flink-item-desc @extend .limit-one-line padding: 0 height: 35px font-size: .93em opacity: .7; color: var(--anzhiyu-fontcolor); word-break: break-all; white-space: break-spaces; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; .flink-name margin-bottom: 5px font-weight: bold font-size: 1.5em #article-container img margin-bottom: 0.5rem; object-fit: cover; max-height: 900px; .flexcard-flink-list overflow hidden .flink-list-card .wrapper img transition: transform .5s ease-out !important; &:hover border-color: var(--anzhiyu-main)!important; background-color: var(--anzhiyu-main)!important; box-shadow: var(--anzhiyu-shadow-theme)!important; & > a width: calc(100% / 5 - 0.5rem); height 150px position relative display block margin: 0.5rem 0.25rem; float left overflow hidden padding: 0; border-radius: 8px; transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s box-shadow none border: var(--style-border)!important; &:hover .info transform translateY(-100%) .wrapper img transform scale(1.2) &::before position: fixed width:inherit margin:auto left:0 right:0 top:10% border-radius: 10px text-align: center z-index: 100 content: attr(data-title) font-size: 20px color: #fff padding: 10px background-color: rgba($theme-color,0.8) .cover width 100% transition transform .5s ease-out .wrapper position relative .fadeIn animation coverIn .8s ease-out forwards img height 150px pointer-events none .info display flex flex-direction column justify-content center align-items center width 100% height 100% overflow hidden border-radius 3px background-color hsla(0, 0%, 100%, .7) transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s img position relative top 45px width 80px height 80px border-radius 50% box-shadow 0 0 10px rgba(0, 0, 0, .3) z-index 1 text-align center pointer-events none span padding 20px 10% 60px 10% font-size 16px width 100% text-align center box-shadow 0 0 10px rgba(0, 0, 0, .3) background-color hsla(0, 0%, 100%, .7) color var(--font-color) white-space nowrap overflow hidden text-overflow ellipsis .flexcard-flink-list>a .info, .flexcard-flink-list>a .wrapper .cover position absolute top 0 left 0 @media screen and (max-width:1024px) .flexcard-flink-list & > a width calc(33.33333% - 15px) @media screen and (max-width:600px) .flexcard-flink-list & > a width calc(50% - 15px) [data-theme=dark] .flexcard-flink-list a .info, .flexcard-flink-list a .info span background-color rgba(0, 0, 0, .6) .flexcard-flink-list & > a &:hover &:before background-color: rgba(#121212,0.8); .justified-gallery > div > img, .justified-gallery > figure > img, .justified-gallery > a > a > img, .justified-gallery > div > a > img, .justified-gallery > figure > a > img, .justified-gallery > a > svg, .justified-gallery > div > svg, .justified-gallery > figure > svg, .justified-gallery > a > a > svg, .justified-gallery > div > a > svg, .justified-gallery > figure > a > svg position static!important| -
注意事项
相比原教程修改处为不需要在主题配置文件中添加配置项，而是需要在
source/_data/link.yml添加配置项
flink_style: flexcard || butterfly
该参数可选值flexcard或者butterfly分别对应两种样式。可能遇到的 bug：使用
flexcard样式时，因为全站字体大小配置与本站不一致的关系，可能导致友链卡片的头像位置偏移较大。请读者按照flink.styl里的注释内容自己微调。
参考链接：https://anzhiy.cn/posts/292d.html
