右键菜单
参考内容:
- 右键菜单源码:PaddyLin-Burrerfly添加鼠标右键功能
改动范围:使用pug重构代码。配置文件添加自定义点击音乐配置项和自定义链接内容。 - 随机文章功能参考:HCLonely-Hexo博客美化
- 自己写了个镜像站的跳转动作。能够更好的利用Gitee工具人。
由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源,将压缩包内的butterfly文件夹复制到[Blogroot]\theme\
目录下覆盖现有主题文件夹即可跳过以下教程的前3步,直接到主题配置文件_config.butterfly.yml
中参照第4步修改配置项。
具体步骤
- 在
[Blogroot]\themes\butterfly\layout\includes\third-party\
目录下新建galmenu.pug
文件。注意缩进。.GalMenu.GalDropDown
#gal.circle
.ring
a.menuItem(href='javascript:void(0);' onclick='Mirror()')
span=theme.GalMenu.MenuItem.item1
a.menuItem(href=url_for(theme.GalMenu.MenuItem.link2))
span=theme.GalMenu.MenuItem.item2
a.menuItem(href=url_for(theme.GalMenu.MenuItem.link3))
span=theme.GalMenu.MenuItem.item3
a.menuItem(href=url_for(theme.GalMenu.MenuItem.link4))
span=theme.GalMenu.MenuItem.item4
a.menuItem(href=url_for(theme.GalMenu.MenuItem.link5))
span=theme.GalMenu.MenuItem.item5
a.menuItem(href=url_for(theme.GalMenu.MenuItem.link6))
span=theme.GalMenu.MenuItem.item6
if theme.GalMenu.audio
if theme.GalMenu.music
audio#audio(src=url_for(theme.GalMenu.music))
else
audio#audio(src='https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.3.0_12/music/galmenu.mp3')
script(defer src='https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.3.0_12/js/custom/galmenu.min.js') - 修改
[Blogroot]\themes\butterfly\layout\includes\additional-js.pug
文件,在末尾添加内容(注意缩进),注意butterfly_v3.6.0
取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}
改为{cache: true}
:if theme.pjax.enable
!=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})
!=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache})
+ if theme.GalMenu.enable
+ !=partial('includes/third-party/galmenu', {}, {cache:theme.fragment_cache}) - 在
[Blogroot]\themes\butterfly\source\css\layout\
目录下新建galmenu.styl
文件。此处开头是默认图标配置。可以在配置项里更换自己喜欢的图标。$menu-icon1 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon1') ? unquote(hexo-config('GalMenu.MenuItem.icon1')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/home.png')
$menu-icon2 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon2') ? unquote(hexo-config('GalMenu.MenuItem.icon2')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/archive.png')
$menu-icon3 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon3') ? unquote(hexo-config('GalMenu.MenuItem.icon3')) : url("https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/tag.png")
$menu-icon4 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon4') ? unquote(hexo-config('GalMenu.MenuItem.icon4')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/random.png')
$menu-icon5 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon5') ? unquote(hexo-config('GalMenu.MenuItem.icon5')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/link.png')
$menu-icon6 = hexo-config('GalMenu.enable') && hexo-config('GalMenu.MenuItem.icon6') ? unquote(hexo-config('GalMenu.MenuItem.icon6')) : url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/comment.png')
.GalMenu
margin 0
padding 0
display none
position fixed
z-index 999
a
text-decoration none
outline 0
.circle
margin 0 auto
.ring
border-radius 50%
opacity 0
-webkit-transform-origin 50% 50%
-moz-transform-origin 50% 50%
transform-origin 50% 50%
-webkit-transform scale(0.1) rotate(-270deg)
-moz-transform scale(0.1) rotate(-270deg)
-transform scale(0.1) rotate(-270deg)
-webkit-transition all 0.4s ease-out
-moz-transition all 0.4s ease-out
transition all 0.4s ease-out
a
display inline-block
color #ffffff
text-shadow #DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0
-webkit-text-shadow #DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0
-moz-text-shadow #DC965A 1px 0 0,#DC965A 0 1px 0,#DC965A -1px 0 0,#DC965A 0 -1px 0
*filter Glow(color=#DC965A,strength=1)
&:nth-of-type(1)
background-image $menu-icon1
&:nth-of-type(2)
background-image $menu-icon2
&:nth-of-type(3)
background-image $menu-icon3
&:nth-of-type(4)
background-image $menu-icon4
&:nth-of-type(5)
background-image $menu-icon5
&:nth-of-type(6)
background-image $menu-icon6
&:hover
text-shadow #66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0
-webkit-text-shadow #66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0
-moz-text-shadow #66CCFF 1px 0 0,#66CCFF 0 1px 0,#66CCFF -1px 0 0,#66CCFF 0 -1px 0
*filter Glow(color=#66CCFF,strength=1)
.open
.ring
opacity 1
-webkit-transform scale(1) rotate(0)
-moz-transform scale(1) rotate(0)
-transform scale(1) rotate(0)
.menuItem
border-radius 50%
color #eeeeee
display block
height 80px
line-height 80px
margin-left -41px
margin-top -41px
position absolute
text-align center
width 80px
background-size 80px
border 2px #b59494 solid
box-shadow 0px 0px 15px #fff
-webkit-box-shadow 0px 0px 15px #fff
-moz-box-shadow 0px 0px 15px #fff
&:hover
box-shadow inset 0px 0px 80px #fff
-webkit-box-shadow inset 0px 0px 80px #fff
-moz-box-shadow inset 0px 0px 80px #fff
.GalMenu .circle,.ring
height 300px
position relative
width 300px 在
[Blogroot]\_config.butterfly.yml
添加如下配置项:优化了配置方式,可以直接在主题配置文件里添加的配置项中对标题、链接、图标进行修改。
同时添加了点击音乐、图标的默认项配置。# 自定义右键菜单
GalMenu:
enable: true # true or false 是否开启右键
audio: true # true or false 是否开启点击音乐
music: https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/galmenu.mp3 #点击音乐,不填则为默认点击音乐
MenuItem: #菜单配置
item1: 首页 # 菜单标题
link1: / # 跳转链接路径
icon1: url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/galmenu/random.png') # 图片链接,记得按照示例填写。必须用url('')包起来。不填则为默认图标
item2: 时间轴
link2: /archives/
icon2:
item3: 标签
link3: /tags/
icon3:
item4: 分类
link4: /categories/
icon4:
item5: 友人帐
link5: /link/
icon5:
item6: 留言板
link6: /comments/
icon6:进阶教程
添加浏览器动作
前进后退刷新返回顶部等动作直接修改配置项中的link即可实现。例如:
MenuItem: #菜单链接和标签配置
item1: 刷新
link1: javascript:location.reload();
icon1:
item2: 前进
link2: javascript:history.go(1);
icon2:
item3: 后退
link3: javascript:history.go(-1);
icon3:
item4: 返回顶部
link4: '#' # 必须用''包起来不然会被识别成注释符
icon4:添加随机文章功能
这一功能照搬自HCLonely-Hexo博客美化,这是个全局功能,不局限于butterfly主题。
- 在
[Blogroot]\scripts\
目录下新建random.js
文件:hexo.extend.generator.register('random', function (locals) {
const config = hexo.config.random || {}
const posts = []
for (const post of locals.posts.data) {
if (post.random !== false) posts.push(post.path)
}
return {
path: config.path || 'random/index.html',
data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`
}
}) - 使用
/random/
即可访问随机文章。MenuItem: #菜单链接和标签配置
item1: 随机文章
link1: /random/
icon1:添加镜像站跳转功能
- 使用原生js实现,因为要添加onclick()动作,比起添加配置项还是直接改源码比较快。
- Gitee工具人的活用方法可以参考这两篇文章:
- 利用Gitee搭建博客镜像站:使用Gitee提供镜像站支持
- 使用Github Actions来完成Gitee Pages自动更新:使用Github Action实现全自动部署
- 在
[Blogroot]\themes\butterfly\source\js\
目录下新建mirror.js
文件,记得修改对应域名为你自己的:function Mirror() {
let pathname;
let hostname;
let url;
pathname = window.location.pathname;
hostname = window.location.hostname;
// if (hostname === '域名,不带https://协议')
if (hostname === 'akilar.top') { //如果是主站
// url = "域名,带https://协议" + pathname;
url = "https://akilar.gitee.io" + pathname; //就跳转到镜像站的同名页面
window.alert("即将为您跳转至镜像站");
window.location.href = url;
}
else if(hostname === 'akilar.gitee.io') {
url = "https://akilar.top" + pathname;
window.alert("当前为镜像站,即将返回主站");
window.location.href = url;
}
else {
window.alert("本地调试,无需跳转");
}
} - 在
[Blogroot]\_config.butterfly.yml
中引入mirror.jsinject:
head:
bottom:
+ - <script src="/js/mirror.js"></script> - 修改
[Blogroot]\themes\butterfly\layout\includes\third-party\galmenu.pug
文件.ring
- a.menuItem(href=url_for(theme.GalMenu.MenuItem.link1))
+ a.menuItem(href='javascript:void(0);' onclick='Mirror()')bug归纳
- 如果使用了gulp对静态资源进行压缩,由于gulp-babel的加密压缩算法问题,可能造成部署到线上以后右键菜单不显示的bug。
- 解决方案:在
[Blogroot]\gulpfile.js
中添加屏蔽项跳过对galmenu.js
的压缩//minify js babel
gulp.task('compress', () =>
- gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
+ gulp.src(['./public/**/*.js', '!./public/**/*.min.js','!./public/galmenu/galmenu.js'])
.pipe(babel({
presets: ['@babel/preset-env']
}))最新版本中已经将galmenu.js替换为CDN引入,无需担心此bug。
- 解决方案:在
可能出现的bug
- 右键菜单无法显示,控制台报错
$ is not defined
。Butterfly_v3.4.0+
基本实现了去jquery化。而galmenu.js
用到了jquery
,因此才导致的依赖缺失。
解决方案是再自己添加jquery
,修改[Blogroot]\_config.butterfly.yml
,inject:
head:
bottom:
- <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
TO DO
将模板转为PUG,添加配置项,支持自定义修改。
优化图标取值方案,使得图标可以直接在配置项进行设置。
封装页面,使得跳转镜像站可以直接通过
/mirror/
链接访问。
评论
TwikooWaline