手摸手带你用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

重要的事情说三遍

在这里手摸手带你用Hexo撸博客(二)之配置主题

右键点击 Git bash, 运行git工具

自己从gitee或github安装方式中选择一个

我用的是gitee手摸手带你用Hexo撸博客(二)之配置主题

应用主题

在根目录下_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

效果:手摸手带你用Hexo撸博客(二)之配置主题

  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
    
    

    效果:手摸手带你用Hexo撸博客(二)之配置主题

  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官方文档, 功能很多, 按照自己的喜好进行配置

添加评论功能会稍微复杂点, 如果大家有需要的话, 我下期再讲

发表评论

评论已关闭。

相关文章