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

Butterfly 2.3.5 优化

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

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

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

修改头部导航栏

修改前


# 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

修改后


# 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

添加搜索

在Butterfyl主题配置文件_config.yml文件中找到如下内容修改enable:为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

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

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

# 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

效果图：

博客昵称颜色修改

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

#EEEEEE修改为你喜欢的颜色

Lete乐特的颜色:#80bdab

效果图

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

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

效果图

移动端优化

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

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

去除前：

去除后：

背景图

横幅背景

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

效果

博客背景

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

效果

页脚背景

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

#footer
  position: relative
  //background: $light-blue
  background-attachment: local
  background-position: bottom
  background-size: cover

效果

页脚自定义

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

修改前：

#footer-wrap
  - var now = new Date()
  - var nowYear = now.getFullYear()
  if theme.since && theme.since != nowYear
    .copyright!= `&copy;${theme.since} - ${nowYear} By ${config.author}`
  else
    .copyright!= `&copy;${nowYear} By ${config.author}`

修改后：

#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}`

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

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

效果图：

创建导航栏页面

关于我

1	hexo new page about

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

---
title: 关于我
date: 2020-06-03 17:53:02
type: about
---

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

分类

1	hexo new page categories

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

---
title: 分类
date: 2020-06-03 17:53:02
type: categories
---

友情链接

1	hexo new page link

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

---
title: 友情链接
date: 2020-06-03 17:53:02
type: link
---

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

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

效果图

留言板

1	hexo new page messageboard

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

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

主题颜色

默认主题颜色

####    美化/效果    ####
#--------------------------------

# 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个色块


/*颜色块-黄*/
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文件内容使用如下：

---
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>

鼠标样式

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

/* 鼠标图标 */
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找到如下代码

.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找到如下代码:

*::-webkit-scrollbar
  width: 8px
  height: 8px

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

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

覆盖掉上面的代码👆

/* 滚动条 */
::-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;
}

修改前

修改后

添加樱花特效

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

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

效果图:

添加卖萌标题

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

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

效果图:

添加梨花带雨播放器

梨花带雨播放器：官网

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

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

效果图：

添加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内容图下：

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配置文件里添加

##侧边栏歌单
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 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效

效果图：

2020-6-17

添加头部背景视频

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

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填入以下内容

/**
* 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