biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 19:20:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

1. 更改手機頁面的menu和toc的顯示方式和顯示特效（ipad也能看TOC)

Browse Source 
1. 更改手機頁面的menu和toc的顯示方式和顯示特效（ipad也能看TOC)
3. 可設置複製時，内容自動加上版權信息
4. 可修改tag的top_img
5. 可修改category的top_img
6. 可修改valine的背景
7. archives頁UI優化
8. ICP增加icon #37
9. 可設置主頁top_img的高度
10. 可設置主頁site-info的位置
11. category頁和tag頁的UI可以設置與主頁UI一樣 #31
12. 主頁subtitle可設置多個句子（不再限制2個） #37
13. 設置menu時，頭尾添加空格不受影響
14. 調整post頁的佈局
15. 书签添加icon
16. 公告icon效果
17. 首頁歸檔模塊，可設置數量限制，會顯示'查看更多'按鈕
18. 右下角按鈕調整。
19. 修复文章cover隨機图片生成，同一篇文章，不同地方的cover顯示不一样的bug
20. 修復gitalk語言設置無效的bug #35
21. 修復post頁面，當沒有設置word count時，閲讀量前有'|"
22. 修复sub-menu在safari的显示问题
23. 修复tags页评论居中问题
24. 修复header a hover 白色问题
25. 修復夜間模式下footer的顔色bug
26. 修復英文語言下，書簽英文顯示不完整的問題
This commit is contained in:
Jerry
2019-09-24 02:09:51 +08:00
Unverified
parent 83dc0559c0
commit 2eb15123f9
57 changed files with 1438 additions and 1224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
source/js/main.js
View File

