博文原地址：The Bloom of Youth | 錦瑟華年
Hexo博客系統(tǒng)的作者來(lái)自臺(tái)灣，因此在這個(gè)系統(tǒng)中也使用了一些不符合大陸實(shí)際情況的服務(wù)丝蹭，除了留言板慢宗、分享按鈕等無(wú)關(guān)大雅的東西之外，直接影響網(wǎng)站打開速度和呈現(xiàn)效果的東西就是來(lái)自Google的字體和JavaScript庫(kù)了奔穿，由于Google在大陸基本處于被阻斷的狀態(tài)镜沽，所以我們有必要對(duì)其中涉及Google服務(wù)的地方進(jìn)行替換。另外贱田，如果使用Windows系統(tǒng)訪問(wèn)淘邻，會(huì)發(fā)現(xiàn)頁(yè)面上的字體默認(rèn)為宋體，丑陋的字體也嚴(yán)重影響了訪客瀏覽的體驗(yàn)湘换，我們也需要對(duì)跨平臺(tái)的字體呈現(xiàn)效果進(jìn)行優(yōu)化。
Hexo的Landscape主題對(duì)Google的引用主要有2個(gè)统阿，第一是使用了在Google上托管的jQuery庫(kù)彩倚，第二是使用了Google的Source Code Pro字體。在Google被封鎖后扶平，大部分網(wǎng)友推薦使用360的CDN帆离，也就是useso.com的庫(kù)，但我經(jīng)過(guò)測(cè)試后發(fā)現(xiàn)360的CDN在國(guó)外的訪問(wèn)速度極慢结澄。網(wǎng)友之所以推薦360的CDN哥谷，是因?yàn)樗梢院?jiǎn)單的直接替換Google的服務(wù)，只需要改一下域名麻献，URL的其余部分都無(wú)需改動(dòng)们妥。而我發(fā)現(xiàn)提供jQuery的國(guó)內(nèi)互聯(lián)網(wǎng)廠商比比皆是，而提供Google Code Pro字體的除了360還沒(méi)有找到勉吻。因此我希望能夠?qū)⑦@兩個(gè)問(wèn)題分別解決监婶，而不是用useso一替換了之。
jQuery庫(kù)的優(yōu)化
國(guó)內(nèi)提供jQuery的互聯(lián)網(wǎng)公司很多齿桃，大家耳熟能詳?shù)幕ヂ?lián)網(wǎng)公司基本都免費(fèi)提供了常用JS庫(kù)的CDN加速服務(wù)惑惶。在我的測(cè)試中，百度的服務(wù)的速度在國(guó)內(nèi)國(guó)外都比較理想短纵，因此這里將jQuery替換成百度的带污。另外，我還希望在百度的服務(wù)暫時(shí)不可用時(shí)香到，能夠以網(wǎng)站上自帶的jQuery作為備份鱼冀。
我們要修改的是themes/landscape/layout/_partial/after-footer.ejs
這個(gè)文件报破，將17行的
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
替換為如下代碼：
<script src="http://apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.3.min.js' type='text/javascript'%3E%3C/script%3E"));
}
// ]]>
</script>
這里不但將Google的jQuery替換成了百度的，隨后還進(jìn)行了一個(gè)判斷雷绢，如果獲取百度的jQuery失敗泛烙，則使用本網(wǎng)站自己的jQuery。為了讓這段代碼有效翘紊，我們要去jQuery官方下載合適版本的jQuery并將其放到themes/landscape/source/js/目錄下蔽氨，我將其命名為jquery-2.0.3.min.js。
還有一點(diǎn)需要特別注意帆疟，那就是jQuery這個(gè)文件在hexo生產(chǎn)博客時(shí)會(huì)被解析鹉究，因此一定要將jQuery文件開頭處的//@ sourceMappingURL=jquery-2.0.3.min.map這一行代碼刪去，否則會(huì)導(dǎo)致博客無(wú)法生成踪宠。
跨平臺(tái)字體優(yōu)化
為了能在各個(gè)平臺(tái)上都顯示令人滿意的字體自赔，我們要修改CSS文件中的字體設(shè)置，列出多個(gè)備選的字體柳琢，操作系統(tǒng)會(huì)依次嘗試绍妨，使用系統(tǒng)中已安裝的字體。我們要修改的是
themes/landscape/source/css/_variables.styl這一文件柬脸，將其中第22行
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
改成如下內(nèi)容：
font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif
其中海維提卡（Helvetica）他去、Arial是英文字體，前者一般存在于蘋果電腦和移動(dòng)設(shè)備上倒堕，后者一般存在于Windows系統(tǒng)中灾测。冬青黑體（Hiragino Sans GB）、思源黑體（Source Han Sans CN）垦巴、文泉驛米黑（WenQuanYi Micro Hei）是中文字體媳搪，冬青黑體從OS X 10.6開始集成在蘋果系統(tǒng)中，文泉驛米黑在Linux的各大發(fā)行版中均較為常見骤宣，而思源黑體是近期Google和Adobe合作推出的一款開源字體秦爆，很多電腦上也安裝了這一字體。這樣一來(lái)憔披，在絕大部分操作系統(tǒng)中就可以顯示美觀的字體了鲜结。
代碼等寬字體優(yōu)化
Hexo默認(rèn)的等寬字體是Google的Source Code Pro，我認(rèn)為為了一個(gè)等寬字體去犧牲網(wǎng)站的訪問(wèn)速度實(shí)在是有點(diǎn)不值得活逆，而且系統(tǒng)中也會(huì)提供一些較為美觀的等寬字體精刷。所以相比于絞盡腦汁去獲取Google的等寬字體，不如棄用這個(gè)在國(guó)內(nèi)殘念的字體蔗候，然后用與之前類似的方法來(lái)列出備選的系統(tǒng)自帶字體怒允。要編輯的文件同樣是themes/landscape/source/css/_variables.styl這一文件，將其中第24行
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
改成如下內(nèi)容：
font-mono = Consolas, Monaco, Menlo, monospace
最后我們要?jiǎng)h除引用Google字體的代碼锈遥，要編輯的文件是themes/landscape/layout/_partial/after-footer.ejs纫事，將其中的下列代碼刪除勘畔。
<link rel="stylesheet" type="text/css">
重新生成博客，一切都和諧了丽惶。
