代码之家  ›  专栏  ›  技术社区  ›  Omri. B

r标记“保存”html页面的确切位置

  •  0
  • Omri. B  · 技术社区  · 5 年前

    ---
    title: "Page 1"
    author: "--"
    date: "22 9 2020"
    output: html_document
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    ```
    
    ### Header
    
    example text.
    
    #### example plot 1.
    
    ```{r cars}
    plot(cars)
    ```
    
    more example text
    
    #### example plot 2.
    
    ```{r pressure, echo=FALSE}
    plot(pressure)
    ```
    
    link to [Page 2](./Page-2.html)
    

    和第2页:

    ---
    title: "Page 2"
    author: "--"
    date: "22 9 2020"
    output: html_document
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    ```
    
    ### Header
    
    example text.
    
    #### example plot 1.
    
    ```{r cars}
    plot(cars)
    ```
    
    more example text
    
    #### example plot 2.
    
    ```{r pressure, echo=FALSE}
    plot(pressure)
    ```
    
    [Page 1](./Page-1.html)
    

    谢谢

    0 回复  |  直到 5 年前
        1
  •  1
  •   Martin C. Arnold    5 年前

    此功能不适用于rmarkdown/knitr的HTML输出。但是,您可以使用javaScript(jquery)轻松实现这一点:

    其想法是包含一个小脚本,将最后一个滚动位置保存在一个变量中(我称之为 ScrPos 在本地内存中,并在页面(重新)加载时恢复滚动位置。

    header.html

    <script type="text/javascript">
      // check if ScrPos is available. If so, scroll to ScrPos
      $(function() {
        if (localStorage.ScrPos) {
          $(window).scrollTop(localStorage.ScrPos);
        }
      });
    
      // save last scroll position  to ScrPos before page unload
      $(window).on("beforeunload", function() {
        var ScrPos = $(window).scrollTop();
        localStorage.setItem("ScrPos", ScrPos);
      });
    </script>
    

    header.html 在YAML头文件(两个.rmd文件)中,如下所示:

    output: 
      html_document:
        include:
          in_header: header.html
    

    注意 header.html

        2
  •  1
  •   Abdessabour Mtk    5 年前

    对于第二个图形部分的链接,可以使用 div 用于第二个图形的id,可以通过显式指定它,也可以通过使用将间隔的节标题转换为虚线分隔的节标题 `example plot 2.` => id = `example-plot-2.` 即:

    #### example plot 2.{#second_graph}
    
    ```{r pressure, echo=FALSE}
    plot(pressure)
    ```
    
    [Page 1](./Page-1.html)
    

    然后在第一页中,只需将id添加到链接,即:

    link to [pressure graph](./Page-2.html#second_graph)