没错，这次又整活了，起因是看到了一个漂亮的换肤效果，然后应用到自己的博客上，结果发现单纯的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

正式发布

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