Hexo-NexT新增友链

NexT主题自带的友链模块放在侧边栏下面,视觉上比较臃肿。

本文介绍两种修改友链样式的方法以及具体的步骤。其中第一种方法需要修改 NexT 主题文件,第二种则不需要。

  • 本博客的友链见:友链

第一种友链样式

  • 本博客在NexT-7.1.2版本时采用的样式。

themes/Next/layout/新建一个文件links.swig,添加如下代码:

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

{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}

<div id="links">
<style>
.links-content{
margin-top:1rem;
}

.link-navigation::after {
content: " ";
display: block;
clear: both;
}

.card {
width: 300px;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;

}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 236px;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="links-content">
<div class="link-navigation">

{% for link in theme.mylinks %}

<div class="card">
<img class="ava" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>

{% endfor %}

</div>
{{ page.content }}
</div>
</div>

{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}

修改page.swig文件

然后我们修改themes/next/layout/page.swig,在下面这个位置添加两行代码:

1
2
3
4
5
6
7
8
9
10
11
  #}{% if page.type === 'categories' and not page.title %}{#
#}{{ __('title.category') + page_title_suffix }}{#
#}{% elif page.type === 'tags' and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#
#}{% elif page.type === 'schedule' and not page.title %}{#
#}{{ __('title.schedule') + page_title_suffix }}{#
+ #}{% elif page.type === 'links' and not page.title %}{#
+ #}{{ __('title.links') + page_title_suffix }}{#
#}{% else %}{#
#}{{ page.title + page_title_suffix }}{#
#}{% endif %}{#

然后在如下位置添加两行代码:

1
2
3
4
5
6
7
        {% elif page.type === 'schedule' %}
{% include 'schedule.swig' %}
+ {% elif page.type === 'links' %}
+ {% include 'links.swig' %}
{% else %}
{{ page.content }}
{% endif %}

修改主题配置文件_config.yml

在主题配置文件themes/_config.yml末尾处添加友链:

1
2
3
4
5
mylinks:
- nickname: 小丁的个人博客 #友链名称
avatar: https://tding.top/images/avatar.webp #友链头像
site: https://tding.top #友链地址
info: 世间所有的相遇,都是久别重逢 #友链说明

第二种友链样式——瀑布流友链实现

基本原理:新建md页面,渲染出一个html页面,其中包含一个class是.link-navigation的网页元素。同时加载links.js,下载json文件,渲染到这个网页元素中。

  • 本博客当前采用的样式。

新建links页面

新建 links 页面,输入放置友链的 html 元素:

1
hexo new page links

这样会在 /source/ 下创建 links/index.md。在文档的 front matter 添加 type: links,编辑好自己需要的友链页面内容,然后输入放置友链的 html 元素。示例:

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
---
title: 友链
type: links
---

<style>.links-content{margin-top:1rem}.link-navigation::after{content:" ";display:block;clear:both}.card{width:130px;font-size:1rem;padding:0;border-radius:4px;transition-duration:.15s;margin-bottom:1rem;display:block;float:left;box-shadow:0 2px 6px 0 rgba(0,0,0,.12);background:#f5f5f5}.card{margin-left:16px}@media(max-width:567px){.card{margin-left:16px;width:calc((100% - 16px)/2)}.card:nth-child(2n+1){margin-left:0}.card:not(:nth-child(2n+1)){margin-left:16px}}@media(min-width:567px){.card{margin-left:16px;width:calc((100% - 32px)/3)}.card:nth-child(3n+1){margin-left:0}.card:not(:nth-child(3n+1)){margin-left:16px}}@media(min-width:768px){.card{margin-left:16px;width:calc((100% - 48px)/4)}.card:nth-child(4n+1){margin-left:0}.card:not(:nth-child(4n+1)){margin-left:16px}}@media(min-width:1200px){.card{margin-left:16px;width:calc((100% - 64px)/5)}.card:nth-child(5n+1){margin-left:0}.card:not(:nth-child(5n+1)){margin-left:16px}}.card:hover{transform:scale(1.1);box-shadow:0 2px 6px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.card .thumb{width:100%;height:0;padding-bottom:100%;background-size:100% 100%!important}.posts-expand .post-body img{margin:0;padding:0;border:0}.card .card-header{display:block;text-align:center;padding:1rem .25rem;font-weight:500;color:#333;white-space:normal}.card .card-header a{font-style:normal;color:#2bbc8a;font-weight:700;text-decoration:none;border:0}.card .card-header a:hover{color:#d480aa;text-decoration:none;border:0}</style><div><div class="links-content"><div class="link-navigation" id="links1"></div></div></div>

------

<div style="text-align:center;"><span class="with-love" id="animate1">
<i class="fa fa-heart"></i>
</span>留言添加友链<span class="with-love" id="animate2">
<i class="fa fa-heart"></i>
</span></div>

------

{% note success %}

## 友链格式

- 网站名称:小丁的个人博客
- 网站地址:[https://tding.top](https://tding.top)
- 网站描述:世间所有的相遇,都是久别重逢
- 网站Logo/头像:[https://tding.top/images/avatar.webp](https://tding.top/images/avatar.webp)

{% endnote %}

侧边栏添加友链页面链接

主题配置文件_config.yml中添加:

1
2
3
4
5
6
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
+ links: /links || link

添加友链的 json 文件

在页面目录 /source/links/ 中添加 linklist.json,示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[{
"nickname": "三水非冰博客",
"avatar": "https://www.sanshuifeibing.com/usr/images/avatar2.jpg",
"site": "https://www.sanshuifeibing.com"
},
{
"nickname": "北宸",
"avatar": "https://leafjame.github.io/images/beichen.png",
"site": "https://leafjame.github.io"
},
{
"nickname": "千灵夙赋",
"avatar": "https://qianling.pw/images/avatar.png",
"site": "https://qianling.pw/"
}
]

在自定义文件body-end.swig中添加:

1
2
3
4
5
6
{# 友链设置 #}
{% if page.type === 'links' %}
<script src="/js/link.js"></script>
{% else %}

{% endif %}

link.js内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
link = {
init: function() {
var that = this;
//这里设置的是刚才的 linklist.json 文件路径
$.getJSON("/links/linklist.json",
function(data) {
that.render(data);
});
},
render: function(data) {
var html, nickname, avatar, site, li = "";
for (var i = 0; i < data.length; i++) {
nickname = data[i].nickname;
avatar = data[i].avatar;
site = data[i].site;
li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + nickname + '</a></div>' + '</div>' + '</div>';

}
$(".link-navigation").append(li);
}
}
link.init();

问题排查

  1. 浏览器F12查看页面源码,是否有一个class是.link-navigation的网页元素。
  2. 查看links.js是否正常加载了,json文件是否正常加载了。

如果加载js文件的/source/_data/body-end.swig不起作用,我们也可以把links.js内容放到/source/links/index.md中,效果是一样的。

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