动态目录

function csstricks_toc($post=false) {
  global $post;
  $blocks = parse_blocks( $post->post_content );
  $headings = array();

  foreach( $blocks as $block ) {
    if( 'core/heading' === $block['blockName'] ) {
      if( false !== strpos( $block['innerHTML'], 'id=' ) ) {
        $element = 'h' . $block['attrs']['level'];
        $title = wp_strip_all_tags( $block['innerHTML'] );

      } else {
        $title = wp_strip_all_tags( $block['innerHTML'] );
      }
      
      $headings[] = $title;
    }
  }
  
  if( !empty( $headings ) ) {
    echo '<ol class="toc">';
    foreach( $headings as $heading )
    echo '<li class="toc-link"><a href="#aa-' . sanitize_title_with_dashes($heading) . '">' . $heading . '</a></li>';
    echo '</ol>';
  }
}

这个的核心来自 The SEO Guidebox。最初的片段解析帖子内容中的所有块，查找标题级别，剥离其 HTML，然后在有序列表中输出标题文本。

我真的很想让输出的文本锚定到帖子标题。 我们已经在 CSS-Tricks 上使用了一个插件，它会动态地在标题上插入 ID，因此我不需要那部分，并将其删除。然后我在列表项中添加了一个锚元素，该元素使用 sanitize_title_with_dashes() 函数将 $heading 转换为用破折号分隔的小写字符串。

唯一的问题是我们用来插入 ID 的插件会在它生成的每个 ID 前面加上 aa-。所以，我把它放进了循环中，现在我们在这个网站上有了目录组件。我们更进一步，使用了一个 ACF 字段，它允许我们有条件地插入目录。