没错,这次又整活了,起因是看到了一个漂亮的换肤效果,然后应用到自己的博客上,结果发现单纯的js不太好控制原有的换肤控制效果,所以又开始做插件,结果做着做着就…不如整个控制中心,功能更多,于是 hexo-butterfly-navctrl 应运而生。

hexo-butterfly-navctrl 是基于 hexo-theme-butterfly 主题的扩展插件,主要功能是提供导航栏的快捷控制。

效果展示

动图太大,加载不易,如果你想体验效果,也可直接点击导航栏右侧的 显示模式切 换按钮
image

安装

1
npm i hexo-butterfly-navctrl --save

升级

1
npm update hexo-butterfly-navctrl --save

使用

_config.butterfly.yml 里找到 darkmode,开启暗黑模式,关闭黑暗模式的按钮

1
2
3
4
# dark mode
darkmode:
enable: true # 设置为true
button: false # 设置为false

将以下配置添加到 _config.butterfly.yml_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
navctrl:
enable: true # 开关
priority: 10 # 过滤器优先权 默认10,值越低过滤器越早执行
layout: # 挂载容器类型
type: id
name: nav # 容器名称
index: 1 # 如果是class,取第几个
menu: # 如果不想要哪个菜单,注释掉即可
display: '' # 默认文字+图标; txt 仅文字; icon 仅图标
dark: '显示模式 || fas fa-adjust'
random: '随便逛逛 || fas fa-paper-plane'
link: # 添加链接,支持多个
# - '我的博客 || fas fa-blog || https://weizwz.com/'
# - '关注我 || fas fa-brands fa-github || https://github.com/weizwz'

重启后生效

内置方法

hexo-butterfly-recommend 类似,也公开了部分方法,可以在你的js里引用。前提是注意它的加载时机,配置里 priority 数值的设置可以更小点。

1
2
3
4
// 跳转指定文章  href为文章链接,譬如 window.navctrl.toPost('posts/7db60965.html')
window.navctrl.toPost(href)
// 跳转随机文章
window.navctrl.toRandomPost()

其他问题

1. 图标

参考 hexo-butterfly-recommend使用说明 里的 图标问题,都是一样的

2. 样式问题

如果有样式兼容问题,您可以自行引入 css 文件,强行覆盖即可。

3. 黑暗切换动画的原理

效果查看 https://weizwz.com/fun-animation/page/funDark.html
打开后右键 查看页面源代码,主要是动态设置css全局变量,然后利用动画以及 clip-path 属性。

4. 其余问题

请到 hexo-butterfly-navctrl 上提 issues

更新日志

1.0.3

  • 修复过滤器未生效
  • 修复文章随机跳转的问题

1.0.2

有bug,撤销处理

1.0.1

  • 新增支持自定义链接功能 link
  • 新增只显示图标还是文字的选项 display
  • 优化移动端的图标显示

1.0.0

正式发布

  • 黑暗模式切换
  • 随便逛逛