Hexo 7.3 添加友链页面（Hexo Theme NexT）

发表于 分类于

闲来无事，更新了一下 Hexo 博客的版本，从 5.4.2 升级到 7.3.0 了，粗略一看没啥大问题，直到我打开友链页面，链接一个都没了

之前的创建方法在这里 更新 Hexo 和 NexT 主题 - 设置 Links 页面

链接是保存在 _data/links.yaml 中的。

问了问 Claude Code ，说是可能 Liquid 模板语法 {% for %} 在 Hexo 新版本中不被支持了，所以无法读取 _data/links.yaml 中的内容，让 Claude Code 修改了一下没有成功。

想了一下，不如直接用 JavaScript 把内容写在 Links 页面里吧

环境

1
2
3
4
>hexo --version
INFO  Validating config
hexo: 7.3.0
hexo-cli: 4.3.2

执行 hexo new page links，替换文件内容如下

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
---
title: 友情链接
type: links
---

---- 
<div class="links-content">
    <div class="link-navigation" id="friendLinks">
        <!-- 友情链接将通过 JavaScript 动态加载 -->
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 友情链接数据
    const links = [
        {
            name: '',
            info: '',
            site: '',
            avatar: ''
        },        {
            name: '',
            info: '',
            site: '',
            avatar: ''
        },
    ];

    const container = document.getElementById('friendLinks');
    
    links.forEach(function(link) {
        // 创建可点击的链接容器
        const linkElement = document.createElement('a');
        linkElement.href = link.site;
        linkElement.target = '_blank';
        linkElement.style.textDecoration = 'none';
        linkElement.style.color = 'inherit';
        
        // 创建卡片元素
        const cardElement = document.createElement('div');
        cardElement.className = 'card';
        
        // 创建图片元素
        const imgElement = document.createElement('img');
        imgElement.className = 'ava nomediumzoom';
        imgElement.src = link.avatar;
        
        // 添加图片加载失败的 fallback
        imgElement.onerror = function() {
            this.src = '/images/error.gif';
            this.onerror = null; // 防止无限循环
        };
        
        // 创建头像信息容器
        const headerElement = document.createElement('div');
        headerElement.className = 'card-header';
        headerElement.innerHTML = 
            '<div class="card-name">' + link.name + '</div>' +
            '<div class="info">' + link.info + '</div>';
        
        // 组装卡片
        cardElement.appendChild(imgElement);
        cardElement.appendChild(headerElement);
        linkElement.appendChild(cardElement);
        container.appendChild(linkElement);
    });
});
</script>

---- 

> 其他地方可以使用 markdown 填写内容

> **本站信息** 
name: **Homulilly**
info:  Aroes\'s Blog 
site:  https://homulilly.com
avatar： https://homulilly.com/images/avatar.jpg
rss: https://homulilly.com/atom.xml

样式文件

创建或是编辑 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/* 友情链接 */
#links {
    margin-top: 5rem;
}

.links-content {
    margin-top: 1rem;
}

.link-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 可选：控制弹性项之间的水平间距 */
}

.card {
    width: 270px;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 4px;
    transition-duration: 0.15s;
    margin-bottom: 1rem;
    display: flex;
}

/* 鼠标悬浮时效果 */
.card:hover {
    transform: scale(1.05);
} 

.card a {
    border: none;
}

/* 友情链接卡片整体链接样式 */
.link-navigation > a {
    text-decoration: none;
    border-bottom: none;
    color: inherit;
}

.link-navigation > a:hover {
    border-bottom: none;
}

.card .ava {
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 !important;
    margin-right: 1em !important;
    border-radius: 4px;
    margin-top: 5px !important;
}

.card .card-header {
    font-style: italic;
    overflow: hidden;
    width: 236px;
}

.card .card-header .card-name {
    font-style: normal;
    color: #2bbc8a;
    font-weight: bold;
    text-decoration: none;
}

.card:hover .card-header .card-name {
    color: #d480aa;
}

.card .card-header .info {
    font-style: normal;
    color: #a3a3a3;
    font-size: 14px;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}