一直默默地在网上冲浪，今天抽空把友链页面搞一下，这样可以记录好多新的朋友，一起遨游于主流的互联网大厂之外自由而又荒芜的时空。

NexT 主题自带的并没有友链页面，在网上查了很久，找到了解决方案：直接markdown中内嵌友链css和html，之前也有经验直接开搞，顺便mark一下

---

修改主题配置文件

修改主题配置文件_config.hexo-theme-next.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;
}

然后 找到Menu Settings添加links: /links || fas fa-link

links: /links || fas fa-link

再修改themes\hexo-theme-next\languages\zh-CN.yml 语言转化文件,添加links: 朋友们

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于

  links: 朋友们

创建友链页面

使用 hexo new page links 可以新建一个 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篇博客，一年多多少少能更新几篇文章
- 最好提供站点RSS，方便后续网站升级（将全面重写网站，主动拉取各位大佬的文章）

**友链格式：**

```
- name: 小牛呼噜噜
  info: 专心|专注|专研
  site: https://www.xiaoniuhululu.com
  avatar: https://www.xiaoniuhululu.com/images/zj/head-portrait-image.png
  rss: https://www.xiaoniuhululu.com/atom.xml
```

{% endnote %}

其中：site.data 就是 source/_data 目录，后面的 links 就是等会要创建的 links.yml 友链文件

添加友链

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

- name: 小牛呼噜噜
  info: 专心|专注|专研
  site: https://www.xiaoniuhululu.com
  avatar: https://www.xiaoniuhululu.com/images/zj/head-portrait-image.png
  rss: https://www.xiaoniuhululu.com/atom.xml

后续的友链继续往下写即可

部署Hexo

hexo clean;hexo g;hexo s //本地调试，查看效果
hexo clean;hexo g;hexo d//发布

最终效果：

---

参考： https://www.litcu.cn/posts/9f2deaa1