製作 Hexo主題 - 小小 (三) 樣式排版

主題架構完成，網站應該都可以順利運作了，但仍然是只有鋼骨的工地，製作主題就是要讓網頁看起來比較舒服，即便內容乏善可陳，應該也不必做到像馬德法金．維不塞或貝特．馬德法金．維不塞或勒．貝斯特．馬德法金‧維不塞這般極簡，始祖馬德法金．維不塞真的是勇猛的裸奔，完全沒有 CSS檔案。

因為不是排版系的，排版調整時遇到很多問題：中文字型、顏色、對齊方法、字距、行距、行高、頁面寬度……，參考了一些文章，放在這裡當作「我的最愛」吧!

• 簡單做好中文排版
• 三大實用好看的中文字型學
• 中文字體排版四大技巧
• 漢字標準格式
• Justfont - 大眾字型學
• 中文 CSS排版原則指南

CSS檔

建立 ./source/style.css檔案，因為很簡陋，所以就直接寫一般的 CSS，不再經過 Stylus， CSS詳細內容請見檔案，這裡只提出幾個比較重要的部分記錄一下，這樣之後要調整也不會毫無頭緒。

字型選擇

本來想學谢益辉大大，把內文改成看起來比較舒服的思源宋體，但是又覺得為了一個字型還要讓網頁特地去抓網路字型，為了省點事，還是用暈倒死最常見的微軟正黑體以及新細明體就好，其它系統的用戶就使用預設的 serif及 sans-serif，無襯線字用在標題，襯線字用在內文；回頭想想，思源系列的字型真的是蠻好看的，所以還是把 Source Han Serif以及 Source Han Sans寫進去，電腦裡有下載這兩個字型的人就可以看的到了。字型設定如下：

body, a {
font-family: "Source Han Serif", PMingLiU, serif; #襯線字體
}
h1, h2, h3 {
font-family: "Source Han Sans", "Microsoft JhengHei", sans-serif; #無襯線字體
}

因為不想學谢大大(這一系列文章實在是對他表達了滿滿的愛意)用個南方四賤客風格的頭像，就用等寬字型 (monospace)把姓名打出來，感覺 Consolas、 DejaVu Sans還蠻好看的，電腦顯示不了這兩種字型的話就隨便找個等寬字型印出來吧!

.blog_title {
font-family:  Consolas, "DejaVu Sans Mono", monospace;
}

程式碼區塊的英文字型同樣用 Consolas，中文字型用 KaiTi，沒這兩樣的話英文就用等寬字型，中文就隨它去吧!

.code {
font-family: Consolas, 'KaiTi', monospace;
}

頁面區塊配置

幾乎就是照抄 Hugo-Ivy的配置，讓 body區塊置中，寬度設定為 960px，以左:右大約 1:2的比例分成兩個區塊，左邊為 header標題、選單區塊，右邊為 main列表、文章區塊，然後最下面再放一個 footer與 main區塊對齊，另外為了讓 header區塊不要隨頁面捲動移位，在 header及其 container區塊設定位置為：

position: sticky;
top: 0

其它細節

內文每行文字平均對齊：

text-align: justify;
text-justify: auto;

如果程式碼區塊超出設定寬度，自動加上捲軸

overflow: auto;

在文章頁面裡的標籤前面加上#字號：

.tag-list-item::before {
    cont ent: "#";
    }

最後，處理響應式網頁設定，取消 header區塊浮動靠左，刪掉 main區塊上方的頁邊，讓選單回復橫向排列就好了。

• CSS
• Hexo
• Theme