(废弃)Butterfly(蝴蝶)主题美化、优化2.3.5

  |  
字数统计: 3k字   |   阅读时长: 14分

Butterfly 2.3.5 优化

本片文章是根据 Buteeryfly 主题 2.3.5 版本修改。Butterfly 主题于 2020-6-16 更新至 3.0.0-RC-1 版本 (此版本为小更新)

2.3.5 版本涉及到修改源码，如果你要升级主题的话，你请看上方其他版本的优化教程。

本文所做的优化是我自己`hexo init`后，去Github上克隆Butterfly主题的稳定版，一步步在原主题基础上修改的 保证了小白根据本片文章一步步操作，能够和我博客一样的效果

如果你不想跟随下文一步步操作的话可以使用我优化好的：https://github.com/lete114/Hexo-themes-Butterfly-Lete

修改头部导航栏

修改前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Main menu navigation
# ---------------
# format: xxx: 連結 || icon
# sub-menu
# xxx || icon:
#   xxx || 連結 || icon
menu:
  Home: / || fa fa-home
  Archives: /archives/ || fa fa-archive
  Tags: /tags/ || fa fa-tags
  Categories: /categories/ || fa fa-folder-open
  Link: /link/ || fa fa-link
  About: /about/ || fa fa-heart
  List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Movie || /movies/ || fa fa-film

image.png

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Main menu navigation
# ---------------
# format: xxx: 連結 || icon
# sub-menu
# xxx || icon:
#   xxx || 連結 || icon
menu:
  首页: / || fa fa-home
  归档: /archives/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-folder-open
  友情链接: /link/ || fa fa-link
  关于: /about/ || fa fa-heart
  菜单||fa fa-list:
    - 音乐 || /music/ || fa fa-music
    - 电影 || /movies/ || fa fa-film

image.png

添加搜索

在Butterfyl主题配置文件_config.yml文件中找到如下内容修改enable:为true

1
2
3
4
5
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

作者Github：https://github.com/wzpan/hexo-generator-search
安装插件npm install hexo-generator-search --save

将搜索配置，添加到配置文件中，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
# ---------------
search:
  path: search.xml
  field: post
  content: true

local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

效果图：

image.png

博客昵称颜色修改

C:\Hexo-Blog\themes\Butterfly\source\css\var.styl找到$light-grey = #EEEEEE

#EEEEEE修改为你喜欢的颜色

Lete乐特的颜色:#80bdab

效果图

image.png

如果你不想修改顶部导航栏颜色，就在C:\Hexo-Blog\themes\Butterfly\source\css\_layout\head.styl底部添加

1
2
3
4
//头部颜色
#page-header a {
  color: #e3fdfd;
}

效果图

image.png

移动端优化

C:\Hexo-Blog\themes\Butterfly\source\css\_third-party\normalize.min.css添加如下css代码：

