整个博客界面是基于Chic主题来修改的，原主题并没有友链的功能，本来添加一个友链是一个很简单的事，只要新建一个page，然后在md文件里面布局+定义格式＋渲染即可，但是我想跟随主题的基调，把这三个步骤分开为md，ejs，styl三个文件，经过好几个晚上的折腾，终于是知道了layout的ejs文件与渲染styl文件的关系了，事不宜迟，请看下文！

前置步骤

新建page

在自己的博客文件夹打开git,输入指令hexo new page links,随后即可在source文件中找到links文件夹，打开有md文件，接下来我们需要添加一个nav来链接md文件

新加nav

在Chic主题内找到_config.yml文件，找到nav项目，添加links的链接
img

这样我们就能在自己的博客页面上看到友链的链接了，接下来我们来配置友链格式及其渲染的东西

定义格式及渲染

定义格式

打开我们刚刚创建的md文件，给md文件添加一个layout,layout后面填上link(我们后续需要创建一个link.ejs和link.styl文件)
img

然后进入文件夹/Chic/layout，新建一个link.ejs文件,编辑link.ejs,输入以下代码即可有格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="post-wrap links">
        <h1 class="post-title">
            <%= page.title %>
        </h1>
        <% for (var i=0; i < page.links.length; i++) { %>
        <div class="links-content">
            <div class="link-navigation">
                    <div class="card">
                        <img class="ava" src="<%= page.links[i].photo %>" />
                        <div class="card-header">
                        <div>
                            <a href="<%= page.links[i].url %>" target="_blank"><%= page.links[i].name %></a>
                        </div>
                        <div class="info"><%= page.links[i].info %></div>
                        </div>
                    </div>
            </div>
        </div>
        <% } %>
    </div>
</div>

格式渲染

进入/Chic/source/css/_page新建文件link.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.links-content{
margin-top:1rem;
}

.link-navigation::after {
content: " ";
display: block;
clear: both;
}

.card {
width: 45%;
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: 100%;
}

.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;
overflow: hidden;
white-space: nowrap;
}
    
    /* 媒体查询，用于手机端 */
@media (max-width: 768px) {
    .card {
    width: 90%; /* 在手机端，卡片宽度为页面宽度的90% */
    float: none; /* 移除浮动，使卡片堆叠 */
    }
}

格式应用

回到md文件，在layout下方添加一个属性links,属性后输入以下内容

1
2
3
4
5
6
7
8
- photo: (图片链接1，支持相对位置)
  url: （友链链接1）
  name:（友链名字1）
  info: (友链座右铭1)
- photo: (图片链接2，支持相对位置)
  url: （友链链接2）
  name:（友链名字2）
  info: (友链座右铭2)

正常来说到这一步就结束了，可问题就出现了，发现渲染怎么都渲染不上，直到打开了style.styl文件才知道渲染和layout没对应上

layout的ejs文件对应渲染文件styl

打开Chic/source/css/style.styl文件，在//page下添加@import "_page/link.styl"代码，只有完成这一步才能真正完成对应。（就是这一步坑了我前端小白好几天）

OK，完成以上步骤友链就可以正常使用啦！后续考虑美化一下友链界面。

(新手第一次写博客，如有错误和不好的地方，请多担待，另外对程序有问题请提出噢！)