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