「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

hexo-butterfly-样式修改

前言原文发布

butterfly主题升级，记录基于hexo-butterfly的修改过程，涉及自定义样式、字体、鼠标、徽标等内容

1.自定义样式引入

自定义样式整合构建思路说明

<1>项目根路径\themes\butterfly\source\css\存放自定义css（可自定义分类）

# 项目根路径\themes\butterfly\source\css\
|-- css
		|-- _custom
				|-- xxx.css

<2>项目根路径\themes\butterfly\source\css\index.styl中引入自定义的css文件（为避免样式覆盖，放在最下面进行定义），也可在此引入外链css

// 引入自定义css
@import '_custom/*.css'

// 引入外链
@import 'https://cdn.jsdelivr.net/gh/username/repo/css/xxx.css'

<3>执行：每次执行hexo g指令会将项目中的css文件整合到index.css中（CDN加速：可在主题配置文件中给index.css配置CDN缓存，提升加载速度）

样式调试tip

a.元素隐藏

可通过F12窗口编写元素属性进行调试

#hide_element{
  display: none!important; /* 隐藏div下的所有信息，被隐藏的内容不占用空间 */
  visibility: hidden; /* 元素是否可见:visible可见、hidden不可见、collapse(表格元素中使用则删除一行或者一列,不影响表格布局；若是其他元素中使用则表现为hidden效果) */
  opacity: 0; /* 元素透明度(视觉上隐藏元素，元素本质存在) */
}

b.透明度

background:rgba(255,255,255,0.5)

background 配置页面元素背景变得透明，而不会对这一页面元素下的其他元素 (包括 div、span、p、a 等任何标签) 有任何影响。一般用来对文章内容或页面卡片添加透明度。这样可以保证字体不会变透明

/* 首页文章卡片 */
#recent-posts > .recent-post-item{
    background:rgba(255, 255, 255, 0.9);
}
/* 首页侧栏卡片 */
.card-widget{
  background:rgba(255, 255, 255, 0.9)!important;
}
/* 文章页面正文背景 */
div#post{
  background: rgba(255, 255, 255, 0.9);
}
/* 分页页面 */
div#page{
  background: rgba(255, 255, 255, 0.9);
}
/* 归档页面 */
div#archive{
  background: rgba(255, 255, 255, 0.9);
}
/* 标签页面 */
div#tag{
  background: rgba(255, 255, 255, 0.9);
}
/* 分类页面 */
div#category{
  background: rgba(255, 255, 255, 0.9);
}

opacity 定义的是全局的透明度，会影响添加该属性的页面元素及其下属元素

#footer{
  opacity: 0.5;
}

此处参考akilar大大的一图流方案，设定默认的全局背景图，随后配置css样式构建一图流（头图、页脚全透明）

/* 页脚透明 */
#footer{
  background: transparent!important;
}
/* 页脚黑色透明玻璃效果移除 */
#footer::before{
    background: transparent!important;
  }
/* 头图透明 */
#page-header{
  background: transparent!important;
}
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
#page-header.post-bg:before {
  background-color: transparent!important;
}
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

2.字体样式修改

字体引用参考：谷歌字体库，选择、预览字体，可查看API引用链接和font-family

F12方式调试预览

自定义CSS引入

自定义custom.css配置字体样式，通过@import方式引入

# 配置自定义CSS，针对一些指定样式修改则在页面中选中element配置进行预览，引入方式参考
@import url('https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap');

h1#site-title {
    font-family: 'Zhi Mang Xing', cursive;
}

在index.styl处加载自定义css


@import '_custom/*.css'

	字体引用参考：[第一字体网](http://www.diyiziti.com/List/all/2)、[自由字体](https://ziyouziti.com/)

	下载字体样式文件，将文件存放在`/source`指定字体包下（可自定义分类），随后在自定义css文件中加载字体文件

```css
/* 自定义字体引入 */
@font-face{
    font-family:'SudestadaFont' ;  /* 字体名自定义即可 */
    src:url('/wv-blog/font/Sudestada.ttf'); 
    font-display: swap;
}

/* 站点 title */
h1#site-title {
    font-family:'SudestadaFont' ;
}

3.鼠标样式修改

鼠标指针样式修改：对应板块的curcor属性（.cur静态指针鼠标、.ani动态指针鼠标）

鼠标样式参考：致美化

在自定义css文件中对应元素配置cursor属性引用静态指针鼠标（可采用cdn方式），文件内容可参考下述

/* 全局默认鼠标指针 */
body,
html{
  cursor: url('指定样式cur文件路径'),auto !important;
}
/* 悬停图片时的鼠标指针 */
img{
  cursor: url('指定样式cur文件路径'),auto !important;
}
/* 选择链接标签时的鼠标指针 */
a:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 选中输入框时的鼠标指针 */
input:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停按钮时的鼠标指针 */
button:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停列表标签时的鼠标指针 */
i:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover{
      cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover{
      cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover{
      cursor: url('指定样式cur文件路径'),auto;
}

为了省略下载的文件前缀，可借助utools批量处理工具对下载的cur包进行批量重命名处理（选中要进行重命名操作的文件列表->按鼠标中键点击“重命名”->根据指定规则批量处理）

4.徽章引入

页脚自定义

可以在两处调整页脚内容定义，一种是主题配置文件中_config.butterfly.yml直接配置footer属性，另一种则是修改源码的形式调整footer.pug文件内容

<% tabs 页脚修改 %>

footer:
  owner:
    enable: true
    since:  # 博客年份配置
  custom_text: # 页脚自定义文本 可构建a标签引用

修改themes/butterfly/layout/includes/footer.pug，里面是对页脚的完整定义

#footer-wrap
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `&copy;${nowYear} By ${config.author}`
  if theme.footer.copyright
    .framework-info
      - 框架主题信息
      - span= _p('footer.framework') + ' '
      - a(href='https://hexo.io')= 'Hexo'
      - span.footer-separator |
      - span= _p('footer.theme') + ' '
      - a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`

徽章引入

徽章生成可以通过shield.io生成，选定内容，指定生成规则即可

备案信息图标生成参考

https://img.shields.io/badge/xICP备-xxxxxx--1-yellowgreen