html - 如何使用 flexdashboard 添加指向徽标的链接？

Question

在flexdashboard doc page之后，我在仪表板中添加了一个徽标。现在我希望能够单击徽标并重新定向到外部页面。

我知道您可以使用 r-markdown 超链接图像，例如：

[![alt text](path to image)](web link to website)

我只是在努力将其集成到 flexdashboard 导航栏中的徽标中。有人知道怎么做吗？谢谢！

我用这些行添加了徽标：

---
title: "My Report"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    css: style.css
    logo: my-logo.png
---

标签： htmlrr-markdownflexdashboard

Answer 1

一种方法是使用 jQuery 在加载过程中更改徽标。在您的 YAML 标头下方添加这些行：

<script>
$('.navbar-logo').wrap('<a href="http://www.google.com">');
</script>

我们只需选择属于该类的 HTML 元素navbar-logo并在其周围包裹一个超链接标签。

如果您希望外部网站在新选项卡中打开，请添加target=_blank到a元素：

<a href="http://www.google.com" target=_blank>