hexo-theme-butterfly创建友链界面

关于如何创建友链界面查看官方文档

https://jerryc.me/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5

创建后的效果就像这样:http://www.jingfengji.tech/link/

其中”友情链接”这四个字是在link.yml的class_name,可以自行修改。link.yml里的link_list就是友链的数据了。

拓展友链分类

新建一个跟link.yml一样结构的文件,我这里举例为gamedeveloper.yml,放在source/_data中,class_name我改为Game Developer。

然后找到flink.pug文件,复制下面这一段代码

修改复制那一段的site.data.link 中的link为前面新建的gamedeveloper.yml的文件名,如下所示:

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
#page
.flink#article-container
each i in site.data.gamedeveloper
h2= i.class_name
.post-cards
.md-links
each item in i.link_list
.md-links-item
a(href=item.link title=item.name target="_blank")
if theme.lazyload.enable
img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
else
img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
.md-links-title= item.name
.md-links-des= item.descr
.flink#article-container
each i in site.data.link
h2= i.class_name
.post-cards
.md-links
each item in i.link_list
.md-links-item
a(href=item.link title=item.name target="_blank")
if theme.lazyload.enable
img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
else
img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
.md-links-title= item.name
.md-links-des= item.descr
!= page.content
if page.comments !== false
include includes/comments/index.pug

!= page.content 这一行不要复制了。

最终效果:http://www.jingfengji.tech/link/

2020.4.10 更新

经群友 云玩家(https://blog.zplayer.cloud) 指教,上面方法复杂了,直接在link.yml里复制一个class即可,如下所示:

一个class对应一个分类,效果跟前面是一样的,这个方法简单得多。