使用开源WordPress内容目录插件

当前网站使用的内容目录插件（Table of Contents）是克隆了一个开源WordPress插件，然后修改一下源码来更适用于当前网站。

原项目 #

原项目是有Human Made这家公司开发的：https://github.com/humanmade/hm-table-of-contents-plugin，因为没有看到license文件，所以提交了一个issue问了下项目贡献者：https://github.com/humanmade/hm-table-of-contents-plugin/issues/11，得到回复：

Hi @heybran, as with all WordPress plugins, this is licensed under the GPL v2 or later, so you’re welcome to use and modify it 🙂

源码改动 #

原项目是将Table of Contents写到了php文件中，而当前网站需要用到中文“内容目录”，所以需要增加一个heading属性用来修改标题内容，另外，当目录插件添加到details元素中时，则可以不显示标题，所以还需要一个showHeading属性。

<ToggleControl
	label={ __( 'Show Heading', 'hm-table-of-contents' ) }
	checked={ !!attributes.showHeading }
	onChange={ (showHeading) => setAttributes({ showHeading }) }
/>
<TextControl
	label={ __( 'Heading', 'hm-table-of-contents' ) }
	value={ attributes.heading }
	onChange={ (heading) => setAttributes({ heading }) }
/>

$show_heading = isset( $attributes['showHeading'] ) ? $attributes['showHeading'] : true;
$heading = $attributes['heading'] ?? '';

// ...

if ( $show_heading && $heading ) {
	echo '<h2>' . esc_html( $heading ) . '</h2>';
}

PR详情：https://github.com/heybran/wp-table-of-contents-plugin/pull/1/files

Custom CSS #

如果当前页面没有h2标题，那么则可以隐藏details元素。

.details-with-toc:not(:has(.hm-table-of-contents)) {
  display: none;
}

更新：从Gutenberg切换到经典编辑器，页面目录已丢失，回头需要动过手动<code>render_block()</code>添加到网站模版当中。