新建links页面
1 | hexo new page links |
这样会在/source/下创建links/index.md1
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---
title: 友情链接
date: 2023-08-05 16:32:54
type: links
---
<style>
.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: #000;
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;
}
</style>
<div class="post-body">
<div id="links">
<div class="links-content"><div class="link-navigation"></div>
</div>
</div>
</div>
-----
-----
{% note success %}
## 友链格式
- 网站名称：IMyself
- 网站地址：[https://shadownc.github.io/](https://shadownc.github.io/)
- 网站描述：description
- 网站 Logo/头像：[https://shadownc.github.io/assets/images/logo.jpg](https://shadownc.github.io/assets/images/logo.jpg)
- 老站留言未开通,可去[新站](https://blog.lmyself.top/)留言新增友链
{% endnote %}
在主题目录文件夹下的_config.yml中添加目录
1 | menu: |
修改主题目录文件夹下的/languages/zh-Hans.yml
1 | menu: |
添加友链的json文件
在页面目录/source/links/中添加linklist.json，示例：1
2
3
4
5
6
7[
{
"nickname": "IMyself",
"avatar": "https://shadownc.github.io/assets/images/logo.jpg",
"site": "https://blog.lmyself.top"
}
]
加载link.js
在_layout.swig中添加:1
2
3
4
5
6
7
8
9<body>
...
{# 友链设置 #}
{% if page.type === 'links' %}
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/link.js?v={{ theme.version }}"></script>
{% else %}
{% endif %}
</body>
link.js内容: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
29link = {
init: function () {
var that = this
//这里设置的是刚才的 linklist.json 文件路径
$.getJSON('/links/linklist.json', function (data) {
that.render(data)
})
},
render: function (data) {
var html,
nickname,
avatar,
site,
li = ''
for (var i = 0; i < data.length; i++) {
nickname = data[i].nickname
avatar = data[i].avatar
site = data[i].site
description = data[i].description || ''
li += '<div class="card">' +
'<img class="ava" src="' + avatar + '" />' +
'<div class="card-header"><div>' +
' <a href="' + site + '" target="_blank">' + nickname + '</a></div>' +
'<div class="info">'+description+'</div></div></div>'
}
$('.link-navigation').append(li)
},
}
link.init()
link.js存放在主题所在文件夹中的/source/js/src/
