Quarto网站自定义光标路径异常问题求助

核心修复步骤 #

1. 修正页面YAML的类名参数
   Quarto中设置页面body类的正确参数是body-class（连字符），你之前用的body_class（下划线）无法被识别，导致body标签没有添加目标类，CSS选择器自然不生效。同时，页面格式声明要改用Quarto的html格式（而非Rmarkdown的html_document）：
   修改about.qmd的YAML部分：

---
title: "About Page"
format:
  html:
    body-class: "about-page"
---

2. 调整光标图片路径
   Quarto网站渲染后，CSS文件会被打包到_site/css目录，而页面文件在_site根目录。如果cursor.png在项目根目录，需调整CSS中的路径：

/* css styles */
body.about-page {
    cursor: url('../cursor.png'), auto;
}

或者使用网站根相对路径（更稳定，不受文件结构变化影响）：

body.about-page {
    cursor: url('/cursor.png'), auto;
}

3. 确认文件匹配性
   确保cursor.png的文件名、大小写和CSS中完全一致，且确实放在项目根目录（和index.qmd、styles.css同层级）。

额外排查建议 #

如果修复后仍不生效：

• 手动删除_site目录，重新执行渲染命令，避免缓存干扰。
• 打开浏览器开发者工具，检查body标签是否带有about-page类，同时查看网络请求确认光标图片是否成功加载（若显示404则路径仍有问题）。

关于你提到的Quarto是否会像Rmarkdown那样省略CSS的情况，本次问题并非源于此，但如果上述步骤都无效，可以尝试将CSS直接写在页面的<style>标签内测试，排除外部CSS加载的问题。

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