我如何使用 tumblr tweets.js 文件将我的推文与附加图片一起嵌入？

Question

我一点也不擅长 javascript，但我正在编写一个 tumblr 博客 并使用他们的集成 javascript 来显示我的最后一个tweets：tumblr 为我的 twitter acc 自动生成一个脚本，目前可在 https://d-agonet.tumblr.com/tweets.js 获得。我把它放在我的页脚中，并添加了第二个脚本来获取和显示数据：（tumblr 给出了一个示例，我对其进行了一些修改，以便我可以隐藏 RT 和回复，并在推文上添加 class附有图像）：

<ul id="tweetcontainer"></ul>
            
<script type="text/javascript">
    function recent_tweets(data) {
        document.getElementById("twitterwrapper").style.display = "block";
        
        for(i = 0; i < data.length; i++) {
            if(data[i].text.startsWith("@") == false){
                if(data[i].text.startsWith("RT @") == false){
                    if(data[i].text.includes("https://t.co/") == false){
                        document.getElementById("tweetcontainer").innerHTML = document.getElementById("tweetcontainer").innerHTML + '<li><a target="_blank" href="http://twitter.com/{TwitterUsername}/status/' + (data[i].id_str ? data[i].id_str : data[i].id) + '"><div class="content">' + data[i].text + '</div></a></li>';
                    }
                    else{
                        document.getElementById("tweetcontainer").innerHTML = document.getElementById("tweetcontainer").innerHTML + '<li class="yaimg"><a target="_blank" href="http://twitter.com/{TwitterUsername}/status/' + (data[i].id_str ? data[i].id_str : data[i].id) + '"><div class="content">' + data[i].text + '</div></a></li>';
                    }
                }
            }
        }
    }
</script>

尽管代码可能看起来很丑陋，它目前按预期工作，但我注意到 tumblr 生成的 .js 文件也存储了 附加到推文的图像的网址，所以我想获取此数据并将其显示在相关推文中。

如您所见，推文的数据基本上是这样构造的：

{
    "created_at": "DATE",
    "id": SOME ID NUMBER,
    "id_str": "SOME ID NUMBER",
    "text": "TEXT FROM TWEET",
    "truncated": false,
    "entities": {
        "hashtags": [],
        "symbols": [],
        "urls": [],
        "media": [{
            "id": SOME OTHER ID NUMBER,
            "id_str": "SOME OTHER ID NUMBER",
            "indices": [XX, XX],
            "media_url": "THE IMAGE URL",
            "media_url_https": "THE IMAGE URL WITH HTTPS",
            "type": "photo",
            etc
        }]
      },
    etc
}

所以，我明白我想要得到的是我在上面所说的“带有 HTTPS 的图像 URL”，为此我需要在我的脚本末尾添加一些东西，一些东西像这样：

else{
    document.getElementById("tweetcontainer").innerHTML = document.getElementById("tweetcontainer").innerHTML + '<li class="yaimg"><a target="_blank" href="http://twitter.com/{TwitterUsername}/status/' + (data[i].id_str ? data[i].id_str : data[i].id) + '">' + data[i].entities.media.media_url_https + '<div class="content">' + data[i].text + '</div></a></li>';
}

不幸的是，它不起作用，现在带有图片的推文根本不显示。（而通过“data[i].media_url_https”的反复试验，我在推文的文本之前得到了“undefined”，而“data[i].entities”在文本之前给了我“[object Object]”。 )

我遇到了 this previous answer 这让我开始尝试使用“数据[i]。entities.media.media_url_https”并且似乎解释了如何去做，但我真的很努力理解它，我不知道如何将它应用到我的情况：/ 我猜我的问题来自于“media”是一个数组，所以它应该类似于“data[i].entities.media[?????].media_url_https”，但我不知道要在 ???? 中输入哪个数字，我尝试了 0 和 1 没有效果：/

Answer 1

我有一个可行的解决方案（它取决于 tumblr 的实现，它可能不适用于旧版浏览器）。

试试这个：

function recent_tweets(data) {
    document.getElementById("twitterwrapper").style.display = "block";

    for(i = 0; i < data.length; i++) {
      if(!data[i].text.startsWith("@") || !data[i].text.startsWith("RT @") || !data[i].text.includes("https://t.co/")){
        const media = data[i].entities?.media;
        if (media?.length) {
          const image = media[0].media_url_https;
          document.getElementById("tweetcontainer").innerHTML = document.getElementById("tweetcontainer").innerHTML + '<li><a target="_blank" href="http://twitter.com/{TwitterUsername}/status/' + (data[i].id_str ? data[i].id_str : data[i].id) + '"><div class="content">' + data[i].text + '<img src=' + image + ' /></div></a></li>';
        } else {
          document.getElementById("tweetcontainer").innerHTML = document.getElementById("tweetcontainer").innerHTML + '<li class="yaimg"><a target="_blank" href="http://twitter.com/{TwitterUsername}/status/' + (data[i].id_str ? data[i].id_str : data[i].id) + '"><div class="content">' + data[i].text + '</div></a></li>';
        }
      }
    }
  }

这里有几点需要注意。

首先在循环中测试布尔条件，然后在其中嵌套另一个布尔测试：

if(data[i].text.startsWith("@") == false){
    if(data[i].text.startsWith("RT @") == false){

相反，您可以将测试添加到一行中，然后像这样检查它们是否为假：

if(!data[i].text.startsWith("@") || !data[i].text.startsWith("RT @") || !data[i].text.includes("https://t.co/")){

II 是 OR 运算符。而不是写 if (someVar === false) 我们可以使用逻辑 NOT 运算符 !。所以if (!someVar)

如果图像确实存在，它总是在第一个索引数组中，所以我们可以这样访问它：media[0].media_url_https;.

另外需要注意的是，并不是你数据中的每个对象都包含媒体或图像属性，在这种情况下我们需要测试它是否存在然后吐出图像，如果不存在则继续并附加没有图像的 html。

使用可选链接。所以 media?.some_property 首先检查媒体对象是否存在，然后检查它是否有我们正在寻找的道具。这是 JS 中相当新的一点，因此您可能运行遇到问题。但我相信这会满足您的需求。

有关详细信息，请参阅此处： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

编辑还有一点需要注意，它不是超级关键，但它可以更好地分离布局和逻辑，目前您的标记有一个 div，稍后由 javascript 操作，但是 javascript 函数像这样嵌套在 div 中：

<div id="twitterwrapper" style="display: block;">
  <h2 class="heading" id="twitter">
    Tweets
  </h2>

  <ul id="tweetcontainer"></ul>

    <script type="text/javascript">
      function recent_tweets(data) {
          ...
      }
    </script>
</div>

通常人们倾向于在文件底部的 <body> 结束标记之前添加他们的 js 脚本。并非总是如此，但在我看来，使用 tumblr 模板是个好主意。

我如何使用 tumblr tweets.js 文件将我的推文与附加图片一起嵌入？

how do i use the tumblr tweets.js file to embed my tweets with the attached images?

javascript

twitter

tumblr