当前位置：首页 > news >正文

Hexo-butterfly友情链接页面优化

news 2025/6/15 8:40:34

预览效果

👉查看效果传送门

首先生成link页面

在 Hexo 博客根目录 [Blogroot]下打开终端，输入

hexo new page link

打开[Blogroot]\source\link\index.md,添加一行type: ‘link’:

---
title: 友情链接
date: 2025-05-21 17:32:19
type: "link"
---

创建数据文件

新建文件[Blogroot]\source_data\link.yml,没有_data文件夹的话也请自己新建。以下是默认友链格式示例。打开[Blogroot]\source_data\link.yml，输入：

# flink_style: butterfly / flexcard
- class_name: 友情链接class_desc: 这里的每个站点，都耐人寻味……flink_style: flexcardlink_list:- name: 码农观测站link: https://www.codeobservatory.cn/avatar: https://www.codeobservatory.cn/img/butterfly-icon.webpsiteshot: https://www.codeobservatory.cn/images/shot.pngdescr: 技术分享，编程学习type: 技术

打开link菜单

取消[Blogroot]_config.butterfly.yml中menu配置项内link页面的注释（这里我已改成中文【友链】）。

menu:首页: / || fas fa-home文章: /archives/ || fas fa-archive标签: /tags/ || fas fa-tags分类: /categories/ || fas fa-folder-open# List||fas fa-list||hide:     # 移动端隐藏子菜单#   Music: /music/ || fas fa-music#   Movie: /movies/ || fas fa-video友链: /link/ || fas fa-link关于: /about/ || fas fa-heart

替换模板文件

替换[Blogroot]\themes\butterfly\layout\includes\page\flink.pug

.containerif top_img === falseh1.page-title= page.title.flinkif site.data.linkeach i in site.data.linkif i.class_nameh2!= i.class_nameif i.class_desc.flink-desc!=i.class_desc        if i.flink_style === 'flexcard'.flexcard-flink-listeach item in i.link_lista.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr).wrapper.coverif item.type.is-type.is-type-0!=item.type- var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.linkif theme.lazyload.enableimg.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )elseimg.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' ).infoif theme.lazyload.enableimg.flink-avatar(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )elseimg(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )span.flink-sitename= item.namespan.flink-sitedesc(title=item.descr)= item.descrelse if i.flink_style === 'butterfly'.butterfly-flink-listeach item in i.link_list.flink-list-itema(href=url_for(item.link)  title=item.name target="_blank").flink-item-iconif theme.lazyload.enableimg(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )elseimg(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          != page.content

替换样式文件

替换[Blogroot]\themes\butterfly\source\css_page\flink.styl

#article-container.flinkmargin-bottom: 20px.flink-descmargin: 0 0 .6rem !important.butterfly-flink-listoverflow: autotext-align: center& > .flink-list-itemposition: relativefloat: leftoverflow: hiddenmargin: 15px 7pxwidth: calc(100% / 3 - 15px)height: 90pxline-height: 17px-webkit-transform: translateZ(0)addBorderRadius(8)background: #49b1f514+maxWidth1024()width: calc(50% - 15px) !important+maxWidth600()width: calc(100% - 15px) !important&:hover.flink-item-iconmargin-left: -10pxwidth: 0&:beforeposition: absolutetop: 0right: 0bottom: 0left: 0z-index: -1background: var(--text-bg-hover)content: ''transition: transform .3s ease-outtransform: scale(0)&:hover:before,&:focus:before,&:active:beforetransform: scale(1)acolor: var(--font-color)text-decoration: none.flink-item-iconfloat: leftoverflow: hiddenmargin: 15px 10pxwidth: 60pxheight: 60pxborder-radius: 30%transition: width .3s ease-outimgwidth: 100%height: 100%transition: filter 375ms ease-in .2s, transform .3sobject-fit: cover.img-altdisplay: none:hover color: #fff.flexcard-flink-listdisplay: flexflex-wrap: wrapjustify-content: flex-startmargin: -8pxalign-items: stretch> .flink-list-cardmargin: 8pxwidth: calc(100% / 4 - 16px)display: blockline-height: 1.4height: 100%text-decoration:none.coverwidth: 100%height: 120pxoverflow: hiddenborder-radius: 6pxbox-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)background: #f6f6f6position: relative.is-typeposition: absolutetop: 0left: 0color: #fffz-index: 10border-radius: 6px 0 6px 0padding: 4px 8pxfont-size: .6rembackground-color: var(--btn-bg)imgwidth: 100%height: 100%pointer-events: nonetransition: transform 2s easeobject-fit: cover .infomargin-top: 8pximgwidth: 32pxheight: 32pxpointer-events: noneborder-radius: 16pxfloat: leftmargin: 0 auto .1rem !importantmargin-right: 8px !important.flink-sitenamefont-weight: 600font-size: var(--global-font-size)color: var(--font-color)display: -webkit-box-webkit-box-orient: verticaloverflow: hidden-webkit-line-clamp: 1transition: all 0.28s ease-moz-transition: all 0.28s ease-webkit-transition: all 0.28s ease-o-transition: all 0.28s ease.flink-sitedescmargin-top: 4px !importantfont-size: var(--global-font-size);word-wrap: break-wordline-height: 1.2color: #888display: -webkit-box-webkit-box-orient: verticaloverflow: hidden-webkit-line-clamp: 2:hover.cover  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)  .flink-sitenamecolor: var(--tzy-theme) !important.flink-item-name@extend .limit-one-linepadding: 16px 10px 0 0height: 40pxfont-weight: boldfont-size: 1.43em.flink-item-desc@extend .limit-one-linepadding: 16px 10px 16px 0height: 50pxfont-size: .93em.flink-namemargin-bottom: 5pxfont-weight: boldfont-size: 1.5em

这里需要注意的是需要在source/_data/link.yml添加配置项