在上一篇博客手摸手带你用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

推荐大家安装一款谷歌插件**即刻图床 ** 把图片托管到百度阿里等服务器上(而且是免费的),不占用自己博客项目的体积

先简单的配置一下

  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

  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

    效果:

  4. 更多配置

    配置大部分都很简单, 建议大家参考一下butterfly官方文档, 功能很多, 按照自己的喜好进行配置

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

手摸手带你用Hexo撸博客(二)之配置主题的更多相关文章

  1. 手摸手带你用Hexo撸博客(一)

    原文地址 手摸手带你用Hexo撸博客(一) 环境搭建 安装 node 狂点下一步 命令行输入此条命令 如果能看到版本号则安装成功 node -v 安装Git (同上) 实在不会的小伙伴百度一下,教程很 ...

  2. 手摸手带你用Hexo撸博客(三)之添加评论系统

    原文地址 注: 笔者采用的是butterfly主题, 主题内置集成评论系统 butterfly主题开启评论 开启评论需要在comments-use中填写你需要的评论. 以Valine为例 commen ...

  3. hexo搭建博客系列(三)美化主题

    文章目录 其他搭建 1. 添加博客图标 2. 鼠标点击特效(二选一) 2.1 红心特效 2.2 爆炸烟花 3. 设置头像 4. 侧边栏社交小图标设置 5. 文章末尾的标签图标修改 6. 访问量统计 7 ...

  4. 【转】手摸手,带你用vue撸后台 系列二(登录权限篇)

    前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常 ...

  5. 【转】手摸手,带你用vue撸后台 系列三(实战篇)

    前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...

  6. 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

    前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...

  7. 【转】手摸手,带你用vue撸后台 系列一

    前言 说好的教程终于来了,第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧,但这里不会教你webpack的基础配置,热更新怎么做,webpack速度优化等等,有需求的请自行google. 目录 ...

  8. 手摸手,带你用Beego撸商城系列一(基础篇)

    完整项目地址: go-shop-b2c 系列文章: 手摸手,带你用 Beego撸商城 系列一(基础篇) 手摸手,带你用 Beego撸商城 系列二(登录篇) 手摸手,带你用 Beego撸商城 系列三(系 ...

  9. 手摸手,带你用Beego撸商城系列二(登录篇)

    完整项目地址: go-shop-b2c 系列文章: 手摸手,带你用 Beego撸商城 系列一(基础篇) 手摸手,带你用 Beego撸商城 系列二(登录篇) 手摸手,带你用 Beego撸商城 系列三(系 ...

随机推荐

  1. 【Linux】Linux 资料大全(100% 纯干货)

    作者:李春港 出处:https://www.cnblogs.com/lcgbk/p/14071875.html 本文章给大家分享一些 Linux 学习资料,包含:社区网站.在线教程.命令大全.在线模拟 ...

  2. Django 的F查询与Q查询,事物

           F查询 Django 提供 F() 来做这样的比较.F() 的实例可以在查询中引用字段,来比较同一个 model 实例中两个不同字段的值 示例1: 查询出卖出数大于库存数的商品 from ...

  3. 如何破解QQ闪照

    1.如何下载 通过公主公众号 "全是软件" 然后输入 294 即可获得下载链接 https://qsrj.lanzous.com/iU4Hddnnmne 目前的闪照破解工具只能破解 ...

  4. Python链式赋值执行顺序及执行方式的证明

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<关于Python链式赋值的赋值顺序问题& ...

  5. 第9.2节 Python的文件打开函数open详解

    一. 引言 在操作一个文件前,大部分情况需要先打开文件,才能进行,在Python中使用内置函数open来打开一个文件.open函数是Python的一个内置函数,io模块 定义的函数open是该内置函数 ...

  6. 爬取网页内容后写入文件报错UnicodeEncodeError: 'gbk' codec can't encode的问题解决方案

    老猿使用如下代码读取网页内容: req = urllib.request.Request(url=url,headers=header) text = urllib.request.urlopen(r ...

  7. PyQt(Python+Qt)学习随笔:QListView的selectionRectVisible属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的selectionRectVisible属性用于控制视图中的选择矩形框是否可见, ...

  8. sqlite 数据库与mysql 数据库使用区别记录

    遇到了就记点儿. 1.sqlite 中,设置外键关联,没啥用.只有mysql 中可用.

  9. Java基础学习之基础概念与环境搭建(1)

    1.Java基础概念 1.1.Java语言的特点 Java语言是简单易学的 Java语言是面向对象(封装.继承和多态) Java语言是平台无关的(一次编译,到处运行) Java语言是可靠的.安全的(异 ...

  10. apidoc学习(接口文档定义取代word)

    apidoc的安装,参考:https://blog.csdn.net/qq_36386771/article/details/82149848 生产文档,需要先编写一个apidoc.json对接口文档 ...