Friend Link Card Beautify

来源Friend Link Card Beautify，本文仅为记录魔改过程

魔改步骤

1. 修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug,此处添加判断机制，使得可以通过修改配置文件来切换友链风格。同时为了方便管理，把各个友链样式放到新建的文件目录[Blogroot]\themes\butterfly\layout\includes\page\flink_style下。

   • flink.pug
   • butterfly.pug
   • volantis.pug
   • flexcard.pug

   修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug，全部内容替换为：

   1 2 3 4 5 6 7

   case theme.flink_style when 'volantis' include ./flink_style/volantis.pug when 'flexcard' include ./flink_style/flexcard.pug default include ./flink_style/butterfly.pug

   新建[Blogroot]\themes\butterfly\layout\includes\page\flink_style\butterfly.pug

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   #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 .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 img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr != page.content

   新建[Blogroot]\themes\butterfly\layout\includes\page\flink_style\volantis.pug

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   #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 .site-card-group each item in i.link_list a.site-card(target='_blank' rel='noopener' href=url_for(item.link)) .img - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link img.no-lightbox(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' ) .info img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' ) span.title= item.name span.desc(title=item.descr)= item.descr != page.content

   新建[Blogroot]\themes\butterfly\layout\includes\page\flink_style\flexcard.pug

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   #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 .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 img.no-lightbox.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' ) .info img.no-lightbox(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

2. 修改[Blogroot]\themes\butterfly\source\css\_page\flink.styl,同理，将样式文件也放到新建的[Blogroot]\themes\butterfly\source\css\_flink_style目录下方便管理。

   • flink.styl
   • butterfly.styl
   • volantis.styl
   • flexcard.styl

   修改[Blogroot]\themes\butterfly\source\css\_page\flink.styl

   1 2 3 4 5 6

   if hexo-config('flink_style') == 'butterfly' @import './_flink_style/butterfly' else if hexo-config('flink_style') == 'volantis' @import './_flink_style/volantis' else if hexo-config('flink_style') == 'flexcard' @import './_flink_style/flexcard'

   新建[Blogroot]\themes\butterfly\source\css\_flink_style\butterfly.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

   .flink#article-container margin-bottom: 20px .flink-desc margin: .2rem 0 .5rem .flink-list overflow: auto padding: 10px 10px 0 text-align: center & > .flink-list-item 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) +maxWidth1024() width: calc(50% - 15px) !important +maxWidth600() width: calc(100% - 15px) !important &:hover .flink-item-icon margin-left: -10px width: 0 &:before position: absolute top: 0 right: 0 bottom: 0 left: 0 z-index: -1 background: var(--text-bg-hover) content: '' transition: transform .3s ease-out transform: scale(0) &: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: width .3s ease-out img width: 100% height: 100% transition: filter 375ms ease-in .2s, transform .3s object-fit: cover .img-alt display: none .flink-item-name @extend .limit-one-line padding: 16px 10px 0 0 height: 40px font-weight: bold font-size: 1.43em .flink-item-desc @extend .limit-one-line padding: 16px 10px 16px 0 height: 50px font-size: .93em .flink-name margin-bottom: 5px font-weight: bold font-size: 1.5em

   新建[Blogroot]\themes\butterfly\source\css\_flink_style\volantis.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

   trans($time = 0.28s) transition: all $time ease -moz-transition: all $time ease -webkit-transition: all $time ease -o-transition: all $time ease .site-card-group display: flex flex-wrap: wrap justify-content: flex-start margin: -0.5 * 16px align-items: stretch .site-card margin: 16px * 0.5 width: "calc(100% / 4 - %s)" % 16px @media screen and (min-width: 2048px) width: "calc(100% / 5 - %s)" % 16px @media screen and (max-width: 768px) width: "calc(100% / 3 - %s)" % 16px @media screen and (max-width: 500px) width: "calc(100% / 2 - %s)" % 16px display: block line-height: 1.4 height 100% .img width: 100% height 120px @media screen and (max-width: 500px) height 100px overflow: hidden border-radius: 12px * 0.5 box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2) background: #f6f6f6 img width: 100% height 100% pointer-events:none; // trans(.75s) transition: transform 2s ease object-fit: cover .info margin-top: 16px * 0.5 img width: 32px height: 32px pointer-events:none; border-radius: 16px float: left margin-right: 8px margin-top: 2px span display: block .title font-weight: 600 font-size: var(--global-font-size) color: #444 display: -webkit-box -webkit-box-orient: vertical overflow: hidden -webkit-line-clamp: 1 trans() .desc font-size: var(--global-font-size) word-wrap: break-word; line-height: 1.2 color: #888 display: -webkit-box -webkit-box-orient: vertical overflow: hidden -webkit-line-clamp: 2 .img trans() &:hover .img box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1) .info .title color: #ff5722

   新建[Blogroot]\themes\butterfly\source\css\_flink_style\flexcard.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

   #article-container img margin 0 auto!important .flink-list overflow auto & > a width calc(25% - 15px) height 130px position relative display block margin 15px 7px float left overflow hidden border-radius 10px transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06) &: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 130px 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 22px width 66px height 66px 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 .flink-list>a .info, .flink-list>a .wrapper .cover position absolute top 0 left 0 @media screen and (max-width:1024px) .flink-list & > a width calc(33.33333% - 15px) @media screen and (max-width:600px) .flink-list & > a width calc(50% - 15px) [data-theme=dark] .flink-list a .info, .flink-list a .info span background-color rgba(0, 0, 0, .6) .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

3. 在[Blogroot]\_config.butterfly.yml中添加配置项：

   1 2	# 友链样式，butterfly为默认样式，volantis为站点卡片样式.flexcard为弹性卡片样式 flink_style: volantis # butterfly | volantis | flexcard

4. 站点卡片添加了懒加载和图片失效替换。对应配置项为[Blogroot]\_config.butterfly.yml中的：

   1 2 3 4

   # Replace Broken Images (替換無法顯示的圖片) error_img: flink: # 头像失效替换图 post_page: # 站点缩略图

因为Volantis的site-card比Butterfly的flink-card多出了一个站点缩略图，所以需要再额外添加一条配置项。修改[Blogroot]\source\_data\link.yml,添加一条名为siteshot的配置项。

可能遇到的bug：使用flexcard样式时，因为全站字体大小配置与本站不一致的关系，可能导致友链卡片的头像位置偏移较大。请读者按照flink.styl里的注释内容自己微调。