Hexo-nexT博客搭建-nexT优化篇-友联单独开个页面

推荐先阅读：【2022教程全】Hexo博客 + nexT主题

NexT 版本：8.10.1。

效果：

主题下配置文件../blog/themes/hexo-theme-next/_config.yml 取消此行注释：

custom_file_path:
  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;
}

主题下配置文件../blog/themes/hexo-theme-next/_config.yml 修改主页面板：

友链: /links || fas fa-link

命令行输入 hexo new page links 创建links页面，

得到source/links/index.md，填入以下内容

---
title: 友情链接
type: links

---

<div class="links-content">
<div class="no-icon note warning">
<div class="link-info">欢迎与我交换友链！</div>
<p>欢迎进群讨论：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=sGovlZbEY8P8oAgLw-7TGNW14pnzTcsl&jump_from=webapi">Hexo博客大佬交流群</a></p>
</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: 知行博客
  site: https://zxblog.eu.org
  info: Java资源速查
  avatar: https://zxblog.eu.org/avatar.webp
```

{% endnote %}

在 source/_data/ 目录下新建 link.yml 文件，写入以下内容：

- name: 知行博客
  site: https://zxblog.eu.org
  info: Java资源速查
  avatar: https://zxblog.eu.org/avatar.webp

然后 hexo cl && hexo g && hexo s 就可以看到效果啦！

也欢迎大家与我交换友链呀！https://zxblog.eu.org/links