solstice23 / argon-theme

📖 Argon - 一个轻盈、简洁的 WordPress 主题
https://solstice23.top/argon
GNU General Public License v3.0
4.57k stars 538 forks source link

使用代码高亮插件和katex插件后文章相关显示不正常 #433

Closed WangONC closed 2 years ago

WangONC commented 2 years ago

我使用的插件是Enlighter 和KaTeX,并且禁用了主题的代码高亮,关闭了主题的数学公式。但是当我从主页进入文章后,代码和公式会显示不正常,只有当刷新后才会正常显示,请问是什么原因

northword commented 2 years ago

尝试关闭 pjax 。

solstice23 commented 2 years ago

FAQ

WangONC commented 2 years ago

非常抱歉,我后来搜索到了相关的问题。在window.pjaxLoaded中加入上述两个插件的脚本即可,如下

<script> 
window.pjaxLoaded = function() {
!function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":false,"rawcodeDbclick":false,"textOverflow":"break","linenumbers":false,"theme":"bootstrap4","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console);
}

function _katexRender(rootElement) {
                const eles = rootElement.querySelectorAll(".katex-eq:not(.katex-rendered)");
                for(let idx=0; idx < eles.length; idx++) {
                    const ele = eles[idx];
                    ele.classList.add("katex-rendered");
                    try {
                        katex.render(
                            ele.textContent,
                            ele,
                            {
                                displayMode: ele.getAttribute("data-katex-display") === 'true',
                                throwOnError: false
                            }
                        );
                    } catch(n) {
                        ele.style.color="red";
                        ele.textContent = n.message;
                    }
                }
            }

            function katexRender() {
                _katexRender(document);
            }

            document.addEventListener("DOMContentLoaded", function() {
                katexRender();

                // Perform a KaTeX rendering step when the DOM is mutated.
                const katexObserver = new MutationObserver(function(mutations) {
                    [].forEach.call(mutations, function(mutation) {
                        if (mutation.target && mutation.target instanceof Element) {
                            _katexRender(mutation.target);
                        }
                    });
                });

                const katexObservationConfig = {
                    subtree: true,
                    childList: true,
                    attributes: true,
                    characterData: true
                };

                katexObserver.observe(document.body, katexObservationConfig);
            });
</script>

我也尝试过添加location.reload();,让其强制刷新,不过这是个非常傻的办法