手摸手帶你用Hexo擼部落格(二)之配置主題

big0range發表於2020-12-30
Hexo

原文地址
在上一篇部落格手摸手帶你用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安裝方式中選擇一個

我用的是giteegitee安裝

應用主題

在根目錄下_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. 社交圖示
social:
  fab fa-github: https://gitee.com/li_mei_chao || Gitee(不是Github)
  fas fa-envelope: mailto:957779152@qq.com || Email(郵箱)
  fab fa-npm: https://www.npmjs.com/~li_mei_chao || NPM

效果:效果

  1. 頭像

    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

    效果:效果

  2. 主頁背景大圖

    index_img: https://pic.rmb.bdstatic.com/bjh/e9cacddaab0a63026e7c73ea9957c39c.jpg
    手摸手帶你用Hexo擼部落格(二)之配置主題

  3. 開啟背景動態

    # 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

    效果:

    手摸手帶你用Hexo擼部落格(二)之配置主題

  4. 更多配置
    配置大部分都很簡單, 建議大家參考一下butterfly官方文件, 功能很多, 按照自己的喜好進行配置

新增評論功能會稍微複雜點, 如果大家有需要的話, 我下期再講

相關文章