buttfly魔改记录

本文是本人魔改butterfly的记录，作为数据丢失或者出现bug找出问题的关键

基于butterfly 4.11，hexo 7.0 ，npm 10.5.1 ，node 20.10.0 进行修改
请注意版本，以及发布时间进行查看

让我们开始吧

先置

首先我们要先学会如何自定义引入 css 以及 js 文件

在你的博客源目录下的source中建立文件夹css,js，在文件夹中可以存入你的自定义css文件和 js文件

如果你放入你的自定义文件运行了以后发现博客没有变化，那么你并没有引入你的css文件和js文件。

在主题文件夹的_config.yml中的inject引入，如果是css文件则写在head下面，如果是js文件则写在bottom下，这样文件就会在生成静态文件后插入html文件的头/尾部分。

css 文件和js文件引入分为俩种，本地引入和网络cdn引入….本地引入的路径如下，以博客文件夹下的source文件夹为源目录来查找

全站生效

字体、代码字体的修改

字体修改前后对比

代码字体修改前后对比

以下是修改方法，参考至Butterfly 如何优雅的改字体 | Ordis’Blog (imbhj.com)

在你的自定义css文件夹建立一个文件，并且下载好你的字体文件

并且如下输入代码

@font-face {
  font-family: 'font-name';
  font-display: swap;
  src: url('font-src') format("font-format");
}

其中

font-name可自己定义
font-display是当你的指定字体出现问题或没有加载时会切换其他字体以免出现奔溃无法访问现象
font-scr是你的字体文件路径，可以是本地路径，也可以是网络路径
font-format是根据你的字体文件格式来写，具体如下,主要用于浏览器识别，其中woff,woff2是专门针对网页而进行优化的格式

@font-face {
  font-family: 'iconfont';/*声明一个名为iconfont的字体变量*/
  src: url('../font/iconfont.eot');
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../font/iconfont.woff2') format('woff2'),
      url('../font/iconfont.woff') format('woff'),
      url('../font/iconfont.ttf') format('truetype'),
      url('../font/iconfont.svg#iconfont') format('svg');
}

在你的主题文件夹config.yml的inject中引入css文件，完成后在font：的font-family：后写入你在css文件中写的font-name，如此变大功告成了

如果想修改代码的字体，以上的步骤一致，只是在最后一步中修改为 code-font-family写入你的font-name….

找到你想引入的字体cdn链接，在主题文件夹的_config.yml文件内引入

在cdn链接网址中找到font-family属性的值，如下图所示我的字体名为LXGW WenKai Screen

在主题文件夹的_config.yml中找到font:下的font-family填入这个值

在主题配置的font-family中你想要改变的字体后面建议放一个备用字体，以免没有成功加载前面的字体所导致的崩溃或bug

本地引入的方式由于字体文件比较大的原因往往在网页加载的时候相比网络cdn引入下往往会慢上很多，很影响观感
建议使用网络cdn引入

本站使用的字体和博客字体分别为LXGW WenKai / 霞鹜文楷 and monaspace

顶部图随机

留个空

页脚修改

进入主题文件夹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}`

我们把第一行外的代码全部缩进一格并加上这俩句#footer_right和#footer_left,此时我们将footer页脚分为俩个区间，一个左边一个右边

#footer-wrap
  #footer_left
    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}`
  #footer_right