Butterfly主题优化(一)

顶部加载条

在主题目录下的source找到css目录,在此目录下自定义一个myStyle.css文件
添加如下内容:

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
/*顶部加载进度条*/
.pace {
pointer-events: none;
user-select: none;
z-index: 2;
position: fixed;
margin: auto;
top: 4px;
left: 0;
right: 0;
height: 8px;
border-radius: 8px;
width: 6rem;
background: #eaecf2;
overflow: hidden;
}

.pace-inactive .pace-progress {
opacity: 0;
transition: 0.3s ease-in;
}

.pace.pace-inactive {
opacity: 0;
transition: 0.3s;
top: -8px;
}

.pace .pace-progress {
box-sizing: border-box;
transform: translate3d(0, 0, 0);
position: fixed;
z-index: 2;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: #49b1f5;
background: linear-gradient(
to right,
rgb(18, 194, 233),
rgb(196, 113, 237),
rgb(246, 79, 89)
);
animation: gradient 2s ease infinite;
background-size: 200%;
}

/*顶部加载进度条 居中*/
#nav-right {
flex: 1 1 auto;
justify-content: flex-end;
margin-left: auto;
display: flex;
flex-wrap: nowrap;
}

然后在_config.butterfly.yml下搜索inject
bottom下添加如下js文件:
- <script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js" async></script>

导航栏居中

参考关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)

分离菜单栏和搜索

打开路径..\butterfly\layout\includes\header\nuv.pug直接更换为如下代码:
注意缩进,否则可能无效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//- 搜索与菜单栏分离
nav#nav
span#blog-info
a(href=url_for('/') title=config.title)
if theme.nav.logo
img.site-icon(src=url_for(theme.nav.logo))
if theme.nav.display_title
span.site-name=config.title

#menus
!=partial('includes/header/menu_item', {}, {cache: true})
#nav-right
if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
#search-button
a.site-page.social-icon.search(href="javascript:void(0);")
i.fas.fa-search.fa-fw
#toggle-menu
a.site-page(href="javascript:void(0);")
i.fas.fa-bars.fa-fw

菜单栏居中

在自定义的css文件中添加如下代码:

1
2
3
4
5
6
7
8
/* 设置导航栏居中 */
#nav-right{
flex:1 1 auto;
justify-content: flex-end;
margin-left: auto;
display: flex;
flex-wrap:nowrap;
}

文章双栏布局

  • blog根目录下执行npm i hexo-butterfly-article-double-row --save
  • 找到站点配置文件_config.yml下添加如下代码:
    1
    2
    butterfly_article_double_row:
    enable: true
  • 最后在自定义的css文件添加:
    1
    2
    3
    4
    #pagination {
    width: 100%;
    margin: auto;
    }

文章标题的旋转小风车

  • 主题配置文件中找到beautify,更改如下:
    1
    2
    3
    4
    5
    6
    # Beautify (美化頁面顯示)
    beautify:
    enable: true
    field: post # site/post
    title-prefix-icon: '\f863' # '\f0c1' 旋转小风车样式
    title-prefix-icon-color: # '#F47466'
  • 搜索injectheader中引入
    1
    2
    # 小标题风车样式
    - "<style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite; -ms-animation: avatar_turn_around 1s linear infinite; animation: avatar_turn_around 1s linear infinite; }</style>"

文章信息和相关参数统计

信息显示

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
page: # Home Page
date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: false # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字

相关参数统计

  • blog根目录先执行npm install hexo-wordcount --save
  • 主题配置文件中添加:
    1
    2
    3
    4
    5
    wordcount:
    enable: true
    post_wordcount: true
    min2read: true
    total_wordcount: true

美化Footer

增加建站运行时间和自定义author

  • 去掉底部蓝色背景:打开...themes\butterfly\source\css\_layout\footer.styl,把颜色配置blue那一行注释或删掉

  • ..themes\butterfly\source\js目录下新建footer.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
    // 动态心跳,更改自己的名称
    $(document).ready(function(e){
    $('.copyright').html('©2023 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 左.');
    })

    $(document).ready(function(e){
    show_date_time();
    })

    //本站运行时间,更改自己建立站点的时间
    function show_date_time(){
    $('.framework-info').html('小破站已勉强运行 <span id="span_dt_dt" style="color: #fff;"></span>');
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("5/1/2023 0:0:0");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=Math.floor(e_hrsold);
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=Math.floor((e_hrsold-hrsold)*60);
    seconds=Math.floor((e_minsold-minsold)*60);
    span_dt_dt.innerHTML='<font style=color:#afb4db>'+daysold+'</font> 天 <font style=color:#f391a9>'+hrsold+'</font> 时 <font style=color:#fdb933>'+minsold+'</font> 分 <font style=color:#a3cf62>'+seconds+'</font> 秒';
    }

    同时这个代码需要jquery进行解析,所以需要下载jquery.js文件,打开下面的网站保存命名为jquery.js文件,存放在js文件下
    https://code.jquery.com/jquery-3.6.1.min.js

  • 最后在主题配置文件下引入,jquery.js需放在前面

    1
    2
    3
    bottom: # - <script src="xxxx"></script>
    - <script src="/js/jquery.js"></script>
    - <script src="/js/foot.js"></script>

添加徽标

  • 打开Shields.io可在线生成,基本格式为:

    1
    2
    3
    https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>?logo=<LOGO>
    <!-- 在页面通过img标签进行引用 其他属性通过 ?<NAME>=""添加 -->
    <img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=Hexo">

    LOGO可查看https://simpleicons.org/

  • 打开主题配置文件,找到footer:

    1
    2
    3
    4
    5
    6
    footer:
    owner:
    enable: true
    since: 2023 #建站时间
    custom_text: <p style="margin:10px 0 5px"><a target="_blank" rel="noopener" href="https://hexo.io/" style="margin-inline:5px"><img src="https://img.shields.io/badge/Frame-Hexo-blue?logo=hexo" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?logo=hexo" alt="博客框架 Hexo" data-ll-status="loaded" class="entered loaded"></a><a target="_blank" rel="noopener" href="https://butterfly.js.org/" style="margin-inline:5px"><img src="https://img.shields.io/badge/Theme-Butterfly-gree?logo=bitdefender" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-gree?logo=bitdefender" alt="主题 Butterfly" data-ll-status="loaded" class="entered loaded"></a><a target="_blank" rel="noopener" href="https://github.com/" style="margin-inline:5px"><img src="https://img.shields.io/badge/Source-Github-yellowgreen?logo=github" data-lazy-src="https://img.shields.io/badge/Source-Github-yellowgreen?logo=github" alt="本站托管于 Github" data-ll-status="loaded" class="entered loaded"></a><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA-red?logo=creativecommons" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA-red?logo=creativecommons" alt="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" data-ll-status="loaded" class="entered loaded"></a></p>
    copyright: true # Copyright of theme and framework

    效果如下:

    > 参考: >[https://xmwpro.com/post/623e5e60.html](https://xmwpro.com/post/623e5e60.html) >[https://moonshuo.cn/posts/1481.html](https://moonshuo.cn/posts/1481.html)