此样式功能是在网上看到的,于是就整到hexo中。同样,由于本人使用Volantis主题,所以对Volantis作了些配置。通用的方法会在后文写到。也可按照自己使用的主题自行配置。

添加配置信息

在主题配置文件volantis/_config.yml中添加配置信息:

1
2
3
4
Right_Click:
enable: true # true or false 是否开启右键
js: https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/GalMenu.js
audio: false # true or false 是否开启点击音乐

添加配置文件

在blog\themes\volantis\layout\_partial中创建名为Right_Click.ejs的文件,添加一下代码:

查看代码

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
<% if(theme.Right_Click.enable) { %>
<div class="GalMenu GalDropDown">
<div class="circle" id="gal">
<div class="ring">
<a href="/" class="menuItem">首页</a>
<a href="javascript:history.go(1);" class="menuItem">前进</a>
<a href="javascript:$('html,body').animate({scrollTop:0},500);" class="menuItem">顶部</a>
<a href="javascript:location.reload();" class="menuItem">刷新</a>
<a href="/Message/" class="menuItem">留言</a>
<a href="javascript:history.go(-1);" class="menuItem">后退</a>
</div>
<% if(theme.Right_Click.audio) {%>
<audio id="audio" src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/audio/niconiconi.mp3"></audio>
<% } %>
</div>
</div>
<script type="text/javascript">
var items = document.querySelectorAll('.menuItem');
for (var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
}
</script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/jquery-2.1.1.min.js"><\/script>')</script>
<%- js(theme.Right_Click.js) %>
<script type="text/javascript">
$(document).ready(function() {
$('body').GalMenu({
'menu': 'GalDropDown'
})
});
</script>
<% } %>

其中右键菜单内容可在此处修改。

引入样式文件

在blog\themes\volantis\layout\_partial的head.ejs文件中引入样式文件

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/css/GalMenu.css">

右键菜单中的图片可在此处修改。

引入到页面

在blog\themes\volantis\layout的layout.ejs文件中的</body>引入。(一定要在末尾引入)

1
<%- partial('_partial/Right_Click') %>

最后别忘了一键三连。

Volantis3.0版本已经添加了右键功能,使用本文中的右键别忘了关闭原主题中的右键。

其他主题

引入样式文件

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/css/GalMenu.css">

引入到页面

</body>上方添加以下代码:

查看代码

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
<div class="GalMenu GalDropDown">
<div class="circle" id="gal">
<div class="ring">
<a href="/" class="menuItem">首页</a>
<a href="javascript:history.go(1);" class="menuItem">前进</a>
<a href="javascript:$('html,body').animate({scrollTop:0},500);" class="menuItem">顶部</a>
<a href="javascript:location.reload();" class="menuItem">刷新</a>
<a href="/Message/" class="menuItem">留言</a>
<a href="javascript:history.go(-1);" class="menuItem">后退</a>
</div>
<audio id="audio" src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/audio/niconiconi.mp3"></audio>
</div>
</div>
<script type="text/javascript">
var items = document.querySelectorAll('.menuItem');
for (var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
}
</script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/GalMenu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').GalMenu({
'menu': 'GalDropDown'
})
});
</script>

最后

目前只作了些简单的配置,后期期望加入更多的功能。

Theme Volantis | Powered Hexo 载入天数...载入时分秒...
豫ICP备20002107