代码拉取完成，页面将自动刷新
/**
* Add max-width & max-height to <iframe> elements, depending on their width & height props.
*
* @since Twenty Twenty-One 1.0
*
* @return {void}
*/
function twentytwentyoneResponsiveEmbeds() {
var proportion, parentWidth;
// Loop iframe elements.
document.querySelectorAll('iframe').forEach(function (iframe) {
// Only continue if the iframe has a width & height defined.
if (iframe.width && iframe.height) {
// Calculate the proportion/ratio based on the width & height.
proportion = parseFloat(iframe.width) / parseFloat(iframe.height)
// Get the parent element's width.
parentWidth = parseFloat(window.getComputedStyle(iframe.parentElement, null).width.replace('px', ''))
// Set the max-width & height.
iframe.style.maxWidth = '100%';
iframe.style.maxHeight = Math.round(parentWidth / proportion).toString() + 'px'
}
})
}
// Run on initial load.
twentytwentyoneResponsiveEmbeds()
// Run on resize.
window.onresize = twentytwentyoneResponsiveEmbeds;
let
// 可视高度
clientHeight = document.documentElement.clientHeight,
// 可视宽度
clientWidth = document.documentElement.clientWidth,
// TOC
tocCurrentState
window.addEventListener('resize', () => {
clientHeight = document.documentElement.clientHeight
clientWidth = document.documentElement.clientWidth
})
const
/**
* 文章代码高亮
*/
codeHighlight = () => {
hljs.highlightAll()
hljs.initHighlighting()
hljs.initCopyButtonOnLoad()
},
/**
* 前端文章目录 - js
*
* @author 阿锋
* @link https://feng.pub
* @version 0.1.0
*/
contentToc = () => {
// 配置项
const
// 获取内容的标题级别
levelTOC = 'h1, h2, h3, h4',
// 获取到标题个数大于该数时才显示文章目录
toShowNum = 3,
// 文章目录块的高度偏移量（可视窗口高度减去该高度为文章目录块的高度）
tocOffsetHeight = 235,
// 滚动顶部偏移（滚动窗口时内容标题顶部偏移高度，防止顶部浮动导航遮挡标题）
topTOCOffsetHeight = 65,
// 关闭文章菜单后，圆球的高度（根据css样式设定）
lessHeight = 40,
// 菜单默认状态（1：打开状态；0：关闭状态）
defaultState = 1,
// 移动端菜单默认状态
mobileDefaultState = 0,
// 当前状态
initTOCState = (document.documentElement.clientWidth <= 992) ? mobileDefaultState : defaultState,
// 获取文章内容元素
entryContent = document.querySelector('.entry-content')
// 当前状态
tocCurrentState = initTOCState
if (!entryContent) return
// 获取元素中H1、H2、H3、H4、H5、H6
const levelTOCStr = levelTOC.split(",").map(item => '.entry-content>' + item).join(',')
const contentHeadings = entryContent.querySelectorAll(levelTOCStr)
if (contentHeadings.length < toShowNum) return
// TOC
const
box = document.createElement('div'),
btnBox = document.createElement('a'),
indexBox = document.createElement('div'),
titleBox = document.createElement('h6'),
closeBox = document.createElement('a'),
listBox = document.createElement('ul'),
action = {
tocLess: () => {
tocCurrentState = 0
box.classList.add('less')
box.classList.remove('spread')
},
tocSpread: () => {
tocCurrentState = 1
box.classList.add('spread')
box.classList.remove('less')
}
}
box.classList.add('content-toc')
btnBox.classList.add('button-box', 'text')
btnBox.innerHTML = "目录"
box.appendChild(btnBox)
indexBox.classList.add('index-box')
box.appendChild(indexBox)
titleBox.innerHTML = "文档目录"
indexBox.appendChild(titleBox)
closeBox.classList.add('close-box')
closeBox.innerHTML = '关闭'
indexBox.appendChild(closeBox)
contentHeadings.forEach((e, k) => {
const liBox = document.createElement('li')
liBox.className = 'level_' + e.tagName
liBox.innerText = e.textContent
liBox.dataset.toc = k
listBox.appendChild(liBox)
})
indexBox.appendChild(listBox)
initTOCState ? action.tocSpread() : action.tocLess()
closeBox.addEventListener('click', () => {
action.tocLess()
})
btnBox.addEventListener('click', () => {
tocCurrentState ? action.tocLess() : action.tocSpread()
})
// 点击文章目录事件
listBox.addEventListener('click', e => {
if (e.target.tagName == 'LI') {
const activeToc = listBox.querySelector('.active')
if (activeToc) activeToc.classList.remove('active')
e.target.classList.add('active')
const TOCIndex = e.target.dataset.toc
window.scrollTo({ top: contentHeadings[TOCIndex].offsetTop - topTOCOffsetHeight, left: 0, behavior: "smooth" })
}
})
// 监听页面滚动
document.addEventListener('scroll', () => {
const
scrollTop = document.documentElement.scrollTop,
activeToc = listBox.querySelector('.active')
if (scrollTop < entryContent.offsetTop || scrollTop > (entryContent.offsetHeight + entryContent.offsetTop)) {
if (activeToc) activeToc.classList.remove('active')
} else {
const contentTOCLis = listBox.querySelectorAll('li')
contentHeadings.forEach((e, k) => {
if (scrollTop >= (e.offsetTop - topTOCOffsetHeight) && scrollTop < (contentHeadings[k + 1] ? contentHeadings[k + 1].offsetTop - topTOCOffsetHeight : entryContent.offsetHeight + entryContent.offsetTop)) {
if (activeToc) activeToc.classList.remove('active')
contentTOCLis[k].classList.add('active')
}
})
}
})
return {
box, action
}
},
backToTop = () => {
const
upIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket-fill" viewBox="0 0 16 16"> <path d="M10.175 1.991c.81 1.312 1.583 3.43 1.778 6.819l1.5 1.83A2.5 2.5 0 0 1 14 12.202V15.5a.5.5 0 0 1-.9.3l-1.125-1.5c-.166-.222-.42-.4-.752-.57-.214-.108-.414-.192-.627-.282l-.196-.083C9.7 13.793 8.85 14 8 14c-.85 0-1.7-.207-2.4-.635-.068.03-.133.057-.198.084-.211.089-.411.173-.625.281-.332.17-.586.348-.752.57L2.9 15.8a.5.5 0 0 1-.9-.3v-3.298a2.5 2.5 0 0 1 .548-1.562l.004-.005L4.049 8.81c.197-3.323.969-5.434 1.774-6.756.466-.767.94-1.262 1.31-1.57a3.67 3.67 0 0 1 .601-.41A.549.549 0 0 1 8 0c.101 0 .17.027.25.064.037.017.086.041.145.075.118.066.277.167.463.315.373.297.85.779 1.317 1.537ZM9.5 6c0-1.105-.672-2-1.5-2s-1.5.895-1.5 2S7.172 8 8 8s1.5-.895 1.5-2Z"/> <path d="M8 14.5c.5 0 .999-.046 1.479-.139L8.4 15.8a.5.5 0 0 1-.8 0l-1.079-1.439c.48.093.98.139 1.479.139Z"/> </svg>',
box = document.createElement('a')
box.classList.add('back-to-top', 'button-box')
box.innerHTML = upIcon
box.addEventListener('click', () => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" })
})
// 监听页面滚动
document.addEventListener('scroll', () => {
const scrollTop = document.documentElement.scrollTop
scrollTop >= clientHeight * 0.57 ? box.classList.add('show') : box.classList.remove('show')
})
return box
},
switchStyle = () => {
let currentStyle
const
darkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16"> <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> </svg>',
lightIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun-fill" viewBox="0 0 16 16"> <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/> </svg>',
autoIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-display-fill" viewBox="0 0 16 16"> <path d="M6 12c0 .667-.083 1.167-.25 1.5H5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-.75c-.167-.333-.25-.833-.25-1.5h4c2 0 2-2 2-2V4c0-2-2-2-2-2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h4z"/> </svg>',
box = document.createElement('div'),
darkBtn = document.createElement('a'),
lightBtn = document.createElement('a'),
autoBtn = document.createElement('a'),
localStorageSwitchKey = 'tool-bar-switch-sytle',
switchStyle = {
dark: () => {
document.documentElement.style.setProperty('--theme-palette-color-1', '#a88b71')
document.documentElement.style.setProperty('--theme-palette-color-2', '#b59477')
document.documentElement.style.setProperty('--theme-palette-color-3', '#997d65')
document.documentElement.style.setProperty('--theme-palette-color-4', '#a88b71')
document.documentElement.style.setProperty('--theme-palette-color-5', '#473931')
document.documentElement.style.setProperty('--theme-palette-color-6', '#0e0a0a')
document.documentElement.style.setProperty('--theme-palette-color-7', '#160908')
document.documentElement.style.setProperty('--theme-palette-color-8', '#230e0d')
document.documentElement.style.setProperty('--theme-palette-color-9', 'rgba(13, 9, 9, 0.84)')
document.documentElement.style.setProperty('--theme-palette-color-10', '#0e0a0a')
},
light: () => {
document.documentElement.style.removeProperty('--theme-palette-color-1')
document.documentElement.style.removeProperty('--theme-palette-color-2')
document.documentElement.style.removeProperty('--theme-palette-color-3')
document.documentElement.style.removeProperty('--theme-palette-color-4')
document.documentElement.style.removeProperty('--theme-palette-color-5')
document.documentElement.style.removeProperty('--theme-palette-color-6')
document.documentElement.style.removeProperty('--theme-palette-color-7')
document.documentElement.style.removeProperty('--theme-palette-color-8')
document.documentElement.style.removeProperty('--theme-palette-color-9')
document.documentElement.style.removeProperty('--theme-palette-color-10')
}
},
switchElement = (style) => {
currentStyle = style
localStorage.setItem(localStorageSwitchKey, style)
const activeBox = box.querySelector('.active')
activeBox ? activeBox.classList.remove('active') : ''
},
switchDark = () => {
switchElement('dark')
darkBtn.classList.add('active')
switchStyle.dark()
if (clientWidth <= 576) {
// darkBtn.style.display = 'none'
// lightBtn.style.display = 'block'
}
},
switchLight = () => {
switchElement('light')
lightBtn.classList.add('active')
switchStyle.light()
if (clientWidth <= 576) {
// lightBtn.style.display = 'none'
// darkBtn.style.display = 'block'
}
},
switchAuto = () => {
switchElement('auto')
autoBtn.classList.add('active')
// 查询媒体
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// 暗黑模式
switchStyle.dark()
} else {
// 非暗黑模式
switchStyle.light()
}
},
initStyle = () => {
currentStyle = localStorage.getItem(localStorageSwitchKey)
if (clientWidth <= 576 && currentStyle === 'auto') {
currentStyle = 'light'
}
switch (currentStyle) {
case 'dark':
switchDark()
break;
case 'light':
switchLight()
break;
default:
switchAuto()
break;
}
}
box.classList.add('switch-style')
darkBtn.classList.add('dark', 'button-box')
darkBtn.innerHTML = darkIcon
box.appendChild(darkBtn)
lightBtn.classList.add('light', 'button-box')
lightBtn.innerHTML = lightIcon
box.appendChild(lightBtn)
autoBtn.classList.add('auto', 'button-box')
autoBtn.innerHTML = autoIcon
box.appendChild(autoBtn)
darkBtn.addEventListener('click', () => {
switchDark()
})
lightBtn.addEventListener('click', () => {
switchLight()
})
autoBtn.addEventListener('click', () => {
switchAuto()
})
return { box, initStyle }
},
commentsBubble = () => {
const commentsArea = document.querySelector('.comments-area')
if (!commentsArea) return
const commentIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-text-fill" viewBox="0 0 16 16"> <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.5a1 1 0 0 0-.8.4l-1.9 2.533a1 1 0 0 1-1.6 0L5.3 12.4a1 1 0 0 0-.8-.4H2a2 2 0 0 1-2-2V2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5z"/> </svg>',
box = document.createElement('div'),
messageBox = document.createElement('div'),
bubbleBox = document.createElement('a'),
timeoutShow = setTimeout(() => {
messageBox.classList.add('show')
}, 15000),
timeoutHide = setTimeout(() => {
messageBox.classList.remove('show')
}, 35000),
clearAndHide = () => {
clearTimeout(timeoutShow)
clearTimeout(timeoutHide)
messageBox.classList.remove('show')
const box = document.querySelector('.content-toc')
if (box && clientWidth <= 576) {
tocCurrentState = 0
box.classList.add('less')
box.classList.remove('spread')
}
},
toCommentsArea = () => {
document.querySelector('#wpd-editor-0_0 .ql-editor').focus()
messageBox.classList.remove('show')
clearAndHide()
}
box.classList.add('comments-bubble')
messageBox.classList.add('message')
messageBox.innerHTML = '希望看到您的想法，邀您发表评论。'
box.appendChild(messageBox)
bubbleBox.classList.add('button-box')
bubbleBox.innerHTML = commentIcon
box.appendChild(bubbleBox)
messageBox.addEventListener('click', () => {
toCommentsArea()
})
bubbleBox.addEventListener('click', () => {
toCommentsArea()
})
box.addEventListener("mouseover", () => {
messageBox.classList.add('show')
})
box.addEventListener("mouseout", () => {
messageBox.classList.remove('show')
})
document.querySelector('.wpd-form-wrap').addEventListener('click', e => {
if (e.target.className === 'ql-editor ql-blank') {
clearAndHide()
}
})
document.querySelector('.wpd-thread-list').addEventListener('click', e => {
if (e.target.className === 'wpd-reply-button') {
clearAndHide()
}
})
const loadMoreBtn = document.querySelector('.wpd-load-more-submit')
if (loadMoreBtn) {
loadMoreBtn.addEventListener('click', () => {
loadMoreBtn.classList.add('wpd-loading')
setTimeout(() => {
loadMoreBtn.classList.remove('wpd-loading')
}, 10000)
})
}
return box
},
toolBar = () => {
const box = document.createElement('div'),
switchObj = switchStyle()
box.classList.add('tool-bar')
switchObj.initStyle()
document.addEventListener("DOMContentLoaded", () => {
const
toc = contentToc(),
commentsBubbleBox = commentsBubble()
if (toc !== undefined) box.appendChild(toc.box)
if (commentsBubbleBox) box.appendChild(commentsBubbleBox)
box.appendChild(switchObj.box)
box.appendChild(backToTop())
document.querySelector('body').appendChild(box)
})
let scrollTop1 = document.documentElement.scrollTop, scrollTop2, boxShow = 1
document.addEventListener("scroll", () => {
scrollTop2 = document.documentElement.scrollTop
if (scrollTop1 > scrollTop2) {
if (boxShow === 0) {
boxShow = 1
box.classList.remove('hide')
}
} else {
if (boxShow === 1) {
boxShow = 0
box.classList.add('hide')
}
}
scrollTop1 = scrollTop2
})
}
toolBar()
document.addEventListener("DOMContentLoaded", () => {
// codeHighlight()
})
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
