一、修正WP Githuber MD自动生成目录失效的问题

1. 修改jquery.toc.min.js

打开WordPress插件目录下文件并格式化:
wp-githuber-md/assets/js//jquery.toc.min.js

把如下代码

        i = function(i) {
            var a = i.selector,
                c = i.scope,
                f = e("<ol/>"),
                u = f,
                p = null,
                s = n(a),
                l = o(i.overwrite, i.prefix);
            return e(c).find(a)
                .each(function(o, i) {
                    var a = n(i.tagName),
                        c = a - s;
                    c > 0 && (u = t(p, c)), c < 0 && (u = r(u, 2 * -c)), u.length || (u = f);
                    var h = e("<li/>"),
                        d = e("<a/>");
                    l(e(i), d, o), h.append(d)
                        .appendTo(u), p = h, s = a
                }), f
        };
    e.fn.initTOC = function(n) {
        var t = {
            selector: "h1, h2, h3, h4, h5, h6",
            scope: "body",
            overwrite: !1
        };
        n = e.extend(t, n);
        var r = n.selector;
        if ("string" != typeof r) throw new TypeError("selector must be a string");
        if (!r.match(/^(?:h[1-6],?\s*)+$/g)) throw new TypeError("selector must contains only h1-6");
        e(this).append(i(n));
        var o = location.hash;
        return o && setTimeout(function() {
            var e = document.getElementById(o.slice(1));
            e && e.scrollIntoView()
        }, 0), e(this)
    }

修改为:

        i = function(i,target) {
            var a = i.selector,
                c = i.scope,
                f = e("<ol/>"),
                u = f,
                p = null,
                s = n(a),
                l = o(i.overwrite, i.prefix);
            return e(target).find(a)
                .each(function(o, i) {
                    var a = n(i.tagName),
                        c = a - s;
                    c > 0 && (u = t(p, c)), c < 0 && (u = r(u, 2 * -c)), u.length || (u = f);
                    var h = e("<li/>"),
                        d = e("<a/>");
                    l(e(i), d, o), h.append(d)
                        .appendTo(u), p = h, s = a
                }), f
        };
    e.fn.initTOC = function(n,target) {
        var t = {
            selector: "h1, h2, h3, h4, h5, h6",
            scope: "body",
            overwrite: !1
        };
        n = e.extend(t, n);
        var r = n.selector;
        if ("string" != typeof r) throw new TypeError("selector must be a string");
        if (!r.match(/^(?:h[1-6],?\s*)+$/g)) throw new TypeError("selector must contains only h1-6");
        e(this).append(i(n,target));
        var o = location.hash;
        return o && setTimeout(function() {
            var e = document.getElementById(o.slice(1));
            e && e.scrollIntoView()
        }, 0), e(this)
    }

2. 修改Toc.php

打开WordPress插件目录下文件:
wp-githuber-md/src/Modules/Toc.php

将如下代码:

        // Show TOC in post.
        if ( 'yes' == githuber_get_option( 'display_toc_in_post', 'githuber_modules' ) ) {

            $script .= '
                $("#md-post-toc").initTOC({
                    selector: "h2, h3, h4, h5, h6",
                    scope: ".post",
                });

                $("#md-post-toc a").click(function(e) {
                    e.preventDefault();
                    var aid = $( this ).attr( "href" );
                    $( "html, body" ).animate( { scrollTop: $(aid).offset().top - 80 }, "slow" );
                });
            ';
        }

        // Show TOC in widget area.
        if ( 'yes' == githuber_get_option( 'is_toc_widget', 'githuber_modules' ) ) {

            $script .= '
                $("#md-widget-toc").initTOC({
                    selector: "h2, h3, h4, h5, h6",
                    scope: ".post",
                });

                $("#md-widget-toc a").click(function(e) {
                    e.preventDefault();
                    var aid = $( this ).attr( "href" );
                    $( "html, body" ).animate( { scrollTop: $(aid).offset().top - 80 }, "slow" );
                });
            ';
        }

修改为:

        // Show TOC in post.
        if ( 'yes' == githuber_get_option( 'display_toc_in_post', 'githuber_modules' ) ) {

            $script .= '
                $("#md-post-toc").initTOC({
                    selector: "h1, h2, h3, h4, h5, h6",
                    scope: "body",
                }, $("#md-post-toc").parent().parent());

                $("#md-post-toc a").click(function(e) {
                    e.preventDefault();
                    var aid = $( this ).attr( "href" );
                    $( "html, body" ).animate( { scrollTop: $(aid).offset().top - 80 }, "slow" );
                });
            ';
        }

        // Show TOC in widget area.
        if ( 'yes' == githuber_get_option( 'is_toc_widget', 'githuber_modules' ) ) {

            $script .= '
                $("#md-widget-toc").initTOC({
                    selector: "h1, h2, h3, h4, h5, h6",
                    scope: "body",
                }, $("#md-post-toc").parent().parent());

                $("#md-widget-toc a").click(function(e) {
                    e.preventDefault();
                    var aid = $( this ).attr( "href" );
                    $( "html, body" ).animate( { scrollTop: $(aid).offset().top - 80 }, "slow" );
                });
            ';
        }

二、优化代码块在Xoxo主题中的显示效果

在WordPress后台控制面板中,点击菜单 Xoxo -> Theme Options 打开Xoxo设置。

点击 Custom CSS 自定义CSS设置,填入如下代码:

/* 修正 WP Githuber MD 的 代码高亮 在Xoxo主题下的样式 */
body code {
  border-left: none;
  font-style: normal;
  padding-left: 0px;
  display: inline;
}

body pre {
  width: 100%;
}

/* 修正 WP Githuber MD 生成的目录自带 ::marker 的问题 */
ol, ol * {
  list-style-type: none;
}
最后更新于 2023-07-15