[原文地址](https://blog.limeichao.cn/article/fdc79fa4.html) 在上一篇部落格[手摸手帶你用Hexo擼部落格(一)](https://www.cnblogs.com/big0range/p/14204956.html)中主要介紹了部落格的初步搭建 今天我們繼續講如何在Hexo搭建的部落格中應用主題 ## 官網選擇自己喜歡的主題 點選這裡[Hexo主題](https://hexo.io/themes)進入官網主題頁面 然後選擇自己喜歡的一個 我這裡選擇的是[Butterfly](https://butterfly.js.org/posts/21cfbf15/)主題,也是我目前仍在使用的 ## 安裝 目前有三種安裝方式***Gitee、GitHub、npm*** Gitee安裝 `git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly` Github安裝 `git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly` NPM安裝 `npm i hexo-theme-butterfly` 我個人建議Gitee安裝 速度較快 ***劃重點 劃重點 劃重點*** 在根目錄下clone 在根目錄下clone 在根目錄下clone 重要的事情說三遍 在這裡 右鍵點選 Git bash, 執行git工具 自己從gitee或github安裝方式中選擇一個 我用的是gitee ## 應用主題 在根目錄下`_config.yml`檔案中將theme屬性的值替換為 ***butterfly*** 安裝外掛 如果你沒有 pug 以及 stylus 的渲染器，請下載安裝： `npm install hexo-renderer-pug hexo-renderer-stylus --save` 把主題資料夾中的` _config.yml` 復製到 Hexo 根目錄裡，同時重新命名為` _config.butterfly.yml`。 以後只需要在` _config.butterfly.yml`進行配置就行。 Hexo會自動合併主題中的`_config.yml`和 `_config.butterfly.yml`裡的配置，如果存在同名配置，會使用`_config.butterfly.yml`的配置，其優先度較高。 ***此時的部落格是沒有背景以及頭像等等的, 不要懷疑自己配置錯了, 需要單獨去主題配置檔案 `_config.butterfly.yml`裡配置*** ## 配置主題 在申明一次所有主題相關的配置都在`_config.butterfly.yml`中 推薦大家安裝一款谷歌外掛**即刻圖床 ** 把圖片託管到百度阿里等伺服器上(而且是免費的),不佔用自己部落格專案的體積 先簡單的配置一下 1. 社交圖示 ```yaml social: fab fa-github: https://gitee.com/li_mei_chao || Gitee(不是Github) fas fa-envelope: mailto:[email protected] || Email(郵箱) fab fa-npm: https://www.npmjs.com/~li_mei_chao || NPM ``` 效果: 2. 頭像 ```yaml avatar: img: https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608612723751&di=fd7705efd8b083269714c05170fb556a&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F09%2F20180209120154_oycpr.jpg effect: false ``` 效果: 3. 主頁背景大圖 ```yaml index_img: https://pic.rmb.bdstatic.com/bjh/e9cacddaab0a63026e7c73ea9957c39c.jpg ``` 4. 開啟背景動態 ```yaml # canvas_ribbon (靜止彩帶背景) # See: https://github.com/hustcc/ribbon.js canvas_ribbon: enable: true size: 150 alpha: 0.6 zIndex: -1 click_to_change: false mobile: true # Fluttering Ribbon (動態彩帶) canvas_fluttering_ribbon: enable: true mobile: true # canvas_nest # https://github.com/hustcc/canvas-nest.js canvas_nest: enable: true color: '0,255,0' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) opacity: 1 # the opacity of line (0~1), default: 0.5. zIndex: -1 # z-index property of the background, default: -1. count: 99 # the number of lines, default: 99. mobile: false ``` 效果: 5. 更多配置 配置大部分都很簡單, 建議大家參考一下[butterfly官方文件](https://butterfly.js.org/posts/4aa8abbe/), 功能很多, 按照自己的喜好進行配置 新增評論功能會稍微複雜點, 如果大家有需要的話, 我下