javascript - 使用 api 从 youtube 收集标题会在 jekyll 中产生奇怪的行为

Question

我使用以下代码在我的 jekyll 博客中获取 YouTube 标题。

<script type="text/javascript">
    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") {
                document.write(data.items[0].snippet.title);
            } else {
                console.log('video not exists');
            }
        });
    }
</script>

当使用<script>getyoutubetitle("iClTTtecJhs");</script>时我重新加载页面，只给出视频标题，而博客的所有其他内容都消失了。

http://songs.justinechacko.in/malayalam/2018/02/01/file5.html

Answer 1

您的错误是您只是向页面写入内容。您需要重写要显示标题的特定 HTML 节点。

例如，如果您想更改 ID 为 videoTitle01 的 header 文本，则可以执行以下操作:

<script type="text/javascript">
    function getyoutubetitle(nodeID, videoID) {
        let node = '#' + nodeID;
        let apiKey = 'AIzaSyDfqskjJZVzNMKVs1c7dXvlDC2rpjrB60';
        let url = 'https://www.googleapis.com/youtube/v3/videos?id=' + videoID + '&part=snippet&key=' + apiKey;
        $.getJSON(url, function(data){
            if (data && data.items && data.items[0]) {
                $(node).text(data.items[0].snippet.title);
            } else {
                console.log('video not exists');
            }
        });
    }
</script>

...

<script>
    getyoutubetitle('videoTitle01','iClTTtecJhs');
</script>
<h1 id="videoTitle01"><h1>