整个博客界面是基于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
/**友链页面**/
.links-content
  margin-top 1rem

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

.card
  width 280px  /* 卡片固定宽度 */
  font-size 1rem
  padding 10px 20px
  border-radius 4px
  transition-duration 0.15s
  margin-bottom 1rem
  display flex
  align-items center  /* 垂直居中对齐头像和内容 */

.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
  display flex  /* 使用 flex 布局 */
  flex-direction column  /* 竖直排列子元素 */
  font-style italic
  overflow hidden
  width 100%
  align-items flex-start  /* 添加这行代码使内容左对齐 */

.card .card-header a
  font-style normal
  color #2bbc8a
  font-weight bold
  text-decoration none
  margin 0 !important

.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  /* 移除浮动，使卡片堆叠 */

# 奇偶格式变化，可要可不要
# .card:nth-child(odd) {
# float: left;
# }

# .card:nth-child(even) {
# float: right;
# }

格式应用

回到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，完成以上步骤友链就可以正常使用啦！后续考虑美化一下友链界面。

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