butterfly魔改记录

记录魔改

https://zsyyblog.com/

https://yisous.xyz/

导航栏部分

准备工作

  1. BLOG\themes\butterfly\source\css创建nav-menus.css文件

  2. BLOG\themes\butterfly\source\js创建nav-menus.js文件

导航栏最开始的样子

本地搜索功能

  1. 安装插件
1
npm install hexo-generator-search  --save
  1. 主题配置文件_config.butterfly.yml
1
2
3
4
5
6
# Local search
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

分离搜索栏与菜单栏

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

这里我发现第一段不能改,一改导航栏就会显示不见,可能是因为主题更新后的原因

这里附上我的BLOG\themes\Butterfly\layout\includes\header\nav.pug代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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)
#search-button
a.site-page.social-icon.search
i.fas.fa-search.fa-fw

#toggle-menu
a.site-page
i.fas.fa-bars.fa-fw

导航栏居中

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

注意

这里是在自定义css文件里添加的,不知道的可以看这篇文章

https://b.leonus.cn/2022/custom.html

去掉导航栏项目底下的蓝色长条

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

子菜单横向布局

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

网站标题返回主页动画(鼠标放在上面会出现家的图标)

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

这里要注意你的site name是id标签还是class标签!

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
.site-name::before{
opacity: 0;
background-color: var(--lyx-theme)!important;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
position:absolute;
top:0!important;
right:0!important;
width:100%;
height:100%;
content: "\f015";
box-shadow: 0 0 5px var(--lyx-theme);
font-family: "Font Awesome 6 Free";
text-align: center;
color:white;
line-height:34px;/*如果有溢出或者垂直不居中的现象微调一下这个参数*/
font-size: 18px;/*根据个人喜好*/
}
.site-name:hover::before{
opacity: 1;
scale:1.03;
}
.site-name{
position: relative;
font-size: 24px; /*一定要把字体调大点,否则效果惨不忍睹!*/
}
:root{
--lyx-theme:#49b1f5 /*我的主题色*/
}

顶栏常驻

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

显示标题

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

修改BLOG\themes\Butterfly\layout\includes\header\nav.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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})
#添加下面两句
center(id="name-container")
a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME
#添加结束
......

彩色图标

Hexo中Buttefly主题美化进阶(八) | 偷掉月亮 (moonshuo.cn)

选择图标

可以选择阿里的图标官网,里面有很多好看的图标

iconfont-阿里巴巴矢量图标库

在里面找到需要的图标后,加入购物车

image-20230504195915167

点击右上角的购物车图标,然后点击添加至项目

项目可以自己自建

image-20230504200235018

添加至项目后,会自动跳转到这个页面,如果要彩色的图标的话,还需要点击项目设置,把彩色勾上。

image-20230504200810586 image-20230504200947022

下载图标并移入博客文件夹

然后点击下载至本地

进入文件夹会发现这些文件,然后我们只需要把下面框柱的文件移到\themes\butterfly\source\css下。

image-20230504201547828

为了以后更好的管理,可以在css文件下新建一个font文件夹,专门来存放图标的文件。

image-20230504201937137

添加图标样式

打开主题butterfly的config文件,在里面找到inject标签,添加样式

image-20230504202433223
1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
- <link rel="stylesheet" href="/css/font/iconfont.css">
bottom:
- <script src="xxx"></script>

修改图标

上述都做完后,我们就可以去修改图标了,例如导航栏的图标:

image-20230504202741635

iconfont 后面的名字要与css文件里的名字对应上,否则不生效

image-20230504203011034

图标大小修改

如果图标的大小不合适的话,可以在css文件里进行修改。

image-20230504203730465

效果

导航栏天气

Hexo:Butterfly添加天气组件

一图流背景

Butterfly主题 一图流背景与顶部图修改 | 边缘矩阵

如果不想要底部透明的,可以不修改这个,默认是false

1
2
# Footer Background
footer_bg: false

然后去BLOG\themes\butterfly\source\css\_layout\footer.styl里把这个删掉,就没有那个蓝色背景了。

引入外挂标签

Tag Plugins Plus | Akilarの糖果屋

  1. 安装插件
1
npm install hexo-butterfly-tag-plugins-plus --save

考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差,建议您将其替换hexo-renderer-kramed

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 添加配置文件,以下为写法示例

在主题配置文件_config.butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
enable: true # 开关
priority: 5 #过滤器优先权
issues: false #issues标签依赖注入开关
link:
placeholder: /img/link.png #link_card标签默认的图标图片
CDN:
anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

基于 Butterfly 的外挂标签引入 - 笔记 | 鸟不拉诗 (niaobulashi.com)

  • 外挂标签的使用

生成永久链接

Hexo 中permalink使用 Hexo-abbrlink生成唯一永久文章链接及小优化_lessCoder的博客-CSDN博客

1
permalink: :year/:month/:day/:title/  #这是原有的

缺陷:title本身如果更改,那么原有的链接就将失效,所有的引用就无效了。

!!!abbrlink一旦生成,即使修改title,其内容也不会再更改了,除非将abbrlink字段手动删除,然后hexo会重新根据title自动生成。

宽屏适配

Hexo Butterfly宽屏适配指北 | Ariasakaの小窝 (yisous.xyz)

  • 修改边栏卡片大小
  • 分页适配
  • 友链界面适配

外链权重

hexo-filter-nofollow 会为你的博客中的外链自动添加 rel=”external nofollow noreferrer” 属性,从而 改善你的网站的安全性和 SEO。

1
npm i hexo-filter-nofollow --save

打开hexo的配置文件_config.yml,注意是hexo而不是主题。

1
2
3
4
5
6
7
8
9
nofollow:
enable: true
field: site
#'post' - 仅将nofollow属性添加到帖子内容中的外部链接
#'site' - 将nofollow属性添加到整个网站的外部链接
exclude:
- 'exclude1.com'
- 'exclude2.com'
#排除主机名。指定子域(如果适用)

解决hexo引入图床,手机和web不显示图片的问题

在blog\themes\butterfly\layout\includes目录下有一个head.pug文件,修改该文件的meta信息,会使生成的所有页面都带有该head。在head.pug文件中添加如下内容

1
meta(name="referrer" content="no-referrer")