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