Hexo NexT8 主题添加友链页面

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 就可以看到效果啦!

也欢迎大家与我交换友链呀!

参考链接