在 flexdashboard 中结合故事板和 .no-mobile？

Question

在 flexdashboard 中，可以轻松创建带有故事板的仪表板，请参见此处：

https://rstudio.github.io/flexdashboard/articles/using.html#storyboards-1

此外，很容易根据mobile/not移动设备获得特定的输出；

https://pkgs.rstudio.com/flexdashboard/articles/using.html#mobile-css

但是我怎样才能将两者结合起来呢？每当我这样做时，移动版本都会以任何一种方式显示（空白页）

---
title: "Storyboard"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### Chart 1

```{r}
print("non-mobile")
```   
 
### Chart 1 {.mobile}
    
```{r}
print("mobile")
```

运行代码仅显示 2 个选项卡，名称分别为图表 1、图表 1

Answer 1

您没有遵守 YAML 中输出的附加规范的缩进性质。它不会与它一起工作。

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

更新：这不好玩。但是，当我想出这样的事情时，我感到非常欣慰！

好吧，事情是这样的，移动版本在听，但是storyboard-not-so-mobile忽略了你。

我确实在 flexdashboard.js 中找到评论，移动性取决于布局是否设置为 fill。故事板本质上不止一页，因此不符合此要求。所以，我做了一个解决方法。

我想警告并声明，我无法想象您可以用多种方式标记您的 ### 部分，也无法想象 flexdashboard 将如何翻译几乎无限可能的标签。此代码应适用于字母、数字和 space 的任意组合。它可能需要调整 ### 具有特殊字符。

对于您的每个部分 (###)，请使用 {.mobile} 或 {.no-mobile} 对其进行标记。对于两者的可用性，没有标签。（请参阅我的代码以了解我的意思。这就是您所做的。

对于每个 R 块的输出选项，添加 class="mobile" 或 class="no-mobile"。同样，在两者中使用时不需要 class。确保这些标签中的大小写统一。不要在块选项中的 = 周围添加白色 space。

连同您问题中的 YAML：

### Let the charting begin {.no-mobile}
  
```{r showMePlease, class="no-mobile"}

plot(x = 1:100, y = 100:1)

```   

### Chart 2 {.mobile}

```{r errrr, class="mobile"}

plot(x = 1, y = 3)

```

### Chart 3 {.mobile}

```{r meow,class="mobile"}

plot(x = 3, y = 3)

```

### Chart 4 {.no-mobile}

```{r pppplotttt, class="no-mobile"}

plot(x = 10, y = 30)

```

下一个块可以放在你的 RMD 中的任何地方，但它必须在那里。如果你尝试运行这个块而不编织，它不会做任何事情。（Javascript 仅在 RMD 中编织时有效。）

```{r grrr,results="as-is",engine="js"}

grrr = document.body; // there is no DOM! (sigh)
setTimeout(function(){
  gimme = grrr.querySelectorAll('div.mobile');
  for(i = 0; i < gimme.length; i++) {
    // with each of the elements, collect the id labels
    // these labels match the storyboards
    gId = gimme[i].getAttribute('id');
    gId = gId.replace("-", " "); // all heading spaces get hyphens
                                 // need to prepare for matching
    // find the storyboards
    showMe = grrr.querySelectorAll('ul > li');
    for(j = 0; j < showMe.length; j++) {
      //if the story board matches a mobile plot, get rid of it
      if(showMe[j].textContent.toLowerCase() === gId) {
        showMe[j].style.display = "none";
      }
    }
  }
}, 100); //delay!!
```

这是故事板和移动版本。

在 flexdashboard 中结合故事板和 .no-mobile？

Combine storyboard and .no-mobile in flexdashboard?

r

r-markdown

flexdashboard