慶祝新居落成！感謝 Hexo！

為了將學習程式語言過程中的難點與心得記錄下來，第一次嘗試使用靜態網頁生成的方式搭建部落格，花了好多時間才終於挑出一個喜歡的主題：Tranquilpeak。

Tranquilpeak 原先似乎是 Hugo 上的主題，再經由有愛人士移植到 Hexo 上。其實仔細比對，會發現兩者還是有那麼一點點點的不一樣（例如側欄的彈出動畫），不過都是些無傷大雅的微小差異，不影響整體功能及美觀。

補充訂正：經過作者本人說明，Hexo 版似乎才是原版，而 Hugo 版才是仿作。

目錄

  1. 為什麼選擇 Tranquilpeak
    1. 響應式網頁設計
    2. 版面整潔 & 功能簡單
    3. 支援中文
  2. 結語
  3. 附錄
  4. 補充：關於 highlight.js

為什麼選擇 Tranquilpeak

在茫茫主題海之中，為什麼要選擇這樣一個連名字都不知道怎麼念的呢？

因為 Tranquilpeak 最符合我的需求：

  • 響應式網頁設計
  • 版面整潔
  • 功能簡單
  • 支援中文

響應式網頁設計

響應式網頁設計（Responsive Web Design）俗稱 RWD。簡單來說就是會視使用者視窗寬度而改變網頁樣式的設計方式，實務上最常見的應用是將網頁分為電腦版與手機版兩種樣式，以自動適應手機的小尺寸窄螢幕。

根據我先前曾經架設過的部落格後台數據，網站的流量有八成以上來自行動裝置，也就是說，在這個機不離身的時代，無法適應手機螢幕的網站已經是半殘的存在，也因此，我將 RWD 排在挑選主題需求的第一順位。

版面整潔 & 功能簡單

許多人推薦的另一個 Hexo 主題是 Icarus，因此我也稍微嘗試了一下，但是 Icarus 的版面真的太亂了，太多不必要的欄位出現在同一個頁面，畫面上過多的資訊讓人疲勞，且難以專注在文章內容上。

補充：後來再次研究後發現，像 Icarus 這樣成熟的主題，通常具備許多配置選項，其中也包含了刪改版面欄位，也許我會考慮在另一個部落格使用它。

我認為版面整潔對於內容導向的網站是一件非常重要的事，以近年新興的部落格平台 Medium 為例，有了乾淨、整齊的版面，不僅減少讀者的視覺負擔，更能讓創作者專心耕耘內容。

支援中文

雖說「是否支援中文」對於有經驗的前端工作者而言影響不大（自訂主題語言難度不高），但是能夠在設定檔裡面用一行 language: zh-tw 解決的事情，果然還是不想親自處理。

結語

以上就是新居落成後的第一篇文章，雖然是硬擠出來的，好歹也是抱著「如果能幫助到為了挑選主題而煩惱的人就好了」的認真心態而寫的，因此內容也不算是太馬虎，希望真的有人會看啦……希望……

附錄

雖說是附錄，其實只是我怕忘記自己對主題做過什麼更動而留下的紀錄，所以不看也沒有關係的呦 😉

/themes/tranquilpeak/source/_css/custom/custom.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
128
129
130
131
132
133
134
135
136
137
sup,
sub,
code {
    // 使行距不會加寬
    line-height: 0;
}

hr {
    margin: 15px 0;
}

.postShorten-content,
.postShorten-excerpt,
.post-content {

    p,
    li {
        // 將文章內容左右對齊
        // text-align: justify;
        // 將內文字型改為 Bootstrap 風格
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    li {
        // 增加清單項目間距
        margin-bottom: 1rem;
    }
}

.post .post-content :not(blockquote):not(li):not(.alert)>p {
    // 將文章頁面內的段落間距由上改至下（與文章列表一致）
    margin: 0 0 25px 0;
}

#header .header-title .header-title-link {
    // 將頁首標題加粗
    font-weight: 600;
}

#header.header-up {
    // 修正頁首縮回後的高度
    transform: translate3d(0, -57px, 0);
}

.header-picture {
    // 讓 header 中的頭像更圓，並加上細邊框
    border-radius: 50rem !important;
    padding: 1px;
    border: 1px #dfe4ec solid;
}

#about-card-picture {
    // 讓 about 中的頭像更圓，並加上細邊框
    border-radius: 50rem !important;
    border: 1px #d1d7e1 solid;
    padding: .2rem;
}

.sidebar-profile-name,
.sidebar-button-icon,
.sidebar-button-desc {
    // 修改側欄內的文字顏色
    color: #ffffff !important;
}

.sidebar-button-link {
    // 調整側欄內連結的左邊距
    padding-left: 4rem !important;
}

blockquote {
    border-left: 3px solid rgba(93, 104, 111, 0.5);
    font-style: normal;
    color: rgba(93, 104, 111, 0.75);
}

.codeblock,
figure.highlight {
    // 程式碼區塊
    border-radius: .5rem;
    margin: 10px 0 25px;

    figcaption {
        // 修改程式碼區塊上的檔名
        font-family: Menlo, Consolas, monospace;
        padding: 0 25px 15px;
        border-bottom: #e6e6e6 solid 1px;
        color: #6c6666;
    }
}

code {
    // 修改行內程式碼樣式
    font-size: .85em !important;
    display: inline !important;
    padding: .35em .6em .1em !important;
    border-radius: 0.3em;
    background-color: #f2f2f2;
}

@media #{$medium-only} {
    .sidebar-button-link {
        // 修正側欄內連結的左邊距
        padding-left: unset !important;
    }
}

@media #{$medium-and-up} {
    #main[data-behavior="2"] {
        // 加大文章列表頁面頂部空白
        padding-top: 50px;
    }

    #about-card-job {
        // 修正「關於我」裡的工作欄邊界
        padding: 0 15px !important;
        // 修正「關於我」裡的工作欄寬度
        width: auto !important;
    }
}

@media #{$small-and-down} {
    .postShorten.postShorten--thumbnailimg-bottom {
        // 調整文章列表的間隔
        margin-top: 0;
        margin-bottom: 15px;
    }

    .post-content {
        // 調整文章內文的上邊界
        margin-top: 15px !important;
    }

    #footer {
        margin-top: 20px;
    }
}
/themes/tranquilpeak/source/_css/tranquilpeak.scss
1
2
3
...
@import
    'custom/custom'
/themes/tranquilpeak/layout/_partial/index.ejs
1
2
3
4
...
// 為了SEO，把文章目錄（ToC）的標題由一級改為二級
tableOfContents = '<h2 id=\"table-of-contents\">' + __('post.toc') + '</h2>';
...
/themes/tranquilpeak/layout/_partial/post.ejs
1
2
3
4
...
// 與上面情況相同，在不同檔案再改一次
tableOfContents = '<h2 id=\"table-of-contents\">' + __('post.toc') + '</h2>';
...

補充：關於 highlight.js

在 Tranquilpeak 裡內建的程式碼標色功能有夠差勁，除了顏色主題不好看，更重要的是有許多該上色的地方沒有標到。為了處理上述問題，我開始在網路上尋找解決方案，最一開始在別人的部落格裡找到了關閉預設的程式碼標色並另外引入獨立的 highlight.js 的方法，但是這麼做的話，會失去 Tranquilpeak 裡的程式碼區塊行數和標題等功能，索性繼續搜尋，最終在 Tranquilpeak 的文檔中找到了最佳解（出問題不先翻翻官方文檔的我是白癡），詳細的步驟都寫在裡面了，也許某天有空，我會另起一篇分享自己挑選和置換新主題的過程。