????之前是用的 Hexo 的方案搭建的 Github.io，Mac 升級(jí)到 10.14 之后，莫名其妙的 Safari 鑰匙串自動(dòng)填充功能就掛了，登錄框得焦點(diǎn)再也不會(huì)自動(dòng)提示你可用的賬戶名稱了，咬著牙么也能用，心病難除，于是就抹盤(pán)重裝了，然后你懂的 Hexo 沒(méi)有備份??。好在我是一個(gè)極其懶惰的人，幾年也沒(méi)寫(xiě)過(guò)多少文字，直接clone下來(lái)rm -rf了重新提交個(gè)空白回去也不心疼。
所以需要有個(gè)模版主題
????人不能掉入同樣的坑兩次，所以這次老老實(shí)實(shí)用 Jekyll 方案了，簡(jiǎn)單好用。簡(jiǎn)單好用的另一面就是真“簡(jiǎn)單”，找來(lái)找去，找到現(xiàn)在用的這個(gè)beautiful-jekyll主題看起來(lái)還不錯(cuò)。
居然正文用的是Serif字體，不能忍啊！
????喬老爺子及其廚子接班人，成功的連續(xù)不斷用 Retina 屏和 PingFang 字體降低著我們眼睛的耐受力，Serif 字體真的不太適應(yīng)了，就想著自己改吧。直接 Google 盡然沒(méi)有任何地方說(shuō)怎么改這個(gè)主題的中文字體的。這事情就麻煩了，只能自力更生了，前端的世界基本不懂，但是起碼知道 Html 和 CSS 文件是干嘛的么，大概文件結(jié)構(gòu)什么情況，該去哪里找東西直這些基本概念還是有的么，咱也不算什么都不知道。
直接說(shuō)結(jié)果
????這套生態(tài)都是用的GoogleFonts，當(dāng)然這個(gè)模版也也是這樣，GoogleFonts上簡(jiǎn)體中文的 Sans Serif 字體有且僅有一個(gè)： Noto Sans SC，沒(méi)得挑沒(méi)得選，費(fèi)力去改到加本地中文字庫(kù)，那就還要有各種瀏覽器適配到問(wèn)題了，沒(méi)這能力，想都不想。折騰好了就趕緊記錄下來(lái)，免得忘了，也方便有同樣需求的“愛(ài)美人士”取用，免得再浪費(fèi)不必要的時(shí)間。過(guò)程就不說(shuō)了，直接上結(jié)果。
????作者的字體方案是：
???? - 標(biāo)題，第一順位字體：Open Sans
???? - 正文，第一順位字體：Lora
???? - 等寬字體，第一順位字體默認(rèn)使用 Bootstrap 選擇的： Menlo
基于個(gè)人喜好，我加了下幾個(gè)字體：
- Noto Sans SC
- Roboto
- Roboto Mono
????Noto Sans SC 第一順位，Roboto 第二順位，Roboto Mono 是等寬字體，用于代碼塊和注釋部分。
要?jiǎng)拥奈募?/h3>
????只需要?jiǎng)尤齻€(gè)文件，分別如下，其中blog是你的博客根目錄，相信你是知道的。
blog/_layouts/base.html
blog/css/main.css
blig/css/bootstrap.min.css
????blog/_layouts/base.html修改部如下，原來(lái)的兩個(gè)默認(rèn)字體我沒(méi)刪，換成了GoogleFonts文檔推薦的寫(xiě)法。
---
common-googlefonts:
- "Lora:400,400i,700,700i"
- "Noto+Sans+SC:300,400,500,700&subset=chinese-simplified"
- "Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
- "Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"
- "Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i"
---
????blog/css/main.css文件改的地方比較多，但是也就是個(gè)替換的事情，比如：
body {
font-family: 'Lora', 'Times New Roman', serif;
......
}
????改成：
body {
font-family: 'Noto Sans SC', 'Roboto', sans-serif;
......
}
????再比如：
h1,h2,h3,h4,h5,h6 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
......
}
????改成：
h1,h2,h3,h4,h5,h6 {
font-family: 'Noto Sans SC', 'Roboto', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
......
}
????考慮到Github還是能正常訪問(wèn)的，后面的默認(rèn)字體還是不要?jiǎng)h除為好，剩下的都和上面這一樣，查找替換就好。等寬字體其實(shí) Menlo 也挺好看的，不改也挺好，要改的話，如下操作：
????打開(kāi)blig/css/bootstrap.min.css查找Menlo,Monaco,Consolas,"Courier New",monospace，定位后，在Menlo前面增加 "Roboto Mono",千萬(wàn)別忘了后面還要有個(gè), 。
BTW
????如果要在首頁(yè)上使用全寬的圖片，可以在 blog/index.html 中按如下格式增加內(nèi)容：
---
layout: page
title: your title
subtitle: Write something...
bigimg:
- "/path-to-imgs/image-namge1.jpeg" : "image description1"
- "/path-to-imgs/image-namge2.jpeg" : "image description2"
- "/path-to-imgs/image-namge3.jpeg" : "image description3"
use-site-title: true
---
????然后就可以實(shí)現(xiàn)通欄圖片的輪循了，同樣的，在blog頁(yè)面頭部同樣寫(xiě)法也可實(shí)現(xiàn)單獨(dú)頁(yè)面的圖片變化。
EOF
