Hexo NexT 添加友链页面

发表于 分类于 ， 阅读次数： 本文字数： 5.4k 阅读时长 ≈ 13 分钟
给 NexT 主题添加友链页面

关于如何给 NexT 主题添加友链页面，在网上能够搜到很多，但是基本上都已经过时了。

要么是没有把数据文件和主题分离，还在修改主题中的文件（而且是旧版的文件，新版的主题结构和内容都有变化）；要么是给出的代码还依赖 jQuery。

而新版的 NexT 主题除了 Fancybox 外，其它功能都已经不再依赖 jQuery 了。由于 Fancybox 和我的 WebP 检测代码冲突，所以我切换到了 medium-zoom，这样就不再引入 jQuery 了。

因此，网上找到的代码就不能拿过来直接用了。

这里主要需要修改的是 link.js 文件。

1. 涉及到的文件

1
2
3
4
5
6
7
8
9
10
11
12
.
├── _config.next.yml
└── source
    ├── _data
    │   └── body-end.njk
    ├── css
    │   └── link.css
    ├── js
    │   └── link.js
    └── links
        ├── index.md
        └── linklist.json

2. 步骤

2.1. 建立页面

运行

1
hexo new page links

这会创建 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
28
29
30
31
32
33
34
35
36
37
38
39
40
---
title: 友情链接
type: links
toc:
  enable: false
---

<link rel="stylesheet" href="/css/link.css">

{% note info %}

排名不分先后，每次刷新会随机排列。

{% endnote %}

<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>
  留言互换友链 o ((>ω<)) o
  <span class="with-love" id="animate2"><i class="fa fa-heart"></i></span>
</div>
  
------

{% note success %}

## 友链格式

- 名称：如鱼饮水，冷暖自知
- 网址：[https://wangjiezhe.com](https://wangjiezhe.com)
- 头像：[https://gravatar.loli.net/avatar/e09cf54e933e5a690716e68961ff3b1c?s=512](https://gravatar.loli.net//avatar/e09cf54e933e5a690716e68961ff3b1c?s=512)

{% endnote %}

注意在 Front-Matter 里一定要有 type: links。

这里我还关闭了侧边栏的目录。

2.2. 存储数据

所有友链的数据都放在 source/links/linklist.json 里，其格式为：

1
2
3
4
5
6
7
8
9
10
11
12
[
  {
    "name": "",
    "site": "",
    "avatar": ""
  },
  {
    "name": "",
    "site": "",
    "avatar": ""
  }
]

其中 name 为网站的名字，site 为网址，avatar 为头像。

头像可以使用 Gravatar，这样可以保证始终可用的。

2.3. 渲染页面

在 source/_data/body-end.njk 中，引入 link.js：

1
2
3
{% if page.type === 'links' %}
  {{- next_js('link.js', true) }}
{% endif %}

其中 source/js/link.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
// 随机排列
function shuffle(arr) {
  let i = arr.length;
  while (i) {
    let j = Math.floor(Math.random() * i--);
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
}

// 渲染数据
function renderlink(data) {
  var name, avatar, site, li = "";
  shuffle(data);
  for (var i = 0; i < data.length; i++) {
    name = data[i].name;
    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">' + name + '</a></div>' + '</div>' + '</div>';
  }
  document.querySelector(".link-navigation").innerHTML = li;
}

// 获取 json 文件
fetch('/links/linklist.json')
  .then(response => response.json())
  .then(res => renderlink(res));

2.4. 创建样式

创建 source/css/link.css，其内容为（这个文件完全来自于网络）：

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
.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
}

2.5. 添加侧栏

在主题的配置文件（目前默认为 _config.next.yml）中，添加

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

大功告成！

参考：

  • Hexo-NexT 新增友链
  • You (Might) Don't Need jQuery