之前 blog 上的友情链接板块一直依靠于一个简单的 widget 实现，一开始甚至是一个完全不能容纳任何细节的列表式清单。后来照着其他 widget 的写法，稍微修改了一下 layout 实现了简洁的详细信息展示，但是 BUG 也随之而来。在不同缩放比例下，内容会溢出容器，显得极不协调。再者，单独的 widget 始终不是长久之计，于是折腾了一个页面。
初期探索
Icarus 这个主题使用 ejs 来生成页面，因此，我大致整理了一些细节。
几种标签的意义
_config.yml 与代码的链接
在 layout 的代码中，使用 theme 这一个对象可以访问整个 theme/_config.yml 中的所有配置。而使用对象的访问方法可对其逐层递进， theme.widgets 可以访问到各 widget 的配置。但这时候的 theme.widgets 实际上已经变成了一个可遍历的数组，其形式有点类似于 Python 中的字典。而这些 key 对应的 value 又是一个对象，当你尝试把它输出，会得到 [Object object] 这样的结果。因此，为了访问到单独的 friend 这一层，就得转换两次。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| widgets:
-
type: friends
position: left
friends:
friend1:
url: 'testUrl'
description: 'testDescription'
avatar: 'avatarUrl'
friend2:
url: 'testUrl'
description: 'testDescription'
avatar: 'avatarUrl'
-
|
layout 与页面渲染的链接
要将页面模板与独立页面链接在一起，使 Hexo 在生成页面的时候按照所写模板生成，只需要将模板放到 root/to/theme/path/layout 下。然后新建一个普通页面。在顶部添加 layout: layoutName 一行然后保存。 注意空格！！
照着页面写模板
这一部分，前排感谢 Bhao 大佬的帮助。
参考着大佬的 CSS ，我成功地写出了自适应缩放的页面模板。而两次转换对象访问到每一个 friend 的代码是这样的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <% for (widget in theme.widgets){ %>
<% if (theme.widgets[widget].type == 'friends'){ %>
<% let count = 0; %>
<div class="friendLink-Area">
<% for (nickname in theme.widgets[widget].friends){ %>
<% let friend = theme.widgets[widget].friends[nickname]; %>
<a href="<%= friend.url %>" class="friendLink-square card">
<div class="friendLink-img" style="text-align: left; pointer-events: none;">
<img src="<%= friend.avatar %>">
</div>
<div class="level-item friendLink-nickname" style="margin-bottom: 0px;">
<%= nickname %>
</div>
<div class="friendLink-description">
<%= friend.description %>
</div>
<div class="friendLink-url level-item tag">
<%- get_domain(friend.url) %>
</div>
</a>
<% count++; %>
<% } %>
<% } %>
<% } %>
|
在这段代码的上面接上原本页面的框架代码，在下面接上一个自定义标题的评论区，再加入一点点细节，就形成了 友链页面 这样一个页面。
至于具体显示出来的效果嘛，确定了框架，接下来发挥的就是 CSS 啦。套用一部分原来在 widget 上使用的 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
| .friendLink-card {
height: 97px;
width: 10086px;
}
.friendLink-img {
position: relative;
}
.friendLink-img img {
position: absolute;
top: 6px;
width: 85px;
}
.friendLink-nickname {
margin-top: 6px;
margin-left: 100px;
padding-bottom: 3px;
width: auto;
overflow: hidden;
}
.friendLink-description {
height: 43px;
color: grey;
font-size: 10px;
margin-left: 100px;
overflow: hidden;
text-align: left;
}
.friendLink-url {
text-align: right;
margin-right: 0px;
float: right;
overflow: hidden;
}
|
然后再加上整体版面的一个 area
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .friendLink-Area{
margin-top: 6px;
margin-bottom: 18px;
text-align: center;
}
.friendLink-Area a{
color: #363636;
}
.friendLink-square{
margin-top: 4px !important;
width: 280px;
height: 110px;
display: inline-block;
padding: 0.5em 0.75em;
}
.friendLink-square:hover{
background-color: #f5f5f5;
background: #f5f5f5;
}
|
细节修正
鉴于原本的 widget 在手机端自适应访问的时候会显得很累赘，所以，在模板中加入一段 JS 来在这个页面中将原本的 widget 删除掉。
1
2
3
4
| window.onload = function(){
var widgetFriends = document.getElementById("widgetFriends");
widgetFriends.remove();
}
|
最后，将 CSS 放到 jsDelivr 上，然后在模板中引用，就成功上线了。
