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

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

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

<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 文件还存储了附加到推文的图像的 url ，所以我想获取这些数据并将其显示在相关推文上。

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

{
    "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 这让我尝试了“data[i].entities.media.media_url_https”并且似乎解释了如何去做，但我真的很难理解它我不知道如何将它应用于我的情况：/ 我猜我的问题来自这样一个事实，即“媒体”是一个数组，所以它应该类似于“data[i].entities.media[????].media_url_https”，但我不知道要使用哪个数字放入 ????，我尝试了 0 和 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)，而不是写 !。所以if (!someVar)

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

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

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

编辑还有一点需要注意，它不是非常关键，但它可以更好地分离布局和逻辑，目前您的标记有一个 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 模板 IMO 是个好主意。

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

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

解决方法

相关推荐