使用Go渲染HTML时script标签出现属性赋值错误原因排查

编辑器假报错的问题 #

你看到的JavaScript语法错误是编辑器（如VS Code）的假报错——它无法识别Go模板注入的{{.QuotesJSON}}变量，所以会误判语法问题，但实际渲染到浏览器后，只要QuotesJSON是合法的JSON，这段代码是能正常运行的。

解决编辑器报错的小技巧：用注释包裹模板变量，让语法检查忽略它：

<script>
var quotes = /* {{.QuotesJSON}} */ [];
</script>

渲染后注释会被替换成真实的JSON数据，不影响功能。

轮播仅显示一条名言的核心问题 #

重点检查以下两个环节：

1. Go侧JSON序列化是否正确 #

确保你是用json.Marshal将名言切片序列化为合法的JSON数组，再转为template.JS：

import (
    "encoding/json"
    "html/template"
)

// 假设你的名言结构体
type Quote struct {
    Content string `json:"content"`
    Author  string `json:"author"`
}

// 获取API数据后序列化
quotes, err := fetchQuotesFromAPI() // 你的API获取逻辑
if err != nil {
    // 错误处理
}

quotesJSONBytes, err := json.Marshal(quotes)
if err != nil {
    // 错误处理
}

data := struct {
    QuotesJSON template.JS
}{
    QuotesJSON: template.JS(quotesJSONBytes),
}

如果直接拼接字符串生成JSON，很容易出现格式错误（比如引号未转义、缺少逗号等），导致JS无法解析为数组，自然无法轮播。

2. JavaScript轮播逻辑是否完整 #

检查你的JS代码是否正确实现了轮播逻辑，比如：

<div id="quote-container">
    <p id="quote-content"></p>
    <p id="quote-author"></p>
</div>

<script>
var quotes = {{.QuotesJSON}};
var currentIndex = 0;
const contentEl = document.getElementById('quote-content');
const authorEl = document.getElementById('quote-author');

function updateQuote() {
    const quote = quotes[currentIndex];
    contentEl.textContent = quote.content;
    authorEl.textContent = `- ${quote.author}`;
    // 切换到下一条，循环轮播
    currentIndex = (currentIndex + 1) % quotes.length;
}

// 初始化显示第一条
updateQuote();
// 每5秒切换
setInterval(updateQuote, 5000);
</script>

如果缺少初始化显示、定时器逻辑，或者索引切换错误，就只会停留在第一条名言。

验证步骤 #

1. 在浏览器中打开页面，右键查看源码，确认<script>里的quotes变量是完整的JSON数组（比如var quotes = [{"content":"xxx","author":"xxx"},...]）。
2. 打开浏览器控制台，输入quotes，检查是否能正常输出数组，数组长度是否大于1。

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