如何在独立Quarto HTML文件中添加可保存的读者评论功能？

由于Dropbox仅支持托管静态HTML文件，无法运行服务器端代码，以下提供两种适配场景的解决方案：

方案1：纯前端本地存储评论（适合个人记录，无需跨用户共享） #

该方案将评论数据保存在读者的浏览器本地（localStorage），无需依赖任何后端服务，完全适配Dropbox托管环境。

实现步骤： #

1. 在你的Quarto文档（.qmd）头部指定加载自定义评论组件：

---
title: "带评论功能的报告"
format:
  html:
    include-after-body: comments.html
---

# 报告内容
这里是你的报告正文...

2. 创建名为comments.html的文件，放在和.qmd同目录下，内容如下：

<div id="comment-section" style="margin-top: 30px; padding: 20px; border-top: 1px solid #eee;">
  <h3>评论区</h3>
  <textarea id="comment-input" rows="4" placeholder="写下你的评论..." style="width: 100%; margin-bottom: 10px; padding: 8px; border-radius: 4px; border: 1px solid #ddd;"></textarea>
  <button id="submit-comment" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">提交评论</button>
  <div id="comments-list" style="margin-top: 20px;"></div>
</div>

<script>
// 加载已保存的评论
function loadComments() {
  const comments = JSON.parse(localStorage.getItem('reportComments')) || [];
  const list = document.getElementById('comments-list');
  list.innerHTML = comments.map((comment, index) => `
    <div style="padding: 12px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px;">
      <p style="margin: 0 0 8px 0;">${comment.text}</p>
      <small style="color: #666;">${new Date(comment.timestamp).toLocaleString()}</small>
      <button onclick="deleteComment(${index})" style="margin-left: 10px; padding: 4px 8px; background: #dc3545; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;">删除</button>
    </div>
  `).join('');
}

// 提交评论
document.getElementById('submit-comment').addEventListener('click', () => {
  const input = document.getElementById('comment-input');
  const text = input.value.trim();
  if (text) {
    const comments = JSON.parse(localStorage.getItem('reportComments')) || [];
    comments.push({
      text: text,
      timestamp: Date.now()
    });
    localStorage.setItem('reportComments', JSON.stringify(comments));
    input.value = '';
    loadComments();
  }
});

// 删除评论
function deleteComment(index) {
  const comments = JSON.parse(localStorage.getItem('reportComments')) || [];
  comments.splice(index, 1);
  localStorage.setItem('reportComments', JSON.stringify(comments));
  loadComments();
}

// 页面加载时自动加载评论
window.addEventListener('load', loadComments);
</script>

3. 用Quarto编译生成HTML文件，上传到Dropbox即可。

说明： #

• 评论仅保存在当前读者的浏览器中，不同读者无法互相查看评论
• 清空浏览器缓存或换设备会丢失已保存的评论

方案2：跨用户共享评论（需额外工具，规避外链跳转） #

如果需要让所有读者都能看到彼此的评论，可借助Google Sheets作为轻量后端（通过Google Apps Script编写接口），但需注意：

• 需自行编写简单的Apps Script接口，将评论提交到Google Sheets并拉取
• 可在HTML中直接通过AJAX调用接口，无需跳转第三方网站
• 该方案需要你拥有Google账号并配置脚本权限

由于配置步骤较繁琐，若仅需个人记录评论，优先选择方案1。

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