友链重构小记

友链重构小记

前言

腾讯云新人优惠买的2c2g服务器快过期了，博客也搭了将近一年了，这两天给迁移到了新的服务器上。

然后HoL群里刚好聊起了友链，左看右看横看竖看总觉得自己一年前写的友链实在不够优雅。

来都来了，那就给他重构一下，但没想到一重构就从下午重构到晚上十一点了。

是收获还是有的，首先是友链漂亮了不少，其次是对hexo这个框架的理解提升了不少。

过程

起初便打定主意要用卡片式的，因为确实好看，而且很多群友都在用。

然后准备问问DeepSeek要怎么实现，很幸运，第一句话就问出来了。

但是有些细节问题需要继续追问，比如说cactus主题没有_custom，也没找到_data，

还有诸如CSS一直没有生效，导航栏被渲染了两遍，以及index.md中的内容无法显示的问题。

那为什么红温了呢，因为：

服务器繁忙，请稍后再试。

想着网页版不用也罢，拿着api问半天想起来没有上下文，难受的我去硅基流动，结果也是一个劲褒姒。

然后把各大平台的AI都抡冒烟了，还是不如DS好使。

之后想要在百度上找篇教程看看怎么个写法，但是一水的NEXT主题的教程。

可我用的也不是NEXT啊，这时想起了我一年前自己拿史一样的代码糊友链的原因，

嗯，因为找不到教程。

最后还是用的硅基流动，总归还是有时候能用的。

总结一下搭建的流程，这大概是一个通用的教程。

步骤梳理

第一步是先新建一个页面。

1
hexo new page links

一想到我之前直接在source里面mkdir就感觉自己像个原始人一样。

然后在source/links/index.md的Front Matter中指定模板。

1
2
3
4
5
---
title: links
date: 2025-02-11 16:15:39
layout: links
---

这个时候有人就要问了，这个主题没有links模板啊。

对啊，所以下一步是自己创建一个links模板。

在themes/cactus/layout/中新建一个links.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<main class="content">
  <article class="page">
    <h1 class="page-title"><%= page.title %></h1>
    <div class="links-container">
      <% site.data.links.forEach(function(link) { %>
        <a href="<%= link.url %>" class="link-card" target="_blank" rel="noopener">
          <div class="card-avatar">
            <img src="<%= link.avatar %>" alt="<%= link.name %>">
          </div>
          <div class="card-content">
            <h3 class="card-title"><%= link.name %></h3>
            <% if (link.description) { %>
              <p class="card-desc"><%= link.description %></p>
            <% } %>
          </div>
        </a>
      <% }) %>
    </div>
  </article>
</main>
<%- partial('_partial/footer') %>

新建完模板记得在source里面新建一个css文件夹，切记是hexo根目录下的source，而不是themes根目录下的source。

然后在其中创建一个叫做custom.css的css文件。

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
/* 友情链接页面样式 */
.links-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.link-item {
  padding: 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.2s;
}

.link-item:hover {
  transform: translateY(-3px);
}

.link-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  float: left;
  margin-right: 15px;
}

.link-info {
  overflow: hidden;
}

.link-name {
  font-weight: bold;
  display: block;
  color: #333;
}

.link-desc {
  color: #666;
  font-size: 0.9em;
}


/* ===== 卡片容器 ===== */
.links-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  padding: 30px 0;
}

/* ===== 单个卡片 ===== */
.link-card {
  display: flex;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-decoration: none !important;
  color: inherit;
}

/* 暗色模式适配 */
.theme-dark .link-card {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* 悬停效果 */
.link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ===== 头像部分 ===== */
.card-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
}

/* ===== 文字内容 ===== */
.card-content {
  flex: 1;
}

.card-title {
  margin: 0 0 8px 0;
  font-size: 1.2em;
  color: #333;
}

.theme-dark .card-title {
  color: #fff;
}

.card-desc {
  margin: 0;
  font-size: 0.95em;
  color: #666;
  line-height: 1.5;
}

.theme-dark .card-desc {
  color: rgba(255, 255, 255, 0.7);
}

.link-card {
  position: relative;
  overflow: hidden;
}

/* 悬浮流光效果 */
.link-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 25%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 75%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.5s;
}

.link-card:hover::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .links-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .link-card {
    padding: 15px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .card-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

而后在themes/cactus/_config.yml中添加如下内容以确保前面的步骤生效。

1
2
3
4
5
6
# 确保布局文件路径正确
layout:
  links: layout/links.ejs

# 确保启用自定义 CSS
custom_css: /css/custom.css

然后在source/中新建一个_data文件夹用来存储友链的数据。

在其中新建一个links.yml，

内容格式如下：

1
2
3
4
- name: 网站名称
  url: 网站地址
  avatar: 网站头像
  description: 网站介绍

做完这几步照例应该是成功了，但是很遗憾我的css没有生效。

看了public/css/里面是有custom.css生成的，

虽然不是很理解，但是在themes/cactus/layout/_partial/head.ejs的最前面加上下列内容强制加载自定义CSS就没问题了

1
2
<!-- 强制加载自定义 CSS -->
<link rel="stylesheet" href="/css/custom.css">

还有就是在导航栏添加Links，只需要在themes/cactus/_config.yml的nav下添加 Links: /links/即可

1
2
3
4
5
nav:
  home: /
  about: /about/
  articles: /archives/
  Links: /links/

最后记得清除缓存然后重新部署

1
hexo clean && hexo g && hexo s