html - 对齐 `pkgdown` 文章目录 (TOC) 中的标题和副标题

Question

我正在为我的 R 包构建一个 pkgdown 网站。一切都运行良好，但我还没有弄清楚的一个自定义是如何在目录 (TOC) 中对齐文章标题和副标题。

在下图中，

• 左边:文章来 self 的ggstatsplot包网站
  ( https://indrajeetpatil.github.io/ggstatsplot/articles/web_only/effsize_interpretation.html )

• 右边:文章来自broom包网站
  ( https://broom.tidyverse.org/articles/adding-tidiers.html )

请注意，ggstatsplot 文章中目录中的标题(红色箭头)都与副标题垂直对齐，而目录broom 文章根据横向分隔来区分标题和副标题。这就是我想要的，但似乎不知道该怎么做。

简而言之:在给定标题及其下方的副标题之间创建横向分隔方面，如何将左侧的 TOC 看起来像右侧的 TOC？

这是我的包的 _pkgdown.yml: https://github.com/IndrajeetPatil/ggstatsplot/blob/master/_pkgdown.yml

Answer 1

以下 CSS 规则应该可以解决缩进问题。您可以将其添加到 pkgdown/extra.css .

#tocnav ul ul {
    margin-left: 25px;
}

CSS 将 25px 的左边距添加到 #tocnav 下的任何嵌套列表。根据需要调整边距大小。仅针对 #tocnav 是一种保守的方法，但您的 pkgdown 站点中可能还有其他地方也需要此规则。