NexT 主题自带的并没有友链页面，本着 “可以不用但必须有” 的思想，我通过搜索引擎找到了可行的解决方案，在此记录，希望能帮到其他人。
NexT 版本：8.10.1。
先看一下最终效果吧：
NexT 配置文件修改
打开_config.next.yml 文件，搜索_data，能够找到这样一条被注释的语句：style: source/_data/styles.styl，取消注释即可。
然后在 source 文件夹下新建_data 目录，并创建文件 styles.styl，在里面写入以下内容：
#links {
margin-top: 5rem;
}
.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;
}
|
然后修改主页面板：
友链: /links || fas fa-link
|
创建友链页面
使用 hexo new page link 可以新建一个 link 页面，我们将其作为友链页面。创建完成后，写入以下内容（自己使用时请按需修改）：
---
title: 友链
type: links
---
<div class="links-content">
<div class="no-icon note warning">
<div class="link-info">欢迎与我交换友链！</div></div>
<div class="link-navigation">
{% for link in site.data.links %}
<div class="card"><img class="ava nomediumzoom" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank"> {{ link.name }}</a> </div>
<div class="info">{{ link.info }}</div>
</div>
</div>
{% endfor %}
</div>
------
{% note success %}
**友链申请条件：**
- 网站内容符合中国大陆法律
- 已开启HTTPS，且至少有3篇博客，最新一篇为三个月之内发表
- 网站内容以原创为主，技术性博客优先，娱乐性博客除非特别感兴趣，否则不会考虑
**友链格式：**
```yaml
- name: Cu Blog
site: https://www.litcu.cn
info: 安全新人小醋的快乐收集处
avatar: https://img.litcu.cn/avatar/avatar1.jpg
```
{% endnote %}
|
核心是 HTML 代码中的那个 for 循环，site.data 就是 source/_data 目录，后面的 links 就是我们之后要创建的 links.yml 友链文件。如果后续没有正常显示友链，可以看看这里是否出现了问题。
添加友链
在 source/_data/ 目录下新建 link.yml 文件，写入以下内容：
- name: Cu Blog
site: https://www.litcu.cn
info: 安全新人小醋的快乐收集处
avatar: https://img.litcu.cn/avatar/avatar1.jpg
|
然后 hexo cl && hexo g && hexo s 就可以看到效果啦！
也欢迎大家与我交换友链呀！
参考链接