为主题增加文章目录、代码高亮功能

前天发布了WordPress友链和博友圈rss单页模板代码,苦于Blocksy默认没有文章目录和代码高亮功能,阅读过长及有代码的文章障碍重重。

传送门:https://feng.pub/0820235378.html

解决方案

文章目录采用WPJAM插件的扩展功能文章目录实现,代码高亮使用Highlight.js实现。并将相关代码写入子主题样式,以适应当前主题。

WPJAM文章目录

使用方式传送门:https://blog.wpjam.com/m/wpjam-toc/

自定义了CSS及JavaScript代码。

CSS代码:

/* 文章目录 */
#toc {
    position: fixed;
    top: 200px;
    left: 15px;
    width: 170px;
    padding: 0px 15px;
    font-size: 12px;
    line-height: 24px;
    border-radius: 5px;
    background-color: var(--theme-palette-color-8);
    box-shadow: 0 0 5px gray;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    overflow: hidden;
    z-index: 2;
}

.toc-hide {
    display: block;
    width: 40px !important;
    height: 40px;
    padding: 0px !important;
    background-color: var(--theme-palette-color-1) !important;
    border-radius: 50px !important;
}

.toc-hide .toc-title strong {
    font-size: 0px;
}

.toc-hide .toc-title span {
    top: 0px;
    right: 0px;
    color: var(--theme-palette-color-8);
    background-color: var(--theme-palette-color-1);
}

.toc-title {
    padding: 10px 0;
    margin-bottom: 0px;
    font-size: 16px;
}

.toc-title span {
    position: absolute;
    right: 5px;
    top: 5px;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    border-radius: 100%;
    background-color: var(--theme-palette-color-6);
    cursor: pointer;
}

.toc-title span:hover {
    box-shadow: 0 0 5px gray;
}

#toc ul {
    padding: 5px 0 5px 10px;
}

#toc>ul {
    width: 150px;
}

JavaScript代码:

// 文章目录
const toc = document.querySelector('#toc')
const tocController = document.querySelector('#toc .toc-controller')
if (tocController) {
	// 默认为展开
	document.querySelector('.toc-title strong').innerHTML = '目录'
	tocController.innerHTML = '隐藏'
	tocController.setAttribute('title', '隐藏文章目录')
	setTimeout(() => {
		if (document.querySelector('.toc-controller-show')) {
			tocToggle()
		}
	}, 2000)
	tocController.addEventListener('click', e => {
		tocToggle()
	})
}

function tocToggle() {
	toc.classList.toggle('toc-hide')
	tocController.classList.toggle('toc-controller-show')
	if (tocController.classList.contains('toc-controller-show')) {
		tocController.innerHTML = '隐藏'
		tocController.setAttribute('title', '隐藏文章目录')
	} else {
		tocController.innerHTML = '目录'
		tocController.setAttribute('title', '显示文章目录')
	}
}

Highlight.js代码高亮

准备文件

  1. 下载highlight.js代码:https://highlightjs.org/download
  2. 下载显示行号插件:https://github.com/taufik-nurrohman/highlight.ln.js
  3. 下载复制按钮插件:https://github.com/semaz/highlightjs-copy-button.js

2、3不是必须的,作为了解即可。

详细教程可查阅文档:https://highlightjs.readthedocs.io/en/latest/

functions.php相关代码

add_action('wp_enqueue_scripts', function () {
        wp_enqueue_style('blocksy-feng-highlight-css', get_stylesheet_directory_uri() .  '/dist/hljs/styles/github.min.css', array());   
        
        wp_enqueue_script('blocksy-feng-highlight-js', get_stylesheet_directory_uri() . '/dist/hljs/highlight.min.js', array(), '1.1.0', true);
        wp_enqueue_script('blocksy-feng-highlight-js-copy', get_stylesheet_directory_uri() . '/dist/hljs/highlightjs-copy-button.min.js', array(), '1.1.0', true);
        wp_enqueue_script('blocksy-feng-highlight-js-ln', get_stylesheet_directory_uri() . '/dist/hljs/highlight.ln.min.js', array(), '1.1.0', true);   
    });

CSS相关代码:

/* highlightjs 代码高亮 */
.wp-block-code {
    position: relative;
    padding: 0;
}

.wp-block-code code {
    font-size: 14px;
    white-space: inherit;
}

.hljs {
    position: unset !important;
}

JS相关代码:

hljs.highlightAll();
hljs.initHighlighting();
hljs.initCopyButtonOnLoad();

以上代码稍显粗糙,GitHub国内访问十分不稳定,经常访问不到,每次去GitHub抄代码都是十分痛苦的事情。

guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

18 评论
最新
最旧
内联反馈
查看所有评论
团团

但是我这里看 代码好像都显示在左边了,不知道是Edge浏览器的问题还是bug

来自广东
小熊

大佬自己动手丰衣足食,不像我想自己动手都没能力

来自四川
威言威语

代码高亮highlight.js相比而言,我还是喜欢Prism.js,应用更加方便一些,可以自己选择用哪些插件,比如行号,复制之类的。

来自上海
你当向往阳

这我玩不来,还不错

来自江西
网友小宋

之前折腾过,然后失败了,现在只能说句不错。

来自广东
face

这模板真的越来越看看!手动点赞?不过大佬用粉色,确实有点少女心?

来自广东
紫慕

github不稳定,你或许需要一个梯子。

来自湖北
小小的小

有个bug个,safari手机端上,目录点击隐藏按钮没效果

来自四川
S̆̈

代码高亮highlight.js还是比较原始的,有一个插件crayon-syntax-highlighter的样式非常之多也很美观。我以前用了highlight很久,看腻了后现在回归纯素颜本真了。

来自江苏
小彦

不错,我也用了 highlight 做代码高亮,但是感觉高亮效果没别人的那些那么丰富,只有少量语法高亮了

来自广东