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'
  • 搜索inject在header中引入
    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)