一、修正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;
}
Comments NOTHING