基于Butterfly主题的友链魔改
点开查看开发记录
开发记录
- 完成pug改写。
- 新版友链沿用Volantis主题的Site-card样式。
- 添加判断机制,保留原版友链,通过修改配置文件切换友链样式风格。
- 移植Volantis的issues标签。实现站点友链更新。
- 参考小康大佬的基于Gitee的友链创建方案,实现站点友链更新。
- 更新了issues仓库对应配置方案。
Volantis文档还是不够完善 - 简化配置方案,覆盖安装即可。
- 添加了卓越科技的教程帖推荐。
点开查看参考内容
思路解读
Butterfly的友链太过单调了。加上之前正好移植了Volantis的一堆外挂标签样式,突发奇想用Site-card来写友链,效果相当理想。
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。比照教程进行复制。
魔改步骤
新建友链页面。已开的可以跳过,从第2步开始.
参照参考教程中的Butterfly友链界面配置教程先配置好默认友链页面。- 在Hexo博客根目录
[Blogroot]
下打开终端,输入hexo new page link
。hexo new page link
打开
[Blogroot]\source\link\index.md
,添加一行type: 'link'
:---
title: link
date: 2020-12-01 22:19:45
type: 'link'
---- 新建文件
[Blogroot]\source\_data\link.yml
,没有_data
文件夹的话也请自己新建。以下是默认友链格式示例(自己写的教程,夹带点私货不过分吧,嘻嘻)。打开[Blogroot]\source\_data\link.yml
,输入:- class_name: 糖果屋のVIP
class_desc: 售后服务享五折优惠2333
link_list:
- name: Akilar
link: https://akilar.top
avatar: https://akilar.top/img/siteicon/favicon.png
descr: 欢迎光临糖果屋 - 取消
[Blogroot]\_config.butterfly.yml
中menu
配置项内link
页面的注释。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
- 在Hexo博客根目录
- 修改
[Blogroot]\themes\butterfly\layout\includes\page\flink.pug
,此处添加判断机制,使得可以通过修改配置文件来切换友链风格。if (theme.flink_style === 'butterfly')
.flink#article-container
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")
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 )
span.flink-item-name= item.name
span.flink-item-desc(title=item.descr)= item.descr
!= page.content
else if (theme.flink_style === 'volantis')
.flink#article-container
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
if theme.lazyload.enable
img(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
else
img(src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
.info
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='' )
else
img(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\source\css\_page\flink.styl
。如果是已经实装过本站的基于Butterfly的外挂标签引入教程的读者,就不需要再进行第3步了。这里用到的Volantis的flink样式就是外挂标签中的site-card。
if hexo-config('flink_style') == 'butterfly'
.flink#article-container
.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
img
transform: rotate(360deg)
&: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
img
float: left
margin: 15px 10px
width: 60px
height: 60px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
display: block
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
display: block
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
else if hexo-config('flink_style') == 'volantis'
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%
// trans(.75s)
transition: transform 2s ease
object-fit: cover
.info
margin-top: 16px * 0.5
img
width: 32px
height: 32px
border-radius: 16px
float: left
margin-right: 8px
margin-top: 2px
span
display: block
.title
font-weight: 600
font-size: $fontsize-list
color: #444
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 1
trans()
.desc
font-size: $fontsize-footnote
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- 因为Volantis的site-card比Butterfly的flink-card多出了一个站点缩略图,所以需要再额外添加一条配置项。修改
[Blogroot]\source\_data\link.yml
,添加一条名为siteshot
的配置项。- class_name: 糖果屋のVIP
class_desc: 售后服务享五折优惠2333
link_list:
- name: Akilar
link: https://akilar.top
avatar: https://akilar.top/img/siteicon/favicon.png
descr: 欢迎光临糖果屋
siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg
# siteshot就是站点缩略图的链接。 - 在
[Blogroot]\_config.butterfly.yml
中添加配置项:# 友链样式,butterfly为默认样式,volantis为站点卡片样式。
flink_style: volantis # butterfly | volantis - 站点卡片添加了懒加载和图片失效替换。对应配置项为
[Blogroot]\_config.butterfly.yml
中的:# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: # 头像失效替换图
post_page: # 站点缩略图
站点图片批量半自动截图
这里使用的是@ChenYFan大佬的项目,通过调用thum.io提供的接口,配合github action
,再次欢呼,github action真香,自动下载站点截图到github中,再配合jsdelivr+github图床来引用图片。
使用方法
首先fork项目到自己的github仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据thum.io提供的接口文档修改了参数,使得站点截图较小。(用我自己的站点截图作为示例,两者大小是1.2MB:34KB的程度,缩小了将近40倍。当然清晰度也不可同日而语,酌情选择)
获取Token,(此处直接使用当初为github actions教程准备的配图了)。
访问Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token名称随意,但必须勾选repo项。token只会显示这一次,之后将无法查看,所以务必保证你已经记录下了Token。之后如果忘记了就只能重新生成重新配置了。
在你fork的项目仓库设置中,新建secrets。变量名为
TOKEN
,必须严格大写。首先需要clone项目到本地。
git clone git@github.com:[GithubUsername]/ScreenShot.git
然后打开项目中的
ScreenShot\.github\workflows\get.yml
,
按照示例添加你的友链地址。curl https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://<YourDomain>/ -o <YourDoamin>.jpg
记得将
curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.*
中的[GithubUsername]改为你自己的github账号名。之后每次提交就会自动启动github action,将图片下载到
ScreenShot
的gh-pages
分支。并且通过purge.jsdelivr.net
刷新缓存。最后,在友链配置中,就能用
https://cdn.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/[friend_link].jpg
来引用站点缩略图了。- class_name: 糖果屋のVIP
class_desc: 售后服务享五折优惠2333
link_list:
- name: Akilar
link: https://akilar.top
avatar: https://akilar.top/img/siteicon/favicon.png
descr: 欢迎光临糖果屋
siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg- 可能遇到的bug
- 没有启动github action:请到仓库中找到Action,将其打开。
- 图片缓存未刷新:purge.jsdelivr.net的强制刷新也是玄学,这种时候只能等待了。或者手动发布release,然后使用版本号。这个是jsdelivr的使用技巧,不多做讨论。
靓仔已经在迫不及待的加我友链了,而靓女还在犹豫要不要再加下我的联系方式。
提交issues自动更新友链
使用issues自动更新友链的实质是借助相应的API读取仓库issues并获取相应的数据,然后用js写到页面上。因为不同的js没法根据配置文件进行主题样式切换,所以请读者自行选择相应的方案。(事实上两种样式是可以共存的,因为通过读取issues写入友链页面的就是完整的HTML语言,只要同时加载flink.styl和site-card.styl的内容,赋予它样式就好。真正没法共存的是通过读取link.yml生成友链页面的部分。)
原生butterfly友链样式,根据issues
进行更新的方案,已有详细教程。请移步小康的文档库。
其中教程内的friend.js
可能无法查看。此处提供可查看的链接:friend.js。
博客配置
点开查看博客配置方案
请移步站内教程:基于Butterfly的外挂标签引入 完成前置步骤引入。
如果不需要那么多标签,可以在基于Butterfly的外挂标签引入 教程基础上自行精简,只保留以下3个文件即可(其实核心只需要两个issues.js)。
scripts
|__tag
|__issues.js
#渲染issues的脚本,必须
|__site.js
# 渲染site标签的脚本,若不需要在文章中使用站点卡片样式,可以不要
source
|__js
|__ issues.js
#读取issues的api的脚本。可以不要,并换成CDN外链。在友链页
[Blogroot]\source\link\index.md
内添加如下内容作为标签定位:gitee仓库示例
{% issues sites | api=https://gitee.com/api/v5/repos/[GiteeUsername]/[GiteeReponame]/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
github仓库示例
{% issues sites | api=https://api.github.com/repos/[GithubUsername]/[GithubReponame]/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
之后即可让读者根据示例来提交友链了。
{
"title": "",
"screenshot": "",
"url": "",
"avatar": "",
"description": "",
"「keywords」": ""
}
参数 | 释义 |
---|---|
title | 网站名称 |
screenshot | 网站预览图 |
url | 网站链接,需要添加https:// 协议组成完整域名。否则可能被识别成站点相对路径。 |
avatar | 站长头像 |
「keywords」 | 分组依据, 未必要叫「keywords」, 详见基于Butterfly的外挂标签引入 第21节对issues标签的参数解释 |
仓库配置
Github配置方案
新建一个仓库,仓库名随意,这里我命名为
friend_link
,
新建文件friend_link\.github\ISSUE_TEMPLATE.md
,
并在其中输入以下内容作为issues
模板。其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义,否则无法嵌套代码块。
---
name: 友链模板
about: 请根据指示规范填写友链格式。
---
<!-- 请在下方代码块的双引号中填写 -->
\```json
{
"title": "",
"screenshot": "",
"url": "",
"avatar": "",
"description": "",
"keywords": ""
}
\```
<!--
"title": "站点名称",
"screenshot": "站点预览图链接",
"url": "站点链接",
"avatar": "头像链接",
"description": "站点描述",
"keywords": "关键词,作为分组名"
-->
<!-- 示例 -->
<!--
"title": "Akilarの糖果屋",
"screenshot": "https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg",
"url": "https://akilar.top/",
"avatar": "https://akilar.top/img/siteicon/favicon.png",
"description": "期待您的光临!",
"keywords": "糖果屋"
-->新建active label
提交示例
从审核通过到页面读取有一段api的缓存期,稍微有点耐心。
Gitee配置方案
新建一个仓库,仓库名随意,这里我命名为
friend_link
,
新建文件friend_link\.gitee\ISSUE_TEMPLATE.md
,
并在其中输入以下内容作为issues
模板。其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义,否则无法嵌套代码块。
---
name: 友链模板
about: 请根据指示规范填写友链格式。
---
<!-- 请在下方代码块的双引号中填写 -->
\```json
{
"title": "",
"screenshot": "",
"url": "",
"avatar": "",
"description": "",
"keywords": ""
}
\```
<!--
"title": "站点名称",
"screenshot": "站点预览图链接",
"url": "站点链接",
"avatar": "头像链接",
"description": "站点描述",
"keywords": "关键词,作为分组名"
-->
<!-- 示例 -->
<!--
"title": "Akilarの糖果屋",
"screenshot": "https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg",
"url": "https://akilar.top/",
"avatar": "https://akilar.top/img/siteicon/favicon.png",
"description": "期待您的光临!",
"keywords": "糖果屋"
-->新建active标签
提交示例
从审核通过到页面读取有一段api的缓存期,稍微有点耐心。
更多内容
更多友链规范可以参考Volantis作者的友链页:
思路拓展:考虑到自动更新是读取issues,而有一款评论是直接将评论变为issues进行提交。也就是gitalk评论。想必头脑灵活的读者已经有思路了。主要是我自己懒得写了。
可能遇到的Bug
- 根据Heo的反馈的
BUG特性,如果开启了fancybox
或者medium_zoom
功能,会在页面编译时给img
便签强行渲染上fancybox
或者medium_zoom
的外壳,导致小概率的点击图片放大时,会同时跳转到友链页。(反正我都是正常放大图片,没有跳转的情况。)
解决方案(相对的,友链图片将无法放大,酌情修改):关闭fancybox,一劳永逸。- 给友链页的img标签添加禁止点击属性
style="pointer-events:none;"
。使用内联样式,使得只对友链页生效而不会影响其他页面的fancybox
渲染。
修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug
if theme.lazyload.enable
- img(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
+ img(style="pointer-events:none;" data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
else
img(src=url_for(item.siteshot) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
.info
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='' )
+ img(style="pointer-events:none;" 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='' )
- 根据
ISSUES
写入友链无效issues
写入友链需要jquery
支持,Butterfly_v3.4.0
以后实现去jquery
化,需要自己添加jquery
。还得保证加载顺序在issues.js
之前。inject:
head:
bottom:
+ - <script src=" https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
- <script defer src="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script>更多好帖
- 由@卓越科技基于@小康的
issues
提交友链更新方案和@ChenYFan的博客站点自动截图方案制作。同时还实现了在Butterfly原版友链的基础上新增了鼠标悬停显示站点预览图的功能。
TO DO
flink.pug魔改,移值Volantis的site-card样式
保留原版友链,通过配置文件切换样式
siteshot站点预览图批量半自动化截图
使用issues,经审批后自动更新友链