【问题标题】:Adding logo to title slide将徽标添加到标题幻灯片
【发布时间】:2018-04-17 16:55:11
【问题描述】:

如何在标题幻灯片的顶部正确添加徽标?

经过反复试验,我想出了这个添加到 css 文件中的方法。

.title-slide.remark-slide-content:before{
  position: absolute;
  content:url(logo.svg);
  height:60px;
}

这似乎适用于一个徽标,它位于右上角。我也想在左上角添加另一个徽标。有没有更好的方法来做到这一点?

【问题讨论】:

    标签: xaringan


    【解决方案1】:

    一种方法是使用带有一些 div 的 seal: false 创建自定义标题幻灯片。

    ---
    title: "Presentation Ninja"
    subtitle: "⚔<br/>with xaringan"
    author: "Yihui Xie"
    date: "2016/12/12"
    output:
      xaringan::moon_reader:
        lib_dir: libs
        nature:
          highlightStyle: github
          highlightLines: true 
          countIncrementalSlides: false
        seal: false
    ---
    
    <div class="my-logo-left"></div>
    
    <div class="my-logo-right"></div> 
    
    # hello
    
    ---
    

    CSS

    .my-logo-left {
    content: "";
        position: absolute;
        top: 15px;
        left:   20px;
        height: 40px;
        width: 120px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(https://www.r-project.org/logo/Rlogo.png);
    }
    
    .my-logo-right {
    content: "";
        position: absolute;
        top: 15px;
        right:   8px;
        height: 40px;
        width: 120px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(https://www.r-project.org/logo/Rlogo.png);
    }
    

    【讨论】:

    • 我不知道“密封”选项。此解决方案是否在标题幻灯片上添加徽标? IE; YAML 问题在哪里显示?标题:“演示忍者” 副标题:“⚔ with xaringan”等
    • 当使用seal: false 时,YAML 信息不再解析为标题幻灯片,因为它是用于此幻灯片的新 CSS 类(不再是 .title-slide)。您需要再次添加它并根据您的需要格式化幻灯片(例如居中)。
    • 如果我要进一步深入研究,添加一些新的 YAML 选项(如 logo_right:bla.svglogo_left:bla.svg 和一些默认 CSS)会不会太复杂?
    • Idk,您需要在moon_reader() 中添加由rmarkdown 解析的新选项。我认为它对于结果来说太复杂了,并且seal: false 解决方法要快得多。获得所需的标题幻灯片后,您可以简单地在其他演示文稿中重复使用它。
    • @rmf 的答案是否足以让您被接受?
    猜你喜欢
    • 1970-01-01
    • 2016-08-15
    • 2014-05-17
    • 1970-01-01
    • 1970-01-01
    • 2022-08-21
    • 2016-12-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多