@@ -1,4 +1,8 @@
$(function () {
/**
* 進入post頁sidebar自動打開
*/
if ($('#sidebar').hasClass('auto_open')) {
if ($(".sidebar-toc__content").children().length > 0) {
$(".layout_post").animate({}, function () {
@@ -32,8 +36,9 @@ $(function () {
}
//-------------------------------------------------------------------------------------------------------
//sidebar
/**
* 點擊左下角箭頭,顯示sidebar
*/
$('#toggle-sidebar').on('click', function () {
if (!isMobile() && $('#sidebar').is(':visible')) {
@@ -76,25 +81,25 @@ $(function () {
}
})
//-----------------------------------------------------------------------------------------------------
// 首页fullpage添加
// 添加class
/**
* 首頁fullpage添加
* 添加class
*/
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")
}
//---------------------------------------------------------------------------------------------------------
/**
* 首頁top_img底下的箭頭
*/
$(".scroll-down").on("click", function () {
scrollTo('#content-outer')
});
//--------------------------------------------------------------------------------------------------------
// bookmark
/**
* BOOKMARK 書簽
*/
$.fancyConfirm = function (opts) {
opts = $.extend(true, {
title: 'Are you sure?',
@@ -109,7 +114,7 @@ $(function () {
src: '<div class="fc-content">' +
'<h3>' + opts.title + '</h3>' +
'<p>' + opts.message + '</p>' +
'<p class="tright">' +
'<p class="is_right">' +
'<button data-value="1" data-fancybox-close class="bookmark-ok">' + opts.okButton + '</button>' +
'</p>' +
'</div>',
@@ -147,9 +152,10 @@ $(function () {
}
});
//-------------------------------------------------------------------------------------------------------
//代码copy
// Add copy icon
/**
* 代碼copy
* Add copy icon
*/
$('figure.highlight').wrap('<div class="code-area-wrap"></div>')
var highlight_copy = GLOBAL_CONFIG.highlight_copy
@@ -209,7 +215,9 @@ $(function () {
})
}
//代碼框語言識別
/**
* 代碼框語言識別
*/
var highlight_lang = GLOBAL_CONFIG.highlight_lang
if (highlight_lang == 'true') {
var $highlight_lang = $('<div class="code_lang"></div>')
@@ -231,7 +239,9 @@ $(function () {
})
}
//代碼收縮
/**
* 代碼收縮
*/
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>')
@@ -249,8 +259,9 @@ $(function () {
}
})
//---------------------------------------------------------------------------------------------------
//fancybox
/**
* fancybox
*/
var imgList = $(".recent-post-info img").not('.no-fancybox');
if (imgList.length === 0) {
imgList = $("#post-content img").not('.no-fancybox');
@@ -304,55 +315,71 @@ $(function () {
});
//---------------------------------------------------------------------------------------------------------
/** head点击*/
$('.toggle-menu').on('click', function () {
/**
* 手機menu和toc按鈕點擊
* 顯示menu和toc的sidebar
*/
function mobile_menu_close() {
if ($(".toggle-menu").hasClass("open")) {
$(".toggle-menu").removeClass("open").addClass("close");
$('body').addClass("is_hidden");
$('.menus').animate({
right: 0
}, 300)
$('.menu_mask,.menus').css("display", "block")
$('body').removeClass("open-mobile-menus");
$('#menu_mask').fadeOut()
}
}
function mobile_toc_close() {
if ($("#mobile-toc-button").hasClass("open")) {
$("#mobile-toc-button").removeClass("open").addClass("close");
$('body').removeClass("open-mobile-toc");
$('#menu_mask').fadeOut();
}
}
$('.toggle-menu').on('click', function () {
if ($(".toggle-menu").hasClass("close")) {
$(".toggle-menu").removeClass("close").addClass("open");
$('body').addClass("open-mobile-menus");
$('#menu_mask').fadeIn();
}
})
$('.menu_mask ').on('click touchstart', function () {
$(".toggle-menu").removeClass("close").addClass("open");
$('body').removeClass("is_hidden");
$('.menus').animate({
right: -250
}, 300, function () {
{
$('.menus').css({
'display': ''
})
}
})
$('.menu_mask').css("display", "")
$('#mobile-toc-button').on('click', function () {
if ($("#mobile-toc-button").hasClass("close")) {
$("#mobile-toc-button").removeClass("close").addClass("open");
$('body').addClass("open-mobile-toc");
$('#menu_mask').fadeIn();
}
})
$('#menu_mask').on('click touchstart', function () {
mobile_menu_close()
mobile_toc_close()
})
$(window).on('resize', function (e) {
if (!$('.toggle-menu').is(':visible')) {
if ($(".toggle-menu").hasClass("close")) {
$(".toggle-menu").removeClass("close").addClass("open");
$('body').removeClass("is_hidden");
$('.menus').animate({
right: -250
}, 300)
$('.menu_mask').css("display", "")
}
mobile_menu_close()
}
if (!$('#mobile-toc-button').is(':visible')) {
mobile_toc_close()
}
})
//點擊toc，收起sidebar
$("#mobile-sidebar-toc a").on('click', function () {
mobile_toc_close()
})
//---------------------------------------------------------------------------------------------------------
/** 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()
@@ -362,84 +389,39 @@ $(function () {
// 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()
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')
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')
if ($('#go-up').css('opacity') === '0') {
$('#go-up').animate({}, function () {
$('#go-up').css({
'opacity': '1',
'transform': 'translateX(-30px) rotateZ(360deg)'
})
})
}
if ($('#rightside').css('opacity') === '0') {
$('#rightside').animate({}, function () {
$('#rightside').css({
'opacity': '1',
'transform': 'translateX(-38px)'
})
})
}
if (currentTop > 56) {
if (isUp) {
$('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
} else {
if (currentTop === 0) {
$('#page-header').removeClass('fixed').removeClass('visible')
if (!is_post_bottom) {
$('#post_bottom').removeClass('toc_mobile_show')
}
}
$('#go-up').animate({}, function () {
$('#go-up').css({
'opacity': '0',
'transform': 'translateX(0) rotateZ(180deg) '
})
})
$('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
}
$('#page-header').addClass('fixed')
if ($('#rightside').css('opacity') === '0') {
$('#rightside').animate({}, function () {
$('#rightside').css({
'opacity': '0',
'transform': 'translateX(0)'
$(this).css({
'opacity': '1',
'transform': 'translateX(-38px)'
})
})
}
}
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')
} else {
if (currentTop === 0) {
$('#page-header').removeClass('fixed').removeClass('visible')
}
$('#rightside').animate({}, function () {
$('#rightside').css({
'opacity': '',
'transform': ''
})
})
}
}, 50, 100))
@@ -546,7 +528,6 @@ $(function () {
.find('.toc-child').hide()
}
}
function auto_scroll_toc(currentTop) {
@@ -561,63 +542,123 @@ $(function () {
}
}
//閲讀模式
/**
* 閲讀模式
*/
$("#readmode").click(function () {
if (Cookies.get("night-mode") == "night") {
$('body').toggleClass('night-mode');
$('body').toggleClass('read-mode');
$('#font_plus,#font_minus,#to_comment').toggleClass('is_visible');
$('#to_comment').toggleClass('is_invisible');
} else {
$('body').toggleClass('read-mode');
$('#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'))
var code_size_record = parseFloat($('pre').css('font-size'))
var pre_size_record = parseFloat($('pre').css('font-size'))
var code_size_record = parseFloat($('code').css('font-size'))
$('body').css('font-size', font_size_record + 1)
$('pre').css('font-size', font_size_record + 1)
$('code').css('font-size', font_size_record + 1)
$('pre').css('font-size', pre_size_record + 1)
$('code').css('font-size', code_size_record + 1)
});
$("#font_minus").click(function () {
var font_size_record = parseFloat($('body').css('font-size'))
var code_size_record = parseFloat($('pre').css('font-size'))
var pre_size_record = parseFloat($('pre').css('font-size'))
var code_size_record = parseFloat($('code').css('font-size'))
$('body').css('font-size', font_size_record - 1)
$('pre').css('font-size', font_size_record - 1)
$('code').css('font-size', font_size_record - 1)
$('pre').css('font-size', pre_size_record - 1)
$('code').css('font-size', code_size_record - 1)
});
// 手機顯示toc
$('#mobile_toc').on('click', function () {
$("#toc_mobile").toggleClass('is_visible')
})
/**
* sub-menus 位置調整
*/
// sub-menus 位置調整
if ( $(window).width() > 768 ) {
if ($(window).width() > 768) {
$('.menus_item_child').each(function () {
var a_width= $(this).siblings('a').outerWidth(true);
var a_width = $(this).siblings('a').outerWidth(true);
var child_width = $(this).outerWidth(true);
$(this).css("margin-left", -(child_width/ 2 - a_width/ 2))
$(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');
}
})
/**
* 手機端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');
}
})
/**
* rightside 點擊設置 按鈕 展開
*/
$('#rightside_config').on('click', function () {
$('#rightside-config-hide').toggleClass("rightside-in")
})
/**
* 調正recent_post 上下間距
*/
function recent_post_padding() {
$(".recent-post-info").each(function () {
var k = $(".recent-post-item").height();
var e = $(this).height();
$(this).css({
"padding-top": (k - e) / 2,
"padding-bottom": (k - e) / 2
})
})
}
//recent-post-item垂直置中
if ($(window).width() > 768) {
recent_post_padding();
}
$(window).bind("resize", function () {
if ($(window).width() > 768) {
recent_post_padding();
}
})
/**
* 複製時加上版權信息
*/
var copy_copyright_js = GLOBAL_CONFIG.copy_copyright_js
var copyright = GLOBAL_CONFIG.copyright
if (copyright) {
document.body.oncopy = event => {
event.preventDefault();
let textFont, copyFont = window.getSelection(0).toString();
if (copyFont.length > 45) {
textFont = copyFont + '\n' + '\n' + '\n' +
copyright.languages.author + '\n' +
copyright.languages.link + '\n' +
copyright.languages.source + '\n' +
copyright.languages.info;
} else {
textFont = copyFont;
}
if (event.clipboardData) {
return event.clipboardData.setData('text', textFont);
} else {
// 兼容IE
return window.clipboardData.setData("text", textFont);
}
}
}
});