mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 20:30:53 +08:00
1. Feature: 可設置内联代码块样式 #26
2. Feature: 可設置夜間模式作爲默認樣式 3. Feature: 可設置是否顯示code language名稱 4. Feature: 可設置是否展開或關閉代碼框 5. Feature: 可設置背景圖片/顔色 6. Feature: 可設置是否顯示footer背景 7. Feature: 增加 canvas-nest.js 8. Feature: 頭像可設置效果(轉圈圈) 9. Feature: menu可設置分組 9. Fix: 優化打賞和搜索打開特效 10. Fix: 優化sidebar的打開特效，避免與文章頁特效不同步 11. Fix: 適配**hexo-blog-encrypt**，現在可以顯示toc 12. Fix: 修復設置不顯示評論時，直達評論按鈕沒有消失的bug 13. Fix: 修復post頁底欄，當沒有顯示評論，不顯示TOC，評論和toc都不顯示 這三種狀態下按鈕的bug 14. Fix: 修復代碼框左右滑動時，代碼名字跟著滑動的bug 15. Fix: 其他page頁標題的字體顯示 16. Fix: 修復當設置開啓canvas_ribbons，進入網站會先顯示canvas_ribbons的bug 17. Fix: 完善夜間模式下，字體顯示問題 18. Fix: 修復代碼框 複製 和 代碼名 z-index bug #25 19. Fix: 完善阅读模式
This commit is contained in:
Jerry
@@ -9,11 +9,11 @@ $(function () {
|
||||
$('body').animate({
|
||||
paddingLeft: 300
|
||||
}, 200)
|
||||
$('#sidebar').animate({}, function () {
|
||||
$('#sidebar').css({
|
||||
'transform': 'translateX(300px)'
|
||||
}, 200)
|
||||
})
|
||||
|
||||
$('#sidebar').animate({
|
||||
left: 0
|
||||
}, 200)
|
||||
|
||||
$('#toggle-sidebar').animate({}, function () {
|
||||
$('#toggle-sidebar').css({
|
||||
'transform': 'rotateZ(180deg)',
|
||||
@@ -45,11 +45,9 @@ $(function () {
|
||||
paddingLeft: 0
|
||||
}, 200)
|
||||
|
||||
$('#sidebar').animate({}, function () {
|
||||
$('#sidebar').css({
|
||||
'transform': 'translateX(0px)'
|
||||
})
|
||||
})
|
||||
$('#sidebar').animate({
|
||||
left: -300
|
||||
}, 200)
|
||||
|
||||
$('#toggle-sidebar').animate({}, function () {
|
||||
$('#toggle-sidebar').css({
|
||||
@@ -63,11 +61,11 @@ $(function () {
|
||||
$('body').animate({
|
||||
paddingLeft: 300
|
||||
}, 200)
|
||||
$('#sidebar').animate({}, function () {
|
||||
$('#sidebar').css({
|
||||
'transform': 'translateX(300px)'
|
||||
})
|
||||
})
|
||||
|
||||
$('#sidebar').animate({
|
||||
left: 0
|
||||
}, 200)
|
||||
|
||||
$('#toggle-sidebar').animate({}, function () {
|
||||
$('#toggle-sidebar').css({
|
||||
'transform': 'rotateZ(180deg)',
|
||||
@@ -81,13 +79,13 @@ $(function () {
|
||||
//-----------------------------------------------------------------------------------------------------
|
||||
// 首页fullpage添加
|
||||
// 添加class
|
||||
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { } else {
|
||||
$('.full_page').css('background-attachment', 'fixed');
|
||||
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else {
|
||||
$('.full_page .nav_bg').css('background-attachment', 'fixed');
|
||||
$('#to_comment').css("display", "block")
|
||||
}
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
$(".scroll-down").on("click", function () {
|
||||
|
||||
scrollTo('#content-outer')
|
||||
@@ -152,10 +150,10 @@ $(function () {
|
||||
//-------------------------------------------------------------------------------------------------------
|
||||
//代码copy
|
||||
// Add copy icon
|
||||
$('figure.highlight').wrap('<div class="code-area-wrap"></div>')
|
||||
|
||||
var highlight_copy = GLOBAL_CONFIG.highlight_copy
|
||||
if (highlight_copy == 'true') {
|
||||
$('figure.highlight').wrap('<div class="code-area-wrap"></div>')
|
||||
var $copyIcon = $('<i class="fa fa-clipboard" aria-hidden="true"></i>')
|
||||
var $notice = $('<div class="copy-notice"></div>')
|
||||
$('.code-area-wrap').prepend($copyIcon)
|
||||
@@ -210,6 +208,47 @@ $(function () {
|
||||
selection.removeAllRanges()
|
||||
})
|
||||
}
|
||||
|
||||
//代碼框語言識別
|
||||
var highlight_lang = GLOBAL_CONFIG.highlight_lang
|
||||
if (highlight_lang == 'true') {
|
||||
var $highlight_lang = $('<div class="code_lang"></div>')
|
||||
$('figure').before($highlight_lang)
|
||||
var lang_name_index
|
||||
var lang_name
|
||||
$('figure').each(function () {
|
||||
lang_name_index = lang_name = $(this).attr('class').split(' ')[1];
|
||||
if (lang_name_index == 'js')
|
||||
lang_name = 'javascript'
|
||||
if (lang_name_index == 'md')
|
||||
lang_name = 'markdown'
|
||||
if (lang_name_index == 'plain')
|
||||
lang_name = 'code'
|
||||
if (lang_name_index == 'py')
|
||||
lang_name = 'python'
|
||||
|
||||
$(this).siblings(".code_lang").text(lang_name)
|
||||
|
||||
})
|
||||
}
|
||||
//代碼收縮
|
||||
var highlight_shrink = GLOBAL_CONFIG.highlight_shrink
|
||||
if (highlight_shrink == 'true') {
|
||||
var $code_expand = $('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
|
||||
} else {
|
||||
var $code_expand = $('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
|
||||
}
|
||||
$('.code-area-wrap').prepend($code_expand)
|
||||
$('.code-area-wrap .code-expand').on('click', function () {
|
||||
if ($(this).hasClass('code-closed')) {
|
||||
$(this).siblings('figure').find('table').show();
|
||||
$(this).removeClass('code-closed');
|
||||
} else {
|
||||
$(this).siblings('figure').find('table').hide();
|
||||
$(this).addClass('code-closed');
|
||||
}
|
||||
})
|
||||
|
||||
//---------------------------------------------------------------------------------------------------
|
||||
//fancybox
|
||||
var imgList = $(".recent-post-info img").not('.no-fancybox');
|
||||
@@ -219,13 +258,13 @@ $(function () {
|
||||
|
||||
for (var i = 0; i < imgList.length; i++) {
|
||||
var lazyload_src = imgList[i].src ? imgList[i].src : imgList.eq(i).attr("data-src")
|
||||
|
||||
|
||||
var $a = $(
|
||||
'<a href="' +
|
||||
lazyload_src +
|
||||
'" data-fancybox="group" data-caption="' +
|
||||
imgList[i].alt +
|
||||
'" class="fancybox"></a>'
|
||||
'" data-fancybox="group" data-caption="' +
|
||||
imgList[i].alt +
|
||||
'" class="fancybox"></a>'
|
||||
)
|
||||
|
||||
var alt = imgList[i].alt
|
||||
@@ -273,8 +312,8 @@ $(function () {
|
||||
$('body').addClass("is_hidden");
|
||||
$('.menus').animate({
|
||||
right: 0
|
||||
}, 300 )
|
||||
$('.menu_mask,.menus').css("display","block")
|
||||
}, 300)
|
||||
$('.menu_mask,.menus').css("display", "block")
|
||||
}
|
||||
})
|
||||
|
||||
@@ -283,11 +322,14 @@ $(function () {
|
||||
$('body').removeClass("is_hidden");
|
||||
$('.menus').animate({
|
||||
right: -250
|
||||
}, 300,function () {
|
||||
{$('.menus').css({ 'display': ''})
|
||||
}
|
||||
})
|
||||
$('.menu_mask').css("display","")
|
||||
}, 300, function () {
|
||||
{
|
||||
$('.menus').css({
|
||||
'display': ''
|
||||
})
|
||||
}
|
||||
})
|
||||
$('.menu_mask').css("display", "")
|
||||
})
|
||||
|
||||
$(window).on('resize', function (e) {
|
||||
@@ -298,17 +340,19 @@ $(function () {
|
||||
$('.menus').animate({
|
||||
right: -250
|
||||
}, 300)
|
||||
$('.menu_mask').css("display","")
|
||||
}
|
||||
$('.menu_mask').css("display", "")
|
||||
}
|
||||
}
|
||||
} )
|
||||
})
|
||||
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
/** scroll 滚动 toc*/
|
||||
/** scroll 滚动 toc*/
|
||||
var initTop = 0
|
||||
$('.toc-child').hide()
|
||||
|
||||
var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show'))
|
||||
|
||||
// main of scroll
|
||||
$(window).scroll(throttle(function (event) {
|
||||
var currentTop = $(this).scrollTop()
|
||||
@@ -317,21 +361,27 @@ $(function () {
|
||||
scrollPercent(currentTop)
|
||||
// head position
|
||||
findHeadPosition(currentTop)
|
||||
auto_scroll_toc(currentTop)
|
||||
|
||||
}
|
||||
var isUp = scrollDirection(currentTop)
|
||||
|
||||
if ($(".toggle-menu").hasClass("open")) {
|
||||
if (currentTop > 56) {
|
||||
|
||||
|
||||
if (isUp) {
|
||||
$('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
|
||||
$('#post_bottom').removeClass('toc_mobile_show')
|
||||
$('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
|
||||
if (!is_post_bottom) {
|
||||
$('#post_bottom').removeClass('toc_mobile_show')
|
||||
$('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
|
||||
}
|
||||
|
||||
} else {
|
||||
$('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
|
||||
$('#post_bottom').addClass('toc_mobile_show')
|
||||
$('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
|
||||
if (!is_post_bottom) {
|
||||
$('#post_bottom').addClass('toc_mobile_show')
|
||||
$('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
|
||||
}
|
||||
|
||||
}
|
||||
$('#page-header').addClass('fixed')
|
||||
@@ -358,7 +408,9 @@ $(function () {
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$('#page-header').removeClass('fixed').removeClass('visible')
|
||||
$('#post_bottom').removeClass('toc_mobile_show')
|
||||
if (!is_post_bottom) {
|
||||
$('#post_bottom').removeClass('toc_mobile_show')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -379,13 +431,15 @@ $(function () {
|
||||
}
|
||||
}
|
||||
|
||||
if ( $(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show') ){
|
||||
$('#rightside').css('bottom', '110px')
|
||||
$('#go-up').css('bottom', '70px')
|
||||
|
||||
} else {
|
||||
$('#rightside').css('bottom', '60px')
|
||||
$('#go-up').css('bottom', '20px')
|
||||
if (!is_post_bottom) {
|
||||
if ($(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show')) {
|
||||
$('#rightside').css('bottom', '110px')
|
||||
$('#go-up').css('bottom', '70px')
|
||||
|
||||
} else {
|
||||
$('#rightside').css('bottom', '60px')
|
||||
$('#go-up').css('bottom', '20px')
|
||||
}
|
||||
}
|
||||
|
||||
}, 50, 100))
|
||||
@@ -492,31 +546,23 @@ $(function () {
|
||||
.find('.toc-child').hide()
|
||||
}
|
||||
|
||||
if ($('.toc-link').hasClass('active')) {
|
||||
var active_position = $(".active").offset().top;
|
||||
var sidebar_scrolltop = $("#sidebar").scrollTop();
|
||||
if (active_position > (top + $(window).height() - 50)) {
|
||||
$("#sidebar").scrollTop(sidebar_scrolltop + 100);
|
||||
} else if (active_position < top + 50) {
|
||||
$("#sidebar").scrollTop(sidebar_scrolltop - 100);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//代碼框雙擊全屏
|
||||
$('figure').on('dblclick', function (e) {
|
||||
if (e.target !== this)
|
||||
return;
|
||||
$(this).toggleClass('code_full_page');
|
||||
$('body').toggleClass('code_body');
|
||||
});
|
||||
|
||||
function auto_scroll_toc(currentTop) {
|
||||
if ($('.toc-link').hasClass('active')) {
|
||||
var active_position = $(".active").offset().top;
|
||||
var sidebar_scrolltop = $("#sidebar").scrollTop();
|
||||
if (active_position > (currentTop + $(window).height() - 50)) {
|
||||
$("#sidebar").scrollTop(sidebar_scrolltop + 100);
|
||||
} else if (active_position < currentTop + 50) {
|
||||
$("#sidebar").scrollTop(sidebar_scrolltop - 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//閲讀模式
|
||||
$("#readmode").click(function () {
|
||||
|
||||
|
||||
if (Cookies.get("night-mode") == "night") {
|
||||
$('body').toggleClass('night-mode');
|
||||
$('body').toggleClass('read-mode');
|
||||
@@ -528,10 +574,8 @@ $(function () {
|
||||
$('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
|
||||
$('#to_comment').toggleClass('is_invisible');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
//閲讀模式下字體調整
|
||||
$("#font_plus").click(function () {
|
||||
var font_size_record = parseFloat($('body').css('font-size'))
|
||||
@@ -551,26 +595,29 @@ $(function () {
|
||||
$('code').css('font-size', font_size_record - 1)
|
||||
});
|
||||
|
||||
|
||||
// 手機顯示toc
|
||||
$('#mobile_toc').on('click', function () {
|
||||
$("#toc_mobile").toggleClass('is_visible')
|
||||
})
|
||||
|
||||
//代碼框語言識別
|
||||
$('figure').each(function () {
|
||||
var lang_name_index;
|
||||
var lang_name;
|
||||
lang_name_index = lang_name = $(this).attr('class').split(' ')[1];
|
||||
if (lang_name_index == 'js')
|
||||
lang_name = 'javascript'
|
||||
if (lang_name_index == 'md')
|
||||
lang_name = 'markdown'
|
||||
if (lang_name_index == 'plain')
|
||||
lang_name = 'code'
|
||||
if (lang_name_index == 'py')
|
||||
lang_name = 'python'
|
||||
|
||||
$('figure.' + lang_name_index + ' table').attr('data-content', lang_name);
|
||||
})
|
||||
|
||||
// sub-menus 位置調整
|
||||
if ( $(window).width() > 768 ) {
|
||||
$('.menus_item_child').each(function () {
|
||||
var a_width= $(this).siblings('a').outerWidth(true);
|
||||
var child_width = $(this).outerWidth(true);
|
||||
$(this).css("margin-left", -(child_width/ 2 - a_width/ 2))
|
||||
})
|
||||
}
|
||||
|
||||
// 手機端sub-menu 展開/收縮
|
||||
$('.menus-expand').on('click', function () {
|
||||
if ($(this).hasClass('menus-closed')) {
|
||||
$(this).parents('.menus_item').find('.menus_item_child').show();
|
||||
$(this).removeClass('menus-closed');
|
||||
} else {
|
||||
$(this).parents('.menus_item').find('.menus_item_child').hide();
|
||||
$(this).addClass('menus-closed');
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
@@ -11,6 +11,10 @@ $(function () {
|
||||
}
|
||||
|
||||
function changeReadModel() {
|
||||
|
||||
if (Cookies.get("night-mode") == null)
|
||||
return
|
||||
|
||||
if (Cookies.get("night-mode") == "night") {
|
||||
$("body").addClass("night-mode");
|
||||
$("#nightshift").removeClass("fa-moon-o").addClass("fa-sun-o");
|
||||
|
||||
@@ -7,7 +7,7 @@ $(function () {
|
||||
$('.search-dialog').css({
|
||||
'display': 'block',
|
||||
'animation': 'titlescale 0.5s'
|
||||
})
|
||||
}),300
|
||||
})
|
||||
|
||||
$('.ais-search-box--input').focus()
|
||||
|
||||
@@ -7,7 +7,7 @@ $(function () {
|
||||
$('.search-dialog').css({
|
||||
'display': 'block',
|
||||
'animation': 'titlescale 0.5s'
|
||||
})
|
||||
}),300
|
||||
})
|
||||
$('#local-search-input input').focus()
|
||||
|
||||
|
||||
11
source/js/third-party/canvas-nest.js
vendored
Normal file
11
source/js/third-party/canvas-nest.js
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
!function(){
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["iPad", "iPhone", "Android",
|
||||
"SymbianOS", "Windows Phone",
|
||||
"iPod", "webOS", "BlackBerry", "IEMobile"];
|
||||
for (var v = 0; v < Agents.length; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();
|
||||
Reference in New Issue
Block a user