摄影网站建设策划书,想做网站找什么公司,自媒体网络公司经营范围,建网站专用网站预览效果 #x1f449;查看效果传送门 首先生成link页面
在 Hexo 博客根目录 [Blogroot]下打开终端#xff0c;输入
hexo new page link打开[Blogroot]\source\link\index.md,添加一行type: ‘link’:
---
title: 友情链接
date: 2025-05-21 17:32:19
type: link查看效果传送门 首先生成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(hrefurl_for(item.link) target_blank data-titleitem.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-srcsiteshot onerrorthis.onerrornull;this.src url_for(theme.error_img.post_page) alt )elseimg.cover.fadeIn(srcsiteshot onerrorthis.onerrornull;this.src url_for(theme.error_img.post_page) alt ).infoif theme.lazyload.enableimg.flink-avatar(data-lazy-srcurl_for(item.avatar) onerrorthis.onerrornull;this.src url_for(theme.error_img.flink) alt )elseimg(srcurl_for(item.avatar) onerrorthis.onerrornull;this.src url_for(theme.error_img.flink) alt )span.flink-sitename item.namespan.flink-sitedesc(titleitem.descr) item.descrelse if i.flink_style butterfly.butterfly-flink-listeach item in i.link_list.flink-list-itema(hrefurl_for(item.link) titleitem.name target_blank).flink-item-iconif theme.lazyload.enableimg(data-lazy-srcurl_for(item.avatar) onerrorthis.onerrornull;this.src url_for(theme.error_img.flink) altitem.name )elseimg(srcurl_for(item.avatar) onerrorthis.onerrornull;this.src url_for(theme.error_img.flink) altitem.name ).flink-item-info.flink-item-name item.name.flink-item-desc(titleitem.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: #49b1f514maxWidth1024()width: calc(50% - 15px) !importantmaxWidth600()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-nameextend .limit-one-linepadding: 16px 10px 0 0height: 40pxfont-weight: boldfont-size: 1.43em.flink-item-descextend .limit-one-linepadding: 16px 10px 16px 0height: 50pxfont-size: .93em.flink-namemargin-bottom: 5pxfont-weight: boldfont-size: 1.5em这里需要注意的是需要在source/_data/link.yml添加配置项
flink_style: flexcard || butterfly该参数可选值flexcard或者butterfly分别对应两种样式。 全部保存好之后一键三连查看效果
hexo c; hexo g;hexo s 版权声明本文为作者原创文章遵循 CC 4.0 BY-SA 版权协议转载请附上原文出处链接和本声明。 作者: 码农刚子 邮箱: wxsccfoxmail.com 原文链接: https://www.codeobservatory.cn/archives/9dd55dbc.html
