diff --git a/src/components/articleInfo/articleInfo.js b/src/components/articleInfo/articleInfo.js index 317dc53c..4ed1da2e 100644 --- a/src/components/articleInfo/articleInfo.js +++ b/src/components/articleInfo/articleInfo.js @@ -133,76 +133,68 @@ export default function main() { /** * 设置文章引用 | 扩展markdown语法 */ - (() => { + $('.blogpost-body p').html((i, c) => { + if (/^\?>/.test(c)) return `

${c.slice(5).trim()}

`; + if (/^!>/.test(c)) return `

${c.slice(5).trim()}

`; + }); + + // 设置注释样式 + const tokenMap = { + '~bk': '', + 'bk~': '', + '~b': '', + 'b~': '', + '~c': '', + 'c~': '', + '~u': '', + 'u~': '', + '~h': '', + 'h~': '', + '~s': '', + 's~': '', + '~x': '', + 'x~': '', + }; + + const configMap = { + mu: options.underline, + mc: options.circle, + mbox: options.box, + mhl: options.highlight, + mbk: options.bracket, + mst: options.strikeThrough, + mco: options.crossedOff, + }; + + function safeReplaceHtml(selector, replacement) { + return replacement.replace(/&/g, '&').replace(//g, '>'); + } + + const init = async () => { + await $.__tools.dynamicLoadingJs($.__config.default.roughNotation); $('.blogpost-body p').html((i, c) => { - if (/^\?>/.test(c)) return '

' + c.slice(5).trim() + '

'; - if (/^!>/.test(c)) return '

' + c.slice(5).trim() + '

'; - }); - })(); - - /** - * 设置文章手绘效果 - */ - (() => { - if (!$.__config.articleContent.roughNotation.enable) return; - const tokenMap = { - '~bk': '', - 'bk~': '', - '~b': '', - 'b~': '', - '~c': '', - 'c~': '', - '~u': '', - 'u~': '', - '~h': '', - 'h~': '', - '~s': '', - 's~': '', - '~x': '', - 'x~': '', - }; - - const { options } = $.__config.articleContent.roughNotation; - - const configMap = { - mu: options.underline, - mc: options.circle, - mbox: options.box, - mhl: options.highlight, - mbk: options.bracket, - mst: options.strikeThrough, - mco: options.crossedOff, - }; - - const annotateElements = () => { - const { annotate } = window.RoughNotation; - Object.keys(configMap).forEach((selector) => { - const elements = document.querySelectorAll(selector); - elements.forEach((el) => { - annotate(el, configMap[selector]).show(); - }); - }); - }; - - const init = async () => { - await $.__tools.dynamicLoadingJs($.__config.default.roughNotation); - - $('.blogpost-body p').html((i, c) => { - return c.replace(/~[a-z]{1,2}|[a-z]{1,2}~/g, (match) => tokenMap[match]); + let replacedText = c.replace(/~[a-z]{1,2}|[a-z]{1,2}~/g, (match) => { + if (tokenMap.hasOwnProperty(match)) { + return safeReplaceHtml(match, tokenMap[match]); + } + console.warn(`No mapping found for token: ${match}`); + return match; }); - + return replacedText; + }); + const needAnnotation = document.querySelectorAll(Object.keys(configMap).join(',')); + if (needAnnotation.length) { setTimeout(() => { annotateElements(); }, 2000); - }; - init(); - })(); + } + }; + + if ($.__config.articleContent.roughNotation.enable) init(); /** * 是否隐藏底部的编辑推荐和阅读排行 */ - (() => { - if ($.__config.articleContent.hide.recommendPosts) $('#under_post_card1').hide(); - if ($.__config.articleContent.hide.readingRanking) $('#under_post_card2').hide(); - })(); + if ($.__config.articleContent.hide.recommendPosts) $('#under_post_card1').hide(); + if ($.__config.articleContent.hide.readingRanking) $('#under_post_card2').hide(); } diff --git a/src/components/banner/banner.js b/src/components/banner/banner.js index d4d1e083..fad32213 100644 --- a/src/components/banner/banner.js +++ b/src/components/banner/banner.js @@ -79,26 +79,15 @@ export default function main() { // 添加事件监听 $.__event.scroll.handle.push(() => { - let openButton = $('#open-button'); + const openButton = $('#open-button'); + const { temScroll, docScroll, homeScroll } = $.__event.scroll; + const isScrolledDown = temScroll < docScroll && homeScroll <= docScroll; + const isScrolledUp = temScroll > docScroll && homeScroll >= docScroll; + const shouldToggleClass = openButton.hasClass('menu-button-scroll'); - if ( - $.__event.scroll.temScroll < $.__event.scroll.docScroll && - $.__event.scroll.homeScroll <= $.__event.scroll.docScroll && - !openButton.hasClass('menu-button-scroll') - ) { - // 向下滚动 - openButton.addClass('menu-button-scroll'); - openButton.text(''); - } - - if ( - $.__event.scroll.temScroll > $.__event.scroll.docScroll && - $.__event.scroll.homeScroll >= $.__event.scroll.docScroll && - openButton.hasClass('menu-button-scroll') - ) { - // 滚入头图 - openButton.removeClass('menu-button-scroll'); - openButton.text('MENU'); + // 根据滚动方向和当前状态切换按钮样式 + if ((isScrolledDown && !shouldToggleClass) || (isScrolledUp && shouldToggleClass)) { + openButton.toggleClass('menu-button-scroll', isScrolledDown).text(isScrolledDown ? '' : 'MENU'); } }); }