Rmarkdown pagedreport包生成HTML报告时如何为每页添加logo

原有配置问题说明 #

使用pagedreport包的paged_windmill（windmill）模板生成报告时，默认配置下YAML中指定的logo参数仅会在封面页加载，正文内通过htmltools::img绝对定位插入的logo也只会出现在代码插入位置所属的页面，无法全局重复展示，原有配置存在三个明确问题：

• YAML参数缩进错误：toc-title、main-color、字体相关等属于paged_windmill的输出参数被顶格放置，不会被模板识别生效
• 全局元素注入方式错误：正文内插入的普通DOM元素不属于Paged.js的页面固定布局区域，无法跨页重复渲染
• 附带代码语法错误：原有img插入代码的src属性值缺失前引号，本身就无法正常运行

正确配置步骤 #

1. 修正YAML配置 #

调整参数缩进，保留顶层knit参数，将模板专属参数全部缩进至paged_windmill层级下，参考配置如下：

---
title: "Here is my Title"
subtitle: "Here is my subtitle"
author: "Here is my name"
date: "`r format(Sys.time(), '%B %Y')`"
output: 
  pagedreport::paged_windmill:
    front_img: Cover Page and Logo/cover.png
    logo: Cover Page and Logo/logo.svg
    logo_to_white: TRUE
    img_to_dark: TRUE
    toc: TRUE
    toc-title: "Table of Contents"
    main-color: "#6d1d26"
    google-font: FALSE
    main-font: "Arial"
    header-font: "Arial"
knit: pagedown::chrome_print
---

2. 删除原有错误的正文img插入代码 #

原来写在正文块里的htmltools::img代码直接删除即可，不需要保留。

3. 添加全局CSS固定logo到每页布局区域 #

在YAML下方第一个代码块位置，添加自定义CSS，将logo注入到Paged.js的页面固定边距盒子中，实现全页面展示，参考代码如下：

```{css, echo=FALSE}
/* 配置所有页面的固定区域logo，以下示例放在右上角页眉位置 */
@page {
  @top-right {
    /* 替换为你的logo实际相对路径，支持png/svg等格式 */
    content: url("Cover Page and Logo/logo.png");
    /* 按logo实际比例调整尺寸，避免拉伸 */
    width: 65px;
    height: auto;
    /* 调整边距控制logo位置 */
    margin-top: 12px;
    margin-right: 10px;
  }
}

> 注意：logo路径请统一使用相对于Rmd工程文件的相对路径，不要写本地绝对路径，避免报告在其他设备渲染时出现资源加载失败的问题。

## 自定义调整说明
- 位置修改：可将`@top-right`替换为`@top-left`/`@top-center`/`@bottom-left`/`@bottom-center`/`@bottom-right`，对应页眉左/中/右、页脚左/中/右位置
- 适配深色页面：如果报告存在深色背景页面，可单独准备白色版本logo，通过CSS页面规则单独指定深色页的logo路径
- 封面logo控制：如果不需要封面重复显示页眉logo，可单独添加封面页的CSS规则覆盖全局配置，隐藏对应区域的logo即可

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