🐭 创建文件
在目录themes\butterfly\layout\includes下创建文件夹rightclick,在文件中创建文件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>
<% } %>
|
🐭 引入样式文件
在主题目录config _yml下的inject中添加代码
1
| - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/css/GalMenu.css">
|
🐭 引入到页面
找到\themes\butterfly\layout\includes下的文件layout.pug,将代码
1
2
| if theme.Right_Click
!=partial('includes/rightclick/Right_Click', {}, {cache:theme.fragment_cache})
|
添加到最后面
🐭 开启功能
在主题_ config.yml中任意位置添加代码
1
2
3
4
| Right_Click:
enable: true
js: https://cdn.jsdelivr.net/gh/zyoushuo/Blog@master/hexo/js/GalMenu.js
audio: false
|
