选择自己喜欢的进行配置就好，不用按顺序进行修改，以防万一养成备份的习惯哦

自定义F12控制台样式

点击查看教程

参考地址：Fomalhaut🥝

效果预览

键盘F12

新建js文件

在路径[BlogRoot]\source\js\console.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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
var now1 = new Date();

function createtime1() {
    var grt = new Date("04/01/2023 00:00:00"); //此处修改你的建站时间或者网站上线时间
    now1.setTime(now1.getTime() + 250);
    var days = (now1 - grt) / 1000 / 60 / 60 / 24;
    var dnum = Math.floor(days);

    var ascll = [
        `欢迎来到YoouPi の 博客!`, //修改博客名称
        `愿你生活甜甜，好运连连。`,
        `
        _____.___.                  __________.__ 
        \\__  |   | ____   ____  __ _\\______   \\__|
         /   |   |/  _ \\ /  _ \\|  |  \\     ___/  |
         \\____   (  <_> |  <_> )  |  /    |   |  |
         / ______|\\____/ \\____/|____/|____|   |__|
         \\/                                                                                 
`,
        "小站破站已运行",
        dnum,
        "天啦!",
        "©2023 By Fomalhaut",
    ];

    setTimeout(
        console.log.bind(
            console,
            `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`,
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            ""
        )
    );
}

createtime1();