1
2
3
4
5
6
7
8
/*移动端优化：去除归档、标签、最新文章、公告、、只保留网站统计*/
@media screen and (max-width: 800px) {
    #aside_content
    div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

去除前：

image.png

去除后：

image.png

背景图

横幅背景

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg

效果

image.png

博客背景

1
2
3
4
5
6
# 设置网站背景
# 可设置图片 或者 顔色
# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 顔色 background: '#49B202'
# 留空 显示白色
background: url(https://cdn.jsdelivr.net/gh/lete114/CDN@2.0/Use/Jkx5y6.jpg)

效果

image.png

页脚背景

打开C:\Hexo-Blog\themes\Butterfly\source\css\_layout\footer.styl文件把background: $light-blue注释掉即可

1
2
3
4
5
6
#footer
  position: relative
  //background: $light-blue
  background-attachment: local
  background-position: bottom
  background-size: cover

效果

image.png

页脚自定义

C:\Hexo-Blog\themes\Butterfly\layout\includes\footer.pug

修改前：

1
2
3
4
5
6
7
#footer-wrap
  - var now = new Date()
  - var nowYear = now.getFullYear()
  if theme.since && theme.since != nowYear
    .copyright!= `©${theme.since} - ${nowYear} By ${config.author}`
  else
    .copyright!= `©${nowYear} By ${config.author}`

image.png

修改后：

1
2
3
4
5
6
7
#footer-wrap
  - var now = new Date()
  - var nowYear = now.getFullYear()
  if theme.since && theme.since != nowYear
    .copyright!= `&copy;${theme.since} - ${nowYear} <i style="color:#FF6A6A" class="fa fa-heartbeat"></i>${config.author}`
  else
    .copyright!= `&copy;${nowYear} <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;" class="fa fa-heartbeat"></i> ${config.author}`

image.png

页脚自定义内容
Butterfly主题配置文件_config.yml里找到footer_custom_text

1
footer_custom_text: 我相信我可以，但我一直在路上，所以我有无限的可能！！

效果图：

image.png

创建导航栏页面

关于我

1
hexo new page about

C:\Hexo-Blog\source\about\index.md

1
2
3
4
5
6
7
8
9
10
---
title: 关于我
date: 2020-06-03 17:53:02
type: about
---

# 个人简介
昵称：
性别：
爱好：

分类

1
hexo new page categories

C:\Hexo-Blog\source\categories\index.md

1
2
3
4
5
---
title: 分类
date: 2020-06-03 17:53:02
type: categories
---

友情链接

1
hexo new page link

C:\Hexo-Blog\source\link\index.md

1
2
3
4
5
---
title: 友情链接
date: 2020-06-03 17:53:02
type: link
---

C:\Hexo-Blog\source\目录下新建_data文件夹，文件夹内新建link.yml

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
class:
  class_name: 友情链接
  link_list:
    1:
      name: Lete乐特
      link: https://www.lete114.top/
      avatar: https://www.lete114.top/img/favicon.ico
      descr: 每天进步一点点
    2:
      name: Test
      link: https://www.xxxxxx.com/
      avatar: https://xxxxx/favicon.ico
      descr: Test


class2:
   class_name: 链接无效
   link_list:
     1:
       name: Test
       link: https://yilia.lete114.top/
       avatar: https://www.lete114.top/img/favicon.ico
       descr: Test
     2:
       name: Test
       link: https://yilia.lete114.top/
       avatar: https://www.lete114.top/img/favicon.ico
       descr: Test

效果图

image.png

留言板

1
hexo new page messageboard

C:\Hexo-Blog\source\messageboard\index.md

1
2
3
4
5
6
---
title: messageboard
date: 2020-06-10 10:25:42
type: messageboard
---
# 有什么想和Lete乐特说的吗？？

标签

1
hexo new page tags

C:\Hexo-Blog\source\tags\index.md

1
2
3
4
5
---
title: 标签
date: 2020-06-03 17:53:02
type: tags
---

主题颜色

默认主题颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
####    美化/效果    ####
#--------------------------------

# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!
# ---------------
 theme_color:
   enable: true
   main: "#49B1F5"
   paginator: "#00c4b6"
   button_hover: "#FF7242"
   text_selection: "#00c4b6"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#00c4b6"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"

其他

添加颜色块

C:\Hexo-Blog\themes\Butterfly\source\css\_third-party\normalize.min.css添加，当然你可以加更多颜色，这里我颜色3个色块

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

/*颜色块-黄*/
span#yellow-block {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.1rem;
    background-color: #FFD700;
}

/*颜色块-绿色*/
span#green-block {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.1rem;
    background-color: #5cb85c;
}

/*颜色块-灰色*/
span#gray-block {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.1rem;
    background-color: #4f4f4f;
}

效果图

在Marcdown文件内容使用如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Test
abbrlink: Test
date: 3020-04-15 21:38:33
cover: https://cdn.jsdelivr.net/gh/lete114/CDN/BoBoPic/05.jpg
tags:
    - Test
    - 测试
---

<span id="yellow-block">黄色色块</span>
<span id="green-block">绿色色块</span>
<span id="gray-block">灰色色块</span>

image.png

鼠标样式

C:\Hexo-Blog\themes\Butterfly\source\css\_third-party\normalize.min.css添加如下css代码：

