使用YouTube API在Jekyll中获取视频标题出现异常

你碰到的这个问题根源很明确——document.write()的使用时机错误。当页面已经完全加载完成后调用document.write()，它会直接清空整个现有文档，然后写入新内容，这就是为什么你的博客内容全没了，只剩视频标题。

修复方案：替换document.write()为DOM元素插入 #

我们需要把视频标题插入到页面指定的位置，而不是重写整个文档。具体步骤如下：

1. 修改JavaScript函数：
   将原来用document.write()输出标题的逻辑，改成找到页面中预先准备好的容器元素，把标题赋值给它的内容：

   function getyoutubetitle(videoID) {
     $.getJSON('https://www.googleapis.com/youtube/v3/videos?id='+videoID+'&key=AIzaSyDfqskjJZVzNMKVs1c7dXvlDC2rpjrB60&part=snippet&callback=?',function(data){
       if (typeof(data.items[0]) !== "undefined") {
         // 定位到对应视频ID的标题容器
         const titleContainer = document.getElementById(`youtube-title-${videoID}`);
         if (titleContainer) {
           // 用textContent插入纯文本标题，避免XSS风险
           titleContainer.textContent = data.items[0].snippet.title;
         }
       } else {
         console.log('Video does not exist or API request failed');
       }
     });
   }
   

2. 在页面中添加标题容器：
   在你想要显示视频标题的位置，插入一个带有唯一ID的容器（ID和视频ID关联，避免冲突）：

   <!-- 这里是你想显示标题的位置 -->
   <span id="youtube-title-iClTTtecJhs"></span>
   
   <!-- 调用函数获取标题 -->
   <script>getyoutubetitle("iClTTtecJhs");</script>
   

为什么这样能解决问题？ #

document.write()只有在浏览器正在解析HTML文档的时候使用才是安全的。而你的YouTube API请求是异步的，当请求完成并触发回调函数时，页面已经加载完成了，此时调用document.write()会强制浏览器打开一个新的空白文档，覆盖掉原来的博客内容。

通过DOM元素插入的方式，我们只是更新页面中指定区域的内容，完全不会影响页面的其他部分。

额外优化建议（针对Jekyll静态站点） #

如果你的视频ID是固定不变的，其实可以在Jekyll构建站点的时候就预先获取视频标题，而不是在客户端异步请求。这样既避免了客户端可能出现的问题，也能减少API请求次数，提升页面加载速度。你可以借助Jekyll的Ruby插件或者前置脚本实现这一点。

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