博客部分插件修改方法

为了避免下次找不到某些功能怎么设置，记录一下搭建以及魔改博客的某些设置记录和使用方法

个人卡片社交图标

在_config.butterfly.yml中设置如下

1
2
3
4
5
social:
  iconfont icon-github: https://github.com/XuMeng313 || Github
  fas fa-envelope: mailto:1635374917@qq.com || Email
  iconfont icon-qq: http://wpa.qq.com/msgrd?v=3&uin=1635374917&site=qq&menu=yes || QQ
  iconfont icon-weixin: https://s2.loli.net/2022/12/06/cSEDBYs9g4fH2ni.png ||微信

更改具体配置到F:\MyBlog\themes\butterfly\source\css\icon.css更改具体图标样式大小颜色等

标题字体样式

在_config.butterfly.yml如下配置

1
2
3
4
blog_title_font: 
  font_link:
  font-family: '字体视界-点点墨体'

或者是在F:\MyBlog\themes\butterfly\source\css\font.css中修改，具体不清楚是哪个起了效果

页面加载动画

在_config.butterfly.yml中有

1
2
3
4
5
6
7
8
9
10
# Loading Animation (加載動畫)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: 
    url(/css/loading_bar.css)

语言

修改站点配置文件_config.yml，默认语言是 en 。
主题支持三种语言：

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)

网页背景特效

在__config.butterfly.yml中修改，分为动态彩带，静态彩带

1
2
3
4
5
6
7
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #設置是否每次點擊都更換彩带
  mobile: false # false 手機端不顯示 true 手機端顯示

个人卡片背景更换

在引入的source/custom.css文件中加入如下代码

1
2
3
4
5
6
7
/* 侧边栏个人信息图片卡片背景 */
#aside-content>.card-widget.card-info {
  background-image: url(https://s2.loli.net/2022/12/06/pQrWnEvd8DgIMmL.png);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}

若是动态渐变色则添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* #aside-content>.card-widget.card-info {
  background-image: url(https://source.fomal.cc/img/樱花.png);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-size: 100%;
}
#aside-content > .card-widget.card-info {
    background: linear-gradient(
      -45deg, 
      #ee0979,
      #4158D0,
      #C850C0,
      #FFCC70,
      #007991
    );
    box-shadow: 0 0 5px rgb(66, 68, 68);
    position: relative;
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite !important;
  }
  @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @-moz-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  body { /*卡片名字和签名本体*/
    /* position: relative;
    min-height: 100%;
    background: var(--global-bg);
    color: #f1ecec;
    font-size: var(--global-font-size);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height: 2;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}  */

网页其他元素更改都可以自己使用F12查看网页元素来修改添加到custom.css文件中即可

和风天气

在https://console.qweather.com/#/apps中设置相关天气样式后生成代码保存到F:\MyBlog\themes\butterfly\source\js\weather.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
WIDGET = {
    "CONFIG": {
      "modules": "01234",
      "background": "5",
      "tmpColor": "F38181",
      "tmpSize": "16",
      "cityColor": "ff6a00",
      "citySize": "16",
      "aqiColor": "95E1D3",
      "aqiSize": "16",
      "weatherIconSize": "24",
      "alertIconSize": "18",
      "padding": "10px 10px 10px 10px",
      "shadow": "1",
      "language": "auto",
      "borderRadius": "10",
      "fixed": "true",
      "vertical": "top",
      "horizontal": "left",
      "left": "150",
      "top": "10",
      "key": "477fc87fb5fe48a0b17539feeb521225"
    }
  }

将其引入到__config.butterfly.yml中

1
2
3
4
5
6
7
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="/css/font.css">
    - <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
    - <script async src="/js/weather.js"></script>
    - <link rel="stylesheet" href="/css/icon.css" media="defer" onload="this.media='all'">

本地搜索系统

  1. 安装依赖，打开任务终端输入

    1
    npm install hexo-generator-search --save

​ 2.修改配置文件_config.yml，添加如下代码:

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

​ 3.在主题配置文件_config.butterfly.yml中修改以下内容

1
2
3
local_search:
-  enable: false
+  enable: true

​

公告栏蔚蓝主题美化

找到F:\MyBlog\themes\butterfly\layout\includes\widget\card_announcement.pug，复制如下代码,注意删去重复代码，优先保留自己原有的那一部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if theme.aside.card_announcement.enable
  .card-widget.card-announcement
    .item-headline
      i.fas.fa-bullhorn.card-announcement-animation
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
  .xpand(style='height:200px;')
    canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople1.js')
script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/zdog.dist.js')
script#rendered-js(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople.js')
style.
 .card-widget.card-announcement {
 margin: 0;
 align-items: center;
 justify-content: center;
 text-align: center;
 }
 canvas {
 display: block;
 margin: 0 auto;
 cursor: move;
 }

来自一位大佬的博客

历史上的今天

安装插件

1
cnpm i hexo-history-calendar --save

在F:\MyBlog_config.yml上添加如下代码
1
2
3
4
5
6
7
8
9
10
11

history_calendar:
  priority: 4 #插件的叠放顺序，数字越大，叠放约靠前。
  enable: true
  enable_page: all  #路由地址，all 代表全局开启。如 / 代表主页
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'

底部徽标

1.在shieds io中生成想要的徽标

2.在F:\MyBlog\themes\butterfly\layout\includes\footer.pug中添加以下代码

1
2
3
4
5
6
7
8
9
10
11
//-以下是后面加的
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`
      if theme.footer.custom_text
      .footer_custom_text!=`${theme.footer.custom_text}`
   
  p#ghbdages //-p和上面if保持相同缩进
    if theme.ghbdage.enable
      each item in theme.ghbdage.bdageitem
        a.github-badge(target='_blank' href=url_for(item.link)  style='margin-inline:5px')
        img(src=url_for(item.shields) title=item.message)

3.在_config.butterfly.yml中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#底部徽标
ghbdage:
  enable: true
  bdageitem:
    - link: https://hexo.io/  # 标签跳转链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #shields的API链接，填法参考本篇教程
      message: 博客框架为Hexo_v5.3.0 #鼠标悬停时显示的信息
    - link: https://demo.jerryc.me/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v3.4.2
    - link: https://metroui.org.ua/index.html
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用JsDelivr为静态资源提供CDN加速
    - link: https://beian.miit.gov.cn/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 滇ICP备-2022007873号
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由Gtihub托管
    - 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国际许可协议进行许可