function createtime2() {
    var ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为「大聪明」`, `Photo captured: `, ` 🤪 `];

    setTimeout(
        console.log.bind(
            console,
            `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}`,
            "color:white; background-color:#10bcc0",
            "",
            "",
            'background:url("https://www.yooupi.site/img/top-img/gif/Capoo.gif") no-repeat;font-size:450%'
        )
    );

    setTimeout(console.log.bind(console, "%c WELCOME %c 欢迎光临，大聪明", "color:white; background-color:#23c682", ""));

    setTimeout(
        console.warn.bind(
            console,
            "%c ⚡ Powered by YoouPi %c 你正在访问YoouPi の 博客", //修改博客名称
            "color:white; background-color:#f0ad4e",
            ""
        )
    );

    setTimeout(console.log.bind(console, "%c W23-12 %c 系统监测到你已打开控制台", "color:white; background-color:#4f90d9", ""));
    setTimeout(
        console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中", "color:white; background-color:#d9534f", "")
    );
}
createtime2();

// 重写console方法
console.log = function () { };
console.error = function () { };
console.warn = function () { };

自定义控制台图像显示

访问网站找自己喜欢的样式替换

配置文件引入js

在主题配置文件[BlogRoot]\_config.butterfly.yml中引入该js文件

1
2
3
inject: 
  bottom:
    - <script async src="/js/console.js"></script> # 控制台美化

最后三连

执行三连即可看到效果

1
hexo cl,hexo g,hexo s

显示网页阅读进度

点击查看教程

效果预览

点击预览

修改文件

修改文件[BlogRoot]\themes\butterfly\layout\includes\rightside.pug，在最下面插入如下两行代码

记得把加号删除


1
2
3
    button#go-up(type="button" title=_p("rightside.back_to_top"))
      i.fas.fa-arrow-up
+      span#percent 0

新建js和css文件

新建文件[BlogRoot]\source\js\readPercent.js，在自定义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
25
26
27
28
29
30
31
32
window.onscroll = percent;

// 页面百分比
function percent() {
    let scrollTop = document.documentElement.scrollTop || window.pageYOffset,
        scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight),
        clientHeight = document.documentElement.clientHeight,
        scrollableHeight = scrollHeight - clientHeight,
        result = Math.round((scrollTop / scrollableHeight) * 100),
        goUpButton = document.querySelector("#go-up");

    // 只在阅读文章时显示进度条百分比
    if (document.querySelector('.post')) {
        if (result <= 95) {
            goUpButton.childNodes[0].style.display = 'none';
            goUpButton.childNodes[1].style.display = 'block';
            goUpButton.childNodes[1].innerHTML = `${result}<span>%</span>`;
        } else {
            goUpButton.childNodes[1].style.display = 'none';
            goUpButton.childNodes[0].style.display = 'block';
        }
    } else {
        goUpButton.childNodes[1].style.display = 'none';
        goUpButton.childNodes[0].style.display = 'block';
    }

    // 在文章底部显示进度条
    let progressBar = document.getElementById('reading-progress-bottom');
    if (progressBar) {
        progressBar.style.width = `${result}%`;
    }
}

创建css文件[BlogRoot]\source\css\readPercent.css写入如下代码：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 返回顶部显示网页阅读进度 start */
/* 返回顶部 */
button#go-up #percent {
    display: none;
    font-weight: bold;
    font-size: 15px !important;
  }
  button#go-up span {
    font-size: 12px!important;
    margin-right: -1px;
  }
  /* 鼠标滑动到按钮上时显示返回顶部图标 */
  button#go-up:hover i {
    display: block !important;
  }
  button#go-up:hover #percent {
    display: none !important;
  }
  /* 返回顶部显示网页阅读进度 end */

修改配置文件

在主题配置文件[BlogRoot]\_config.butterfly.yml中引入


1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="/css/readPercent.css"> #返回顶部和进度条
  bottom:
    - <script defer data-pjax src="/js/readPercent.js"></script> #返回顶部和进度条

最后三连

执行三连即可看到效果


1
hexo cl,hexo g,hexo s

直达底部

点击查看教程

效果预览

偷个懒，直接看右下角

配置文件引入js

在主题配置文件[BlogRoot]\_config.butterfly.yml中引入该js文件

1
2
3
inject:
  bottom:
   - <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

修改配置文件

路径：themes\butterfly\layout\includes\rightside.pug

最下面添加代码 记得删除加号

1
2
3
4
5
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up

+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
+  i.fas.fa-arrow-down

我的配置 
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
- const { readmode, translate, darkmode, aside, chat_btn } = theme
mixin rightsideItem(array)
  each item in array
    case item
      when 'readmode'
        if is_post() && readmode
          button#readmode(type="button" title=_p('rightside.readmode_title'))
            i.fas.fa-book-open
      when 'translate'
        if translate.enable
          button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
      when 'darkmode'
        if darkmode.enable && darkmode.button
          button#darkmode(type="button" title=_p('rightside.night_mode_title'))
            i.fas.fa-adjust
      when 'hideAside'
        if aside.enable && aside.button && page.aside !== false
          button#hide-aside-btn(type="button" title=_p('rightside.aside'))
            i.fas.fa-arrows-alt-h
      when 'toc'
        if showToc
          button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
            i.fas.fa-list-ul
      when 'chat'
        if chat_btn
          button#chat_btn(type="button" title=_p("rightside.chat"))
            i.fas.fa-sms
      when 'comment'
        if commentsJsLoad
          a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
            i.fas.fa-comments

#rightside
  - const { enable, hide, show } = theme.rightside_item_order
  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']

  
  #rightside-config-hide
    if hideArray
      +rightsideItem(hideArray)
  #rightside-config-show
    if enable
      if hide
        button#rightside_config(type="button" title=_p("rightside.setting"))
          i.fas.fa-cog.fa-spin
    else
      if is_post()
        if (readmode || translate.enable || (darkmode.enable && darkmode.button))
          button#rightside_config(type="button" title=_p("rightside.setting"))
            i.fas.fa-cog.fa-spin
      else if translate.enable || (darkmode.enable && darkmode.button)
        button#rightside_config(type="button" title=_p("rightside.setting"))
          i.fas.fa-cog.fa-spin

    if showArray
      +rightsideItem(showArray)

    button#go-up(type="button" title=_p("rightside.back_to_top"))
      i.fas.fa-arrow-up
      span#percent 0

    button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
      i.fas.fa-arrow-down

最后三连

1
hexo cl,hexo g,hexo s

Hexo异步加载方案

点击查看教程

参考店长教程

置顶轮播文章

点击查看教程

[参考店长教程](https://akilar.top/posts/8e1264d1/

效果预览

点击预览

imag

安装插件

在博客根目录[Blogroot]下打开终端，运行以下指令：


1
npm install hexo-butterfly-swiper --save

添加配置信息

在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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初始化方法

使用方法

在文章的头部中添加swiper_index配置项即可。


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

最后三连

1
hexo cl,hexo g,hexo s

自定义隐藏文章不在首页显示

点击查看教程

修改配置文件

路径为[BlogRoot]/themes/butterfly/layout/includes/mixins/post-ui.pug

注意，主要添加if article.hide !== true这一行，然后这一行

下面的每一行全部需要按下tab缩进一层。

下面的每一行全部需要按下tab缩进一层。

下面的每一行全部需要按下tab缩进一层。

1
2
3
4
mixin postUI(posts)
  each article , index in page.posts.data
+    if article.hide !== true
      .recent-post-item

修改文章

在要隐藏的md文件的头部信息中添加hide: true

1
2
3
4
5
6
7
---
title: Butterfly如何隐藏部分文章不在首页显示
author: 666Heo
top: false
hide: true
...
---

最后三连

1
hexo cl,hexo g,hexo s

可看到效果，其实细心的还是可以通过标签找到隐藏的文件

导航栏居中

点击查看教程

参考：buterfly博客导航栏居中

找了很多导航栏居中的，终于找到一个靠谱点的，一个css文件直接实现，不知道为啥感觉不修改之前还好看点🤣

效果预览

点击看图

效果对比：

image-20240811002351854

添加css文件

在路径 [Blogroot]\themes\butterfly\source\cs\navigation.css代码如下


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

#nav .menus_items .menus_item:hover .menus_item_child{
  display: flex;
}

/* 这里的2是代表导航栏的第二个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
    left: -65px;
}

修改配置文件

[Blogroot]\_config.butterfly.yml 找到 inject,引入 css:


1
2
3
inject:
  head:
  - <link rel="stylesheet" href="/css/navigation.css"> # 导航栏居中

最后三连

1
hexo cl,hexo g,hexo s

如果只是为了单纯实现居中那么css代码只需要这一段就行了


1
2
3
4
5
6
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

标签添加文章数上标

点击查看教程

效果预览

点击预览

貌似只在标签页才显示：

1723442707193

修改js文件

修改[blog]\themes\butterfly\scripts\helpers\page.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
25
26
27
28
29
30
31
32
33
hexo.extend.helper.register('cloudTags', function (options = {}) {
  const theme = hexo.theme.config
  const env = this
  let source = options.source
  const minfontsize = options.minfontsize
  const maxfontsize = options.maxfontsize
  const limit = options.limit
  const unit = options.unit || 'px'

  let result = ''
  if (limit > 0) {
    source = source.limit(limit)
  }

  const sizes = []
  source.sort('length').forEach(tag => {
    const { length } = tag
    if (sizes.includes(length)) return
    sizes.push(length)
  })

  const length = sizes.length - 1
  source.forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
    style += ` color: ${color}`
-   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
  })
  return result
})

修改配置文件

[Blogroot]\_config.butterfly.yml 找到 card_tags的color参数设置为true开启彩色标签


1
2
3
4
5
6
7
card_tags:
  enable: true
  limit: 40 # if set 0 will show all 
  color: true # 彩色侧边栏标签 true开启 false关闭
  orderby: random # Order of tags, random/name/length
  order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
  sort_order: # Don't modify the setting unless you know how it works

最后三连

1
hexo cl,hexo g,hexo s

添加波浪效果

点击查看教程

参考地址：满心记

效果预览

点击预览

image-20240812193230445

修改index.pug文件

修改themes/butterfly/layout/includes/header/index.pug 大概第 38 行左右 注意缩进


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if top_img !== false
  if is_post()
    include ./post-info.pug
+   section.main-hero-waves-area.waves-area
+     svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+       defs
+         path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+       g.parallax
+         use(href='#gentle-wave', x='48', y='0')
+         use(href='#gentle-wave', x='48', y='3')
+         use(href='#gentle-wave', x='48', y='5')
+         use(href='#gentle-wave', x='48', y='7')
    #post-top-cover
      img#post-top-bg(class='nolazyload' src=bg_img)
  else if is_home()
    #site-info
      h1#site-title=site_title
      if theme.subtitle.enable

这是我自用 33-45行是修改位置

点击查看 
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
if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || theme.default_top_img
  else if is_page()
    - var top_img = page.top_img || theme.default_top_img
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
  else if is_archive()
    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
  else
    - var top_img = page.top_img || theme.default_top_img

  if top_img !== false
    - var imgSource = top_img && isImgOrUrl(top_img) ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
    - var bg_img = top_img ? imgSource : ''
    - var site_title = page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'
else
  - var top_img = false
  - var isHomeClass = 'not-top-img'

- const isFixedClass = theme.nav.fixed ? ' fixed' : ''

header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
      section.main-hero-waves-area.waves-area
        svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
          defs
            path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
          g.parallax
            use(href='#gentle-wave', x='48', y='0')
            use(href='#gentle-wave', x='48', y='3')
            use(href='#gentle-wave', x='48', y='5')
            use(href='#gentle-wave', x='48', y='7')
      #post-top-cover
        img#post-top-bg(class='nolazyload' src=bg_img)
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=fragment_cache('social', function(){return partial('includes/header/social')})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title

修改配置文件

然后在_config.butterfly.yml的 [inject.head] 或者自定义css中 引入以下css，需要注意的是 css中fill属性可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪


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
66
67
68
69
70
71
72
73
74
/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

最后三连

1
hexo cl,hexo g,hexo s