之前 blog 上的友情链接板块一直依靠于一个简单的 widget 实现,一开始甚至是一个完全不能容纳任何细节的列表式清单。后来照着其他 widget 的写法,稍微修改了一下 layout 实现了简洁的详细信息展示,但是 BUG 也随之而来。在不同缩放比例下,内容会溢出容器,显得极不协调。再者,单独的 widget 始终不是长久之计,于是折腾了一个页面。

初期探索

Icarus 这个主题使用 ejs 来生成页面,因此,我大致整理了一些细节。

几种标签的意义
  • <% ‘脚本’ 标签,用于流程控制,无输出。

  • <%_ 删除其前面的空格符

  • <%= 输出数据到模板(输出是转义 HTML 标签)

  • <%- 输出非转义的数据到模板

  • <%# 注释标签,不执行、不输出内容

  • <%% 输出字符串 ‘<%’

  • %> 一般结束标签

  • -%> 删除紧随其后的换行符

  • _%> 将结束标签后面的空格符删除

_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 上,然后在模板中引用,就成功上线了。