原文地址
在上一篇博客手摸手帶你用Hexo擼博客(一)中主要介紹了博客的初步搭建
今天我們繼續講如何在Hexo搭建的博客中應用主題
官網選擇自己喜歡的主題
點擊這里Hexo主題進入官網主題頁面
然后選擇自己喜歡的一個
我這里選擇的是Butterfly主題,也是我目前仍在使用的
安裝
目前有三種安裝方式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中
推薦大家安裝一款谷歌插件**即刻圖床 ** 把圖片托管到百度阿里等服務器上(而且是免費的),不占用自己博客專案的體積
先簡單的配置一下
- 社交圖示
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
效果:
-
頭像
avatar: img: https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608612723751&di=fd7705efd8b083269714c05170fb556a&imgtype=0&src=https://www.cnblogs.com/big0range/p/http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F09%2F20180209120154_oycpr.jpg effect: false效果:
-
主頁背景大圖
index_img: https://pic.rmb.bdstatic.com/bjh/e9cacddaab0a63026e7c73ea9957c39c.jpg
-
開啟背景動態
# 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效果:
-
更多配置
配置大部分都很簡單, 建議大家參考一下butterfly官方檔案, 功能很多, 按照自己的喜好進行配置
添加評論功能會稍微復雜點, 如果大家有需要的話, 我下期再講
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/242736.html
標籤：其他
上一篇：好用的個人專案管理軟體，從作業到生活，兩個模式，一款軟體
下一篇：AES密文與明文長度的關系