如何使hexo顯得自己更有逼格（三）——自定義與優化
阿新 • • 發佈：2018-12-18
部落格地址: 黑境
優化策略
考慮到站點的穩定性和載入速度等，可以使用延遲載入圖片等方式提高響應速度。hexo還提供了一個最小化靜態檔案的外掛hexo-all-minifier可以壓縮html、css、js和影象檔案，刪除檔案中多餘的換行等。通過在站點配置檔案中加入以下配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
html_minifier:
enable: true
exclude:
css_minifier:
enable: true
exclude:
- '*.min.css'
js_minifier:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false
|
然後安裝外掛（通過在package.json中加入"hexo-all-minifier": "^0.0.14"依賴項）即可實現壓縮靜態內容。
自定義方法
以next主題為例，可以直接修改.swig檔案修改對應頁面，通過修改page.swig檔案可以更改頁面的主體內容模板，通過page.type欄位可以進行頁面型別的定義和判斷。可以自定義新的type加入判斷即可。自定義新的.swig檔案，通過
1 |
{% include xxx %}
|
引入。css和js檔案可以在next/layout/_partials/custom_head.swig
next/source/css/_custom/custom.styl中新增。
側邊欄的連結圖示可以在next/layout/_macro/sidebar.swig中修改，fontawesome對於國內平臺的支援不是很全面，可以使用阿里巴巴向量相簿新增更多圖示。在檔案中找到如下內容：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="links-of-author motion-element">
{% if theme.social %}
{% for name, link in theme.social %}
<span class="links-of-author-item">
<a href="{{ link }}" target="_blank" title="{{ name }}">
{% if theme.social_icons.enable %}
//這裡是修改的結果：
<svg class="icon-symbol" aria-hidden="true">
<use xlink:href="#icon-{{theme.social_icons[name] | default('link') | lower}}"></use>
</svg>
//以上
{% endif %}
{{ name }}
</a>
</span>
{% endfor %}
{% endif %}
</div>
|
然後在custom.styl中加入.icon-symbol的樣式表：
1 2 3 4 5 6 |
.icon-symbol {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
|
隨後在登入阿里巴巴向量相簿建立應用，並引入相簿，獲取到產生svg影象的js程式碼，並引入next/layout/_partials/custom_head.swig ，即可使用與原生fontawesome圖示類似的方式定義圖示。