如何在RMarkdown HTML文档中自定义带页码和点线的目录？

问题描述 #

我用RMarkdown的pagedreport::paged_windmill模板生成HTML文档时，想给目录做两个修改：

1. 每个目录项后面显示对应章节的页码；
2. 把目录项的下划线改成点线样式。

当前的YAML配置如下：

---
title: "Document Title"
subtitle: "Document Subtitle"
author: "My Name"
date: "`r format(Sys.time(), '%B %Y')`"
output: 
  pagedreport::paged_windmill:
    front_img: Cover Page and Logo/cover.png
    logo: Cover Page and Logo/logo.svg
    logo_to_white: TRUE
    img_to_dark: TRUE
    toc: TRUE
    number_sections: TRUE
knit: pagedown::chrome_print
toc-title: "Table of Contents"
main-color: "#6d1d26"
google-font: FALSE
main-font: "Arial"
header-font: "Arial"
---

解决方案 #

直接在RMarkdown文档的YAML配置之后插入自定义CSS代码块，修改目录样式即可实现需求：

```{css, echo=FALSE}
/* 自定义目录样式：添加页码+替换下划线为点线 */
.toc-item a {
  text-decoration: none; /* 去掉默认下划线 */
  display: flex;
  justify-content: space-between; /* 标题和页码两端对齐 */
}

.toc-item a::after {
  content: "";
  flex-grow: 1;
  border-bottom: 1px dotted #000; /* 点线样式，颜色可自行调整 */
  margin: 0 10px;
  align-self: center;
}

.toc-item a .page-ref {
  order: 2; /* 确保页码显示在右侧 */
}

#### 样式说明
- `.toc-item a`：移除目录链接的默认下划线，用flex布局让标题和页码分别居左、居右；
- `.toc-item a::after`：通过伪元素生成点线分隔符，`border-bottom: 1px dotted #000`可调整点线的粗细和颜色；
- `.toc-item a .page-ref`：调整页码元素的排列顺序，保证它显示在右侧。

注意：要确保YAML配置里的`number_sections: TRUE`已开启，这是模板生成章节页码关联的前提。

内容的提问来源于stack exchange，提问作者Tanga94