1
2
3
4
5
6
7
8
9
10
/* 鼠标图标 */
body {
    background: rgba(255, 255, 255, .5);
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/Jkll8I.png), auto;
    margin: 0;
}
a:hover{
    text-decoration: none;
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

文章透明

打开C:\Hexo-Blog\themes\Butterfly\source\css\_layout\page.styl找到如下代码

1
2
3
4
5
6
7
8
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
  padding: 50px 40px
  border-radius: 8px
  background: rgba(255,255,255,0.7);
  //background: $card-bg     注释掉这条，添加上面 background: rgba(255,255,255,0.7); 这条即可
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
  transition: all .3s

修改滚动条

打开C:\Hexo-Blog\themes\Butterfly\source\css\_global\var.styl找到如下代码:

1
2
3
4
5
6
7
8
9
*::-webkit-scrollbar
  width: 8px
  height: 8px

*::-webkit-scrollbar-thumb
  background: $light-blue

*::-webkit-scrollbar-track
  background-color: transparent

覆盖掉上面的代码👆

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
/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: #e58a8a;
  background-image: -webkit-linear-gradient(
  45deg,
  rgba(255, 255, 255, 0.4) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255, 255, 255, 0.4) 50%,
  rgba(255, 255, 255, 0.4) 75%,
  transparent 75%,
  transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-moz-selection {
  color: #fff;
  background-color: #e58a8a;
}

修改前

image.png

修改后

image.png

添加樱花特效

把下方的内容添加到Butterfly主题下_config.yml文件的inject:下的bottom:里

1
- <script src="https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/sakura.js"></script>#樱花

效果图:

image.png

添加卖萌标题

把下方的内容添加到Butterfly主题下_config.yml文件的inject:下的bottom:里

1
- <script src="https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/title.js"></script>#樱花

效果图:

image.png

image.png

添加梨花带雨播放器

梨花带雨播放器：官网

播放器有两款样式，这里我选择的是第二种

image.png

复制代码添加到Butterfly主题下_config.yml文件的inject:下的bottom:里

效果图：

image.png

添加Aplayer音乐播放器

Aplayer音乐播放器：官网

打开C:\Hexo-Blog\themes\Butterfly\layout\includes\head.pug

尾部添加include ./third-party/aplayer.pug

C:\Hexo-Blog\themes\Butterfly\layout\includes\third-party文件夹内新建aplayer.pug内容图下：

1
2
3
4
5
6
if theme.aplayer && theme.aplayer.enable
	.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
	each item in theme.aplayer.css
		link(rel='stylesheet', href=item)
	each item in theme.aplayer.js
		script(src=item)

Butterfly主题下_config.yml配置文件里添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
##侧边栏歌单
aplayer:
  enable: true
  js:
    - https://cdn.jsdelivr.net/gh/lete114/CDN/music/APlayer/APlayer.min.js
    - https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
  css:
    - https://cdn.jsdelivr.net/gh/lete114/CDN/music/APlayer/APlayer.min.css
  id: 4968103795  #歌单id
  server: netease #服务商
  type: playlist # 播放菜单
  fixed: 'true' #是否开启吸底模式，详细：https://aplayer.js.org/#/home?id=fixed-mode
  order: random # 音频循环顺序, 可选值: 'list', 'random'
  preload: auto #预加载，可选值: 'none', 'metadata', 'auto'
  listFolded: 'false' #列表默认折叠
  autoplay: true # 自动播放
  volume: 0.1 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效

效果图：

image.png

2020-6-17

添加头部背景视频

提前说明：(其实也不会有人去看这个，不过我下面也提供了解决办法)

image.png

Video属性

属性 值 说明
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

新建C:\Hexo-Blog\themes\Butterfly\source\js\video.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
/**
* Created by Lete on 2020/6/16.
*/
//判断移动端设备
browserRedirect();

function browserRedirect() {
   var sUserAgent = navigator.userAgent.toLowerCase();
   var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
   var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
   var bIsMidp = sUserAgent.match(/midp/i) == "midp";
   var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
   var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
   var bIsAndroid = sUserAgent.match(/android/i) == "android";
   var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
   var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
   if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
       var html = "<video loop autoplay style='height: 100%;width: 100%;object-fit: cover;'><source src='你的视频地址'></source></video>";
       /*添加video*/
       document.getElementById("nav").innerHTML += html;

       /*打字效果*/
       var subtitle = document.getElementById('subtitle')
       var i = 0;

       function typing() {
           var timer = 0;
           var str = '不要等到明天，今天就行动起来！！';
           if (i <= str.length) {
               subtitle.innerHTML = str.slice(0, i++)
               timer = setTimeout(typing, 300)

           } else {
               subtitle.innerHTML = str
               clearTimeout(timer)
           }
       }

       typing()
   }
}

在C:\Hexo-Blog\themes\Butterfly\_config.yml里找到inject:下的bottom:添加

1
- <script src="js/video.js"></script>

当然，你也可以使用gif动态图(这种方法最简单，Lete乐特使用的是视频)

在C:\Hexo-Blog\themes\Butterfly\_config.yml里找到default_top_img:添gif图片

参考Lete乐特：

1
2
# if the banner of page not setting,it will show the top_img
default_top_img: /img/a.gif

效果：

2020-6-19

添加UP酱

在C:\Hexo-Blog\themes\Butterfly\_config.yml里找到inject:下的bottom:引用

1
<script src="https://cdn.jsdelivr.net/gh/lete114/CDN/js/upjiang.js"></script>

效果图

添加公告栏装饰

在C:\Hexo-Blog\themes\Butterfly\_config.yml里找到card_announcement:下的content:后面添加

1
<img src="https://cdn.jsdelivr.net/gh/lete114/CDN/Use/my_bg.gif">

效果图

文章作者: Lete乐特
文章链接: https://yilia.lete114.top/article/Butterfly-config-2.3.5.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特 's Blog ！
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
评论
载入天数...载入时分秒...
本站总访问量次 |

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true