biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-12 22:17:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement: 優化 pjax 下，右下角按鈕的動畫

Browse Source 
fix: 修復頁面設置 aside 爲 true 時，js 報錯的 bug
fix: 修復部分頁面右下角按鈕位置遮擋的 bug
fix: 修復壓縮 html 代碼,友情鏈接頁面壓縮會報錯的 bug
fix: 修復 safari 上滑動側邊菜單欄會收起的 bug
This commit is contained in:
Jerry
2022-01-16 00:47:05 +08:00
parent 18d9d652a0
commit 84ad5c5dd6
5 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/includes/head/config_site.pug
View File

@@ -7,7 +7,7 @@
else isHighlightShrink = theme.highlight_shrink else isHighlightShrink = theme.highlight_shrink
var showToc = false var showToc = false
if (theme.aside.enable) { if (theme.aside.enable && page.aside !== false) {
let tocEnable = false let tocEnable = false
if (is_post()) { if (is_post()) {
if (theme.toc.post) tocEnable = true if (theme.toc.post) tocEnable = true

46
layout/includes/page/flink.pug
View File

@@ -4,64 +4,64 @@
script. script.
(()=>{ (()=>{
const replaceSymbol = (str) => { const replaceSymbol = (str) => {
return str.replace(/[\p{P}\p{S}]/gu, '-') return str.replace(/[\p{P}\p{S}]/gu, "-")
} }
let result = '' let result = ""
fetch('!{url_for(page.flink_url)}') fetch("!{url_for(page.flink_url)}")
.then(response => response.json()) .then(response => response.json())
.then(str => { .then(str => {
for(let i = 0; i < str.length; i++){ for(let i = 0; i < str.length; i++){
const replaceClassName = replaceSymbol(str[i].class_name) const replaceClassName = replaceSymbol(str[i].class_name)
const className = str[i].class_name ? `<h2 id='${replaceClassName}'><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : '' const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
const classDesc = str[i].class_desc ? `<div class='flink-desc'>${str[i].class_desc}</div>` : '' const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""
let listResult = '' let listResult = ""
const lists = str[i].link_list const lists = str[i].link_list
for(let j = 0; j < lists.length; j++){ for(let j = 0; j < lists.length; j++){
listResult += ` listResult += `
<div class="flink-list-item"> <div class="flink-list-item">
<a href='${lists[j].link}' title='${lists[j].name}' target='_blank'> <a href="${lists[j].link}" title="${lists[j].name}" target="_blank">
<div class='flink-item-icon'> <div class="flink-item-icon">
<img class='no-lightbox' src='${lists[j].avatar}' onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt='${lists[j].name}' /> <img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" />
</div> </div>
<div class='flink-item-name'>${lists[j].name}</div> <div class="flink-item-name">${lists[j].name}</div>
<div class='flink-item-desc' title='${lists[j].descr}'>${lists[j].descr}</div> <div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
</a> </a>
</div>` </div>`
} }
result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>` result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
} }
document.querySelector('.flink').insertAdjacentHTML('afterbegin', result) document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
}) })
})() })()
else else
if site.data.link if site.data.link
- let result = '' - let result = ""
each i in site.data.link each i in site.data.link
- let className = i.class_name ? markdown(`## ${i.class_name}`) : '' - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
- let classDesc = i.class_desc ? `<div class='flink-desc'>${i.class_desc}</div>` : '' - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""
- let listResult = '' - let listResult = ""
each j in i.link_list each j in i.link_list
- -
listResult += ` listResult += `
<div class="flink-list-item"> <div class="flink-list-item">
<a href='${j.link}' title='${j.name}' target='_blank'> <a href="${j.link}" title="${j.name}" target="_blank">
<div class='flink-item-icon'> <div class="flink-item-icon">
<img class='no-lightbox' src='${j.avatar}' onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt='${j.name}' /> <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
</div> </div>
<div class='flink-item-name'>${j.name}</div> <div class="flink-item-name">${j.name}</div>
<div class='flink-item-desc' title='${j.descr}'>${j.descr}</div> <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
</a> </a>
</div>` </div>`
- -
- result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>` - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
- page.content = result + page.content - page.content = result + page.content
!= page.content != page.content

5
layout/includes/third-party/pjax.pug vendored
View File

@@ -27,10 +27,11 @@ script.
document.addEventListener('pjax:send', function () { document.addEventListener('pjax:send', function () {
// removeEventListener scroll // removeEventListener scroll
window.removeEventListener('scroll', window.tocScrollFn) window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
window.removeEventListener('scroll', scrollCollect) window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
typeof preloader === 'object' && preloader.initLoading() typeof preloader === 'object' && preloader.initLoading()
document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
if (window.aplayers) { if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) { for (let i = 0; i < window.aplayers.length; i++) {

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "hexo-theme-butterfly", "name": "hexo-theme-butterfly",
"version": "4.0.0", "version": "4.0.1",
"description": "A Simple and Card UI Design theme for Hexo", "description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json", "main": "package.json",
"scripts": { "scripts": {

7
source/js/main.js
View File

@@ -1,5 +1,5 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex let blogNameWidth, menusWidth, searchWidth, $nav
let mobileSidebarOpen = false let mobileSidebarOpen = false
const adjustMenu = (init) => { const adjustMenu = (init) => {
@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
$nav = document.getElementById('nav') $nav = document.getElementById('nav')
} }
let hideMenuIndex = ''
if (window.innerWidth < 768) hideMenuIndex = true if (window.innerWidth < 768) hideMenuIndex = true
else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120 else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
@@ -259,7 +260,7 @@ document.addEventListener('DOMContentLoaded', function () {
// 當滾動條小于 56 的時候 // 當滾動條小于 56 的時候
if (document.body.scrollHeight <= innerHeight) { if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' $rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
return return
} }
@@ -734,7 +735,7 @@ document.addEventListener('DOMContentLoaded', function () {
const unRefreshFn = function () { const unRefreshFn = function () {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
adjustMenu(false) adjustMenu(false)
hideMenuIndex && mobileSidebarOpen && sidebarFn.close() btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
}) })
document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() }) document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })