如何在RMarkdown的ioslides演示文稿中通过CSS将标题页logo置右

解决方案 #

logo位置微调 #

你当前的CSS已经实现了灰色栏居右的效果，仅需调整.gdbar img的边距属性即可实现logo左移，修改后的完整CSS如下：

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  /* margin参数顺序为上、右、下、左，增大右侧边距数值即可让logo向左偏移，可根据实际需求调整数值 */
  margin: 8px 35px 8px 8px !important;
  /* 若需要更灵活的位移控制，也可以追加以下属性，-20px代表向左移动20px，可自定义数值 */
  /* transform: translateX(-20px); */
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

调整后logo头像朝向左侧的正文内容，完全符合设计规范要求。

gdbar原生代码位置说明 #

gdbar的默认样式定义在rmarkdown包内置的ioslides主题文件中，你可以在R控制台运行以下命令获取本地文件的实际路径：

# 查看默认ioslides css文件路径，gdbar的原始样式就在该文件中
system.file("rmd/ioslides/ioslides-13.5.1/ioslides.css", package = "rmarkdown")
# 查看默认ioslides pandoc模板路径
system.file("rmd/ioslides/default.html", package = "rmarkdown")

如果需要深度自定义主题，可将默认模板复制到项目目录修改后，在RMarkdown的YAML头部指定自定义模板即可：

output:
  ioslides_presentation:
    template: "自定义模板路径.html"
    css: "自定义样式路径.css"

内容的提问来源于stack exchange，提问作者Famondir