前言

本博客搭建参考于大佬hexo-theme-Fomalhaut:的开源项目，此文档主要用来自己熟悉hexo搭建和一些基本用法。

目录

hexo 博客搭建

hexo 博客配置

hexo+butterfly 博客主题

hexo+butterfly 主题魔改 ⇦您当前在此位置🪂

hexo 基础语法和外挂标签

hexo 生成文章统计图

hexo 添加百度统计

hexo 使用git将Hexo博客部署到服务器

一图流

点击查看

新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

/* 页脚与头图透明 */  
#footer {  
  background: transparent !important;  
}  
#page-header {  
  background: transparent !important;  
}  
  
/* 白天模式遮罩透明 */  
#footer::before {  
  background: transparent !important;  
}  
#page-header::before {  
  background: transparent !important;  
}  
  
/* 夜间模式遮罩透明 */  
[data-theme="dark"] #footer::before {  
  background: transparent !important;  
}  
[data-theme="dark"] #page-header::before {  
  background: transparent !important;  
}

在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件

1
2
3

inject:  
  head:  
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载

# The banner image of home page  
index_img:   
  
# Footer Background  
footer_bg: false

在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的background配置项设置背景图

1	background: url(https://source.fomal.cc/img/home_bg.webp)

页脚徽标和计时器

点击查看

安装插件,在博客根目录[BlogRoot]下打开终端，运行以下指令：

1	npm install hexo-butterfly-footer-beautify --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

# footer_beautify  
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)  
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)  
footer_beautify:  
  enable:  
    timer: true # 计时器开关  
    bdage: true # 徽标开关  
  priority: 5 #过滤器优先权  
  enable_page: all # 应用页面  
  exclude: #屏蔽页面  
    # - /posts/  
    # - /about/  
  layout: # 挂载容器类型  
    type: id  
    name: footer-wrap  
    index: 0  
  # 计时器部分配置项（看你喜欢哪个，最好下载下来放到自己的项目中不然会增加我网站的负载）  
  # 这是我的    
  # runtime_js: https://www.fomal.cc/static/js/runtime.js  
  # runtime_css: https://www.fomal.cc/static/css/runtime.min.css   
  # 这是店长的   
  runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js  
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css  
  # 徽标部分配置项  
  swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数  
  bdageitem:  
    - link: https://hexo.io/ #徽标指向网站链接  
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API  
      message: 博客框架为Hexo_v6.2.0 #徽标提示语  
    - link: https://butterfly.js.org/  
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender  
      message: 主题版本Butterfly_v4.3.1  
    - link: https://vercel.com/  
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel  
      message: 本站采用多线部署，主线路托管于Vercel  
    - link: https://dashboard.4everland.org/  
    # https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS  
      shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS  
      message: 本站采用多线部署，备用线路托管于4EVERLAND  
    - link: https://github.com/  
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub  
      message: 本站项目由Github托管  
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/  
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris  
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可  
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css  
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js  
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

参数释义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable.timer	true/false	【必选】计时器控制开关
enable.bdage	true/false	【必选】徽标控制开关
enable_page	path	【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填`all`，默认为`all`
exclude	path	【可选】填写想要屏蔽的页面，可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
runtime_js	url	【必选】页脚计时器脚本，可以下载上文填写示例的链接，参照注释和教程：Native JS Timer自行修改。
runtime_css	url	【可选】自定义样式，预留开发者接口，可自行下载。
swiperpara	number	【可选】若非零，则开启轮播功能，此项表示每行最多容纳徽标个数，用来应对徽标过多显得页脚拥挤的问题
bdageitem.link	url	【可选】页脚徽标指向的网站链接
bdageitem.shields	url	【必选】页脚徽标对应的API，API具体写法示例参照教程Add Github Badge
bdageitem.message	text	【可选】页脚徽标悬停时显示的信息
swiper_css	url	【可选】swiper的依赖
swiper_js	url	【可选】swiper的依赖
swiperbdage_init_js	url	【可选】swiper初始化方法

首页分类磁铁

点击查看

注意：hexo6.3可用，7.0会报错!

详见：[教程：hexo-magnet 插件 1.0](https://zfe.space/post/hexo-magnet.html)这个插件主要实现了以下功能：1. 自定义 tags 或 categories 的排列和展示2. 自定义 tags 或 categories 的展示图标，名称3. 自定义排列的行数，默认 2 行**教程：**1. 在博客根目录`[BlogRoot]`下打开终端，运行以下指令：

1	npm i hexo-magnet --save

2. 在网站配置文件`_config.yml`新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应

magnet:  
  enable: true  
  priority: 1  
  enable_page: /  
  type: categories  
  devide: 2  
  display:  
    - name: 教程  
      display_name: 小冰の魔改教程  
      icon: 📚  
    - name: 游戏评测  
      display_name: 小冰の游戏评测  
      icon: 🎮  
    - name: 生活趣闻  
      display_name: 小冰の生活趣闻  
      icon: 🐱‍👓  
    - name: vue  
      display_name: 小冰の编程学习  
      icon: 👩‍💻  
    - name: 学习  
      display_name: 小冰の读书笔记  
      icon: 📒  
    - name: 随想  
      display_name: 小冰の胡思乱想  
      icon: 💡  
  color_setting:  
    text_color: black  
    text_hover_color: white  
    background_color: "#f2f2f2"  
    background_hover_color: "#b30070"  
  layout:  
    type: id  
    name: recent-posts  
    index: 0  
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'  
  plus_style: ""

配置项的含义：

enable
参数：true/false
含义：是否开启插件
enable_page
参数：/
含义：路由地址，如 / 代表主页。/me/ 代表自我介绍页等等
priority
参数：1
含义：插件的叠放顺序，数字越大，叠放约靠前。
type
参数：categories/tags
含义：选择筛选分类还是标签
devide
参数：2
含义：表示分隔的列数，2 表示分为两列展示
display
参数：

1
2
3

- name: 教程 # 这里是tags或者categories的名称  
  display_name: 小冰の魔改教程 # 这里是替换的名称  
  icon: 📚 # 这里是展示的图标

含义：配置项，可自行设置，按照设置的顺序展示
color_setting
参数：

text_color: black # 文字默认颜色  
text_hover_color: white # 文字鼠标悬浮颜色  
background_color: "#f2f2f2" # 文字背景默认颜色  
background_hover_color: "#b30070" # 文字背景悬浮颜色

含义：颜色配置项，可自行设置
layout
参数：type; （class&id）
参数：name;
参数：index；（数字）
含义：如果说 magnet 是一幅画，那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。
最后墙的名字即是 name;

<div name="我是墙" id="recent-posts">  
  <!-- id=>type  recent-posts=>name    -->  
  <div name="我是画框">  
    <div name="我是纸">  
      <!--这里通过js挂载magnet，也就是画画-->  
    </div>  
  </div>  
</div>

emple_html

参数：html 模板字段
含义：包含挂载容器

<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->  
  <div id="catalog_magnet">  <!--挂载容器-->  
    ${temple_html_item}  
  </div>  
</div>

plus_style

  参数：“”    含义：提供可自定义的 style，如加入黑夜模式。

执行 hexo 三连
hexo clean
hexo g
hexo s
我们可以看到黑夜模式看起来特别的别扭，因此还要做一下黑夜模式的颜色适配，在custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：

/* 小冰分类分类磁铁黑夜模式适配 */  
/* 一般状态 */  
[data-theme="dark"] .magnet_link_context {  
  background: #1e1e1e;  
  color: antiquewhite;  
}  
/* 鼠标悬浮状态 */  
[data-theme="dark"] .magnet_link_context:hover {  
  background: #3ecdf1;  
  color: #f2f2f2;  
}

文章置顶

点击查看

详见：Swiper Bar

安装插件,在博客根目录[BlogRoot]下打开终端，运行以下指令：

1	npm install hexo-butterfly-swiper --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

# hexo-butterfly-swiper  
# see https://akilar.top/posts/8e1264d1/  
swiper:  
  enable: true # 开关  
  priority: 5 #过滤器优先权  
  enable_page: all # 应用页面  
  timemode: date #date/updated  
  layout: # 挂载容器类型  
    type: id  
    name: recent-posts  
    index: 0  
  default_descr: 再怎么看我也不知道怎么描述它的啦！  
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖  
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖  
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁  
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

参数释义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
timemode	date/updated	【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
default_descr	text	默认文章描述
swiper_css	url	【可选】自定义的swiper依赖项css链接
swiper_js	url	【可选】自定义的swiper依赖项加js链接
custom_css	url	【可选】适配主题样式补丁
custom_js	url	【可选】swiper初始化方法
使用方法:在文章的`front_matter`中添加`swiper_index`配置项即可

---  
title: 文章标题  
date: 创建日期  
updated: 更新日期  
cover: 文章封面  
description: 文章描述  
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前  
---