Question

我想根据标题级别缩进TOC。

我的示例文档如下所示：

# Tutorial
## Start a new project
### Project structure
### Analysis code

我正在使用以下代码编译Rmd文档。

rmarkdown::render("foo.Rmd", 
                  output_options = HTMLlook, 
                  output_file = "foo.html")

HTMLlook <- list(toc = TRUE,
                 toc_depth = 5,
                 toc_float = list(collapsed = FALSE, 
                                  smooth_scroll = TRUE))

这会产生带有TOC的文件

但是，我希望缩进TOC（缩进等效于标题级别）。 通缉结果应如下所示：

是否可以在render中设置此选项，或者可以将css参数传递给它？

Answer 1

我不知道内置的解决方案。但这里有一点调整：

<script>
    $(document).ready(function() {
      $items = $('div#TOC li');
      $items.each(function(idx) {
        num_ul = $(this).parentsUntil('#TOC').length;
        $(this).css({'text-indent': num_ul * 10, 'padding-left': 0});
      });

    });
</script>

标题的深度实际上映射在TOC内。对于每个级别，您都会创建一个新的ul元素。这就是我们在这里使用的内容。详细说明：

文档加载完成后（$(document).ready(....）：

选择ID为TOC
对于每个列表项，计算父元素的数量，直到您到达标识为TOC的元素。这是ul元素的数量。
根据父母的数量更改当前列表项的样式。

您可以通过使用text-indent和padding-left的两个参数来调整间距。

<强> MRE：

---
title: "Habits"
author: Martin Schmelzer
date: September 14, 2017
output: 
  html_document:
    toc: true
    toc_depth: 5
    toc_float: 
      collapsed: false
      smooth_scroll: true
---

<script>
$(document).ready(function() {
  $items = $('div#TOC li');
  $items.each(function(idx) {
    num_ul = $(this).parentsUntil('#TOC').length;
    $(this).css({'text-indent': num_ul * 10, 'padding-left': 0});
  });

});
</script>

# In the morning 

## Waking up 

### Getting up

#### Take a shower

##### Make coffee

# In the evening

## Make dinner

结果如下：

Rmarkdown：HTML输出中的TOC项目缩进

1 个答案: