![]()
一直默默地在网上冲浪，今天抽空把友链页面搞一下，这样可以记录好多新的朋友，一起遨游于主流的互联网大厂之外自由而又荒芜的时空。
NexT 主题自带的并没有友链页面，在网上查了很久，找到了解决方案：直接markdown中内嵌友链css和html，之前也有经验直接开搞，顺便mark一下
修改主题配置文件
修改主题配置文件_config.hexo-theme-next.yml，我这个比较特殊，大家找到自己的那个就行,放开下方代码的注释，开启自定样式的功能
1
2
| custom_file_path:
style: source/_data/styles.styl
|
查看有没有source\_data\styles.styl这个文件，没有就新建一个即可
添加以下格式：
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
| #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
1
| links: /links || fas fa-link
|
再修改themes\hexo-theme-next\languages\zh-CN.yml 语言转化文件,添加links: 朋友们
1
2
3
4
5
6
7
8
| menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
links: 朋友们
|
创建友链页面
使用 hexo new page links 可以新建一个 link 页面，我们将其作为友链页面
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
| ---
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 文件，写入以下内容：
1
2
3
4
5
| - 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
1
2
| hexo clean;hexo g;hexo s //本地调试，查看效果
hexo clean;hexo g;hexo d//发布
|
最终效果：
![image-20220509223608666]()
参考： https://www.litcu.cn/posts/9f2deaa1
![]()
