温馨提示
此文章发布距今已过1917天，内容仅供参考~
为你的博客添加鼠标右键菜单。此样式功能是在网上看到的，于是就整到hexo中。同样，由于本人使用Volantis主题，所以对Volantis作了些配置。通用的方法会在后文写到。也可按照自己使用的主题自行配置。
添加配置信息
在主题配置文件volantis/_config.yml中添加配置信息：
1
2
3
4
| Right_Click:
enable: true
js: https://gcore.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/GalMenu.js
audio: 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://gcore.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://gcore.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://gcore.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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="https://gcore.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/GalMenu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').GalMenu({
'menu': 'GalDropDown'
})
});
</script>
|
最后
目前只作了些简单的配置，后期期望加入更多的功能。
条评论