r - 使用 Rmarkdown (pagedown) 和更改目录

Question

大家好，我试图解决这个问题，但我无路可走:

这是我的代码:

---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
  pagedown::html_paged:
    toc: true
    toc_depth: 3
    # change to true for a self-contained document, but it'll be a litte slower for Pandoc to render
    self_contained: false
---

# Exercise 1{-}

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 1 <!--Padding is optional-->
  </span>
</div>

我想维护目录结构。换句话说，我想点击“练习 1”，它会将我带到练习一的页面。 但是 我希望标题是下面这个自定义标题(我想点击“练习 1” e 只看到下面的练习 1 样式):

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 1 <!--Padding is optional-->
  </span>
</div>

我清楚吗？

例如，如果我这样做:

# {-}
<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 1 <!--Padding is optional-->
  </span>
</div>

我的目录中的“练习 1”一词消失了。

非常感谢您的帮助

劳拉

Answer 1

目录由 Pandoc 自动构建:其条目严格对应于章节标题。这就是为什么在最后一个示例(带有 # {-} 的示例)中，“练习 1”一词在 TOC 中消失的原因。

有很多方法可以实现您的目标。鉴于您的示例，最直接的方法可能是使用 CSS。

考虑到这条 Markdown 线

# Exercise 1{-}

导致这个 HTML 片段

<div id="exercise-1" class="section level1 unnumbered">
  <h1>Exercise 1</h1>
  ...
</div>

您可以隐藏 h1具有以下 CSS 声明的内容:

h1 {
  display: none;
}

对于这么小的 CSS，你可以使用 knitr您的 CSS 引擎 Rmd文件:

---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
  pagedown::html_paged:
    toc: true
    toc_depth: 3
    # change to true for a self-contained document, but it'll be a litte slower for Pandoc to render
    self_contained: false
---

```{css, echo=FALSE}
h1 {
  display: none;
}
```

# Exercise 1{-}

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 1 <!--Padding is optional-->
  </span>
</div>