butterfly魔改记录

摘星2023-05-082023-09-23

记录魔改

https://zsyyblog.com/

https://yisous.xyz/

导航栏部分

准备工作

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

导航栏最开始的样子

本地搜索功能

安装插件

1	npm install hexo-generator-search --save

主题配置文件_config.butterfly.yml：

# 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代码

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

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

.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

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-阿里巴巴矢量图标库

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

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

项目可以自己自建

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

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

然后点击下载至本地

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

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

添加图标样式

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

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

修改图标

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

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

图标大小修改

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

效果

导航栏天气

Hexo：Butterfly添加天气组件

一图流背景

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

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

1 2	# Footer Background footer_bg: false

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

引入外挂标签

Tag Plugins Plus | Akilarの糖果屋

安装插件

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

添加配置文件，以下为写法示例

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

# 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而不是主题。

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

导航栏部分

准备工作

本地搜索功能

分离搜索栏与菜单栏

导航栏居中

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

子菜单横向布局

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

顶栏常驻

显示标题

彩色图标

选择图标

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

添加图标样式

修改图标

图标大小修改

效果

导航栏天气

一图流背景

引入外挂标签

生成永久链接

宽屏适配

外链权重

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

摘星