前言
Hugo 作為一個靜態網頁生成器，有許多的功能是我們想要但卻沒有的。幸好， Hugo 支援自定義 html 與 css ，使得我們能夠在自己的網站上新增想要的功能。以下介紹如何在 Hugo 中新增自定義的夥伴/友好頁面。
添加夥伴/友好卡片
使用卡片形式取代過往使用超連結前往夥伴網站，既好看又實用。
左圖為使用超連結形式，右圖為使用卡片形式。
新增 friend.html 檔案
在網站根目錄的 /layouts/shortcodes/ 路徑下，新增 friend.html 檔案，並填入以下內容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {{ if .IsNamedParams }}
{{- $src := .Get "logo" -}}
{{- $small := .Get "logo_small" | default $src -}}
{{- $large := .Get "logo_large" | default $src -}}
<div class="friend-div">
<a target="_blank" href={{ .Get "url" | safeURL }} title={{ .Get "name" }} >
<img class="lazyload"
src="/svg/loading.min.svg"
data-src={{ $src | safeURL }}
alt={{ .Get "name" }}
data-sizes="auto"
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" />
<span class="friend-name">{{ .Get "name" }}</span>
<span class="friend-info">{{ .Get "word" }}</span>
</a>
</div>
{{ end }}
|
新增 _friend.scss 檔案
在網站根目錄的 /assets/css/_partial/_single/ 路徑下，新增 _friend.scss 檔案，並填入以下內容：
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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| #article-container {
word-wrap: break-word;
overflow-wrap: break-word
}
#article-container a {
color: #49b1f5
}
#article-container a:hover {
text-decoration: underline
}
#article-container img {
margin: 0 auto .8rem
}
.flink#article-container .friend-list-div > .friend-div a .friend-info,
.flink#article-container .friend-list-div > .friend-div a .friend-name {
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap
}
.flink#article-container .friend-list-div {
overflow: auto;
padding: 10px 10px 0;
text-align: center;
}
.flink#article-container .friend-list-div > .friend-div {
position: relative;
float: left;
overflow: hidden;
margin: 15px 7px;
width: calc(100% / 3 - 15px);
height: 90px;
border-radius: 8px;
line-height: 17px;
-webkit-transform: translateZ(0)
}
@media screen and (max-width: 1100px) {
.flink#article-container .friend-list-div > .friend-div {
width: calc(50% - 15px) !important
}
@media screen and (max-width: 600px) {
.flink#article-container .friend-list-div > .friend-div {
width: calc(100% - 15px) !important
}
}
}
.flink#article-container .friend-list-div > .friend-div:hover {
background: rgba(87, 142, 224, 0.15);
}
.flink#article-container .friend-list-div > .friend-div:hover img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
.flink#article-container .friend-list-div > .friend-div:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: var(--text-bg-hover);
content: '';
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
-ms-transition: -ms-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0)
}
.flink#article-container .friend-list-div > .friend-div:hover:before,
.flink#article-container .friend-list-div > .friend-div:focus:before,
.flink#article-container .friend-list-div > .friend-div:active:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.flink#article-container .friend-list-div > .friend-div a {
color: var(--font-color);
text-decoration: none
}
.flink#article-container .friend-list-div > .friend-div a img{
float: left;
margin: 15px 10px;
width: 60px;
height: 60px;
border-radius: 35px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s
}
.flink#article-container .friend-list-div > .friend-div a .friend-name {
display: block;
padding: 16px 10px 0 0;
height: 40px;
font-weight: 700;
font-size: 20px
}
.flink#article-container .friend-list-div > .friend-div a .friend-info {
display: block;
padding: 1px 10px 1px 0;
height: 50px;
font-size: 13px
}
|
在 _single.scss 中引入程式碼
在網站根目錄 /assets/css/_page/ 的路徑內，找到 _single.scss 檔案並填入：
1
| @import "../_partial/_single/friend";
|
使用夥伴/友好卡片
做完以上步驟，我們就可以透過以下 shortcodes 在不同文章中使用夥伴/友好卡片了。
1
2
3
4
5
6
7
8
| <div class="flink" id="article-container">
<div class="friend-list-div" >
{{< friend name="夥伴 1 名稱" url="夥伴 1 網站網址" logo="夥伴 1 網站 logo 網址" word="夥伴 1 描述" >}}
{{< friend name="夥伴 2 名稱" url="夥伴 2 網站網址" logo="夥伴 2 網站 logo 網址" word="夥伴 2 描述" >}}
</div>
</div>
|
提醒
- 記得寫入
shortcodes 時要包含兩個 </div> 。 夥伴 1 網站 logo 網址 可以替換成任意圖片網址，但以 1:1 比例（正方形）為佳。
呈現效果如下。
添加合作夥伴頁面
現在，我們可以新增一個頁面專門存放夥伴/友好卡片。當然，以下操作你也不一定要與我相同，你也可以創造自己風格的頁面。
新增卡片存放頁面
在網站根目錄 /content/ 的路徑內，新增 /friend/ 目錄（子資料夾），並在內新增 index.zh-tw.md 與 index.en.md 網頁 markdown 檔案。
提醒
如果你的網站只有單語言，僅需要新增 index.你的語言代碼.md 即可。如果你的網站支援多語言，請依照自己網站支援的語言新增相對應的 index.你的語言代碼.md 即可。
新增 friend_page.html 檔案
在網站根目錄的 /layouts/shortcodes/ 路徑下，新增 friend_page.html 檔案並填入：
1
2
3
4
5
6
7
8
9
| {{- $language := .Site.Language.Lang -}}
{{- $page := .Site.GetPage "page" (printf "/friend/index.%s.md" $language) -}}
{{- if $page -}}
<div class="friend-content">
{{- $page.Content -}} <!-- 載入對應語言的 friend 頁面內容 -->
</div>
{{- else -}}
<p>Cannot load friend page.</p>
{{- end -}}
|
上述的效果是，如果使用
將可自動從網站根目錄的 /content/friend/ 路徑下自動選擇語言並顯示對應的合作夥伴頁面。
結語
其實我對於 Hugo 的 shortcode 並不是很了解，但也許因為我熟悉其他的程式語言，在本次的實作上遇到 bug 都能解決。網站美化考驗每位網站經營者的動手能力，能打造好看又實用的功能真的使人充滿成就感。
運行環境
- Hugo 0.144.2
- LoveIt 主題（2025 年 2 月 21 日 Github 上的版本）
參考資料
授權
以上文章部分內容經參考資料中原作者 Stilig 同意並授權重製、改編與轉發，其餘內容均為原創。
以上文章部分內容經參考資料中原作者 Stilig 同意並授權重製、改編與轉發。授權圖片。
