使用 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>

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

Collecting title from youtube using api give strange behavior in jekyll

javascript

jekyll

youtube-data-api