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

前天发布了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抄代码都是十分痛苦的事情。