R markdown HTML 文件中自定义和反应图的编号标题

Question

近年来，已经可以在 中的 R 块上的图形标题中添加编号html_document2，如 Yihui Xie 的在线文本 for bookdown 中所述。但是，在保留这些编号的同时还要从这些块中输出自定义数字变得更加困难。例如，尝试使用 Carson Sievert在线文本中的CSS flexbox 创建自定义图形。

还有其他几个线程讨论对HTML Rmd 数字进行编号以及使用钩子或 CSS 计数器添加自定义编号。但是，我找不到允许保留自定义图形和html_document2编号的解决方案。

在下面的例子中，我想要一个并排的绘图图形对屏幕大小有反应，但也有相同的图形标题和编号。

---
output: 
  bookdown::html_document2:
    self-contained: TRUE
---

```{css, echo=FALSE}
#dualpanel {
  width: 50%
}

@media screen and (max-width: 500px) {
  #dualpanel {
    width: 100%
  }}
```
```{r chunk1, echo=FALSE, htmlcap='FIRST FIGURE CAP'}
temp <- plotly::plot_ly(mtcars, x = ~cyl, y=~mpg)
shiny::div(class = 'figure',
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  shiny::div(temp, id = 'dualpanel'), 
  shiny::div(temp, id = 'dualpanel'))
```

```{r chunk2,  echo=FALSE, fig.cap='SECOND FIGURE CAP'}
plot(mtcars$cyl, mtcars$mpg)
```

这将创建如下输出：

Answer 1

为了解决这个问题，重要的是要知道在 pandoc 中knitr使用#fig:label以便在输出中创建自动编号。当您检查 knitr 进程的降价临时输出时，您可以看到这一点：

<div class="figure">
<img src="web_tiles_v2_files/figure-html/otherchunk-1.png" alt="SECOND FIGURE CAP"  />
<p class="caption">(\#fig:SPECIFICCHUNKOFINTEREST)SECOND FIGURE CAP</p>
</div>

因此，应该能够通过调整其他解决方案中看到的自定义钩子来维护自定义图形输出。这将如下所示，只需确保包含正确的块标签：

```{r}
knit_hooks$set(customcap= function(before, options, envir) {
  if(!before) {
    paste('<p class="caption"> (\\#fig:chunk1)',options$customcap,"</p>",sep="")
    }
    })
```

还可以使用一些内部knitr函数来自动获取fig.lp和label：paste('<p class="caption">', knitr:::create_label(options$fig.lp, options$label), options$customcap,"</p>", sep="")

整个代码如下所示：

---
output: 
  bookdown::html_document2:
    self-contained: TRUE
---

```{css, echo=FALSE}
#dualpanel {
  width: 50%
}

@media screen and (max-width: 500px) {
  #dualpanel {
    width: 100%
}}
```

```{r}
knit_hooks$set(customcap= function(before, options, envir) {
  if(!before) {
    paste('<p class="caption"> (\\#fig:chunk1)',options$customcap,"</p>",sep="")
    }
    })
```


```{r chunk1, echo=FALSE, customcap='FIRST FIGURE CAP'}
temp <- plotly::plot_ly(mtcars, x = ~cyl, y=~mpg)
shiny::div(class = 'figure',
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  shiny::div(temp, id = 'dualpanel'), 
  shiny::div(temp, id = 'dualpanel'))
```

```{r chunk2,  echo=FALSE, fig.cap='SECOND FIGURE CAP'}
plot(mtcars$cyl, mtcars$mpg)
```

这会产生一个具有动态元素并保持标签的输出。