0%

Next主题自定义友链页面

Next主题自带的友链,需要在主题配置文件_config.yml中添加,渲染到侧边栏下面,视觉上比较臃肿。一个做法是自定义一个swig文件,用来渲染主题配置文件_config.yml中添加的友链,博文 Hexo修改友链样式 中有写。另一个做法就是模仿博文 Hexo NexT 博客增加瀑布流相册页面 自定义一个js文件,下载相应的json文件,渲染到页面。第一种做法需要硬修改next主题,第二种不需要,下面根据第二种思路为Next主题添加友链页面。

说明

next升级后,两个重要改变。

插件:next主题配置文件_config.yml中提供的插件选项对应的插件,不在默认在next目录中了。需要手动克隆到next\source\lib文件夹中,或者在主题配置文件_config.yml中添加相应的vendors。

/themes/next/_config.yml
1
2
3
4
5
vendors:
jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

配置文件:第一种方式:原来的配置分散在站点根目录下 _config.yml 和主题的 _config.yml 中,现在都可以写在站点跟目录下 _config.yml 。

需要添加theme_config

/_config.yml
1
2
theme_config:
主题的 _config.yml的配置

第二种方式:把主题配置文件放在站点目录下的source/_data/next.yml中

下面的操作,由于每个人的使用方式不一样,自己对应修改相应的文件就行了。

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

hexo new page links

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

/source/links/index.md
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://blog.maplesugar.space
- 网站描述:From rookie to master
- 网站Logo/头像:https://blog.maplesugar.space/uploads/maple-leaf-avatar.jpg

{% endnote %}

侧边栏添加友链页面链接

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

/themes/next/_config.yml
1
2
3
4
5
6
7
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
photos: /photos || camera-retro
links: /links || link

在语言文件中添加相关翻译

/themes/next/languages/zh-CN.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
photos: 相册
links: 友链
guestbook: 留言

添加友链的json文件

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

/source/links/linklist.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[{
"nickname": "Luminous",
"avatar": "https://blog.cdn.luotianyi.vc/wp-content/uploads/2018-10-08_22-10-37.jpg",
"site": "https://blog.eunji.cn"
},
{
"nickname": "派兹的小站",
"avatar": "https://blingwang.cn/images/logo.png",
"site": "https://blingwang.cn"
},
{
"nickname": "班班碎碎念",
"avatar": "https://maplesugar.gitlab.io/uploads/links-avatar/blog.dlzhang.com.jpg",
"site": "https://blog.dlzhang.com"
}
]

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

/themes/next/_config.yml
1
2
3
custom_file_path:
#添加在bodyEnd中的原因是保证links.js用到的其他js库加载完成了
bodyEnd: source/_data/body-end.swig

修改source/_data/body-end.swig

/source/_data/body-end.swig
1
2
3
4
5
6
7
8
{% if page.type ==='photos' %}
<script src="//cdn.jsdelivr.net/npm/minigrid@3.1.1/dist/minigrid.min.js"></script>
<script src="/js/photo.js"></script>
{% elif page.type === 'links' %}
<script src="/js/link.js"></script>
{% else %}

{% endif %}

links.js内容

/source/js/links.js
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
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>' +
//href 和 src 的链接地址是相册照片外部链接,也可以放博客目录里
'<div class="card-header">' +
'<div><a href="' + site + '" target="_blank">' + nickname + '</a></div>' +
'</div>' +
'</div>';

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