嵌入式 Twitter 时间轴无法在 Jekyll 网站上运行

问题描述 投票:0回答:2

目标: 将我组织的 Twitter 时间线嵌入到我们的 Jekyll GitHub Pages 网站上。

当我使用以下代码创建本地 index.html 并使用 Google Chrome 打开它时,它会正确显示时间线,但这在 JSFiddle 或我们的网站本身上不起作用。

<html>
  <head>
    <title>"Hello, World"</title>
  </head>
  <body bgcolor=white>
    <h1>Hello, World</h1>

    <div>
      <a class="twitter-timeline" data-theme="dark" href="https://twitter.com/CodeForBuffalo?ref_src=twsrc%5Etfw">Tweets by CodeForBuffalo</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

  </body>
</html>

这是代码所在的上下文。我尝试将脚本添加到包含其他 js 脚本文件的 js 文件夹(然后引用该文件路径)。我尝试将其包含在 head.html 中,然后包含在 footer.html 中,但这些尝试都不起作用。

Twitter 提供的脚本应该可以工作,因为它在本地成功,但它显示的只是 Twitter 时间线本身的超链接。这是 Twitter 的问题还是我错误地使用了 Jekyll/JavaScript?如果没有,还有其他方法可以嵌入我们的 Twitter 时间线吗?

这是 GitHub 存储库的链接

<section id="main-description">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
          ...
      </div>
      <div class="col-md-4">
        <div>
          <a class="twitter-timeline" href="https://twitter.com/CodeForBuffalo?ref_src=twsrc%5Etfw">Tweets by CodeForBuffalo</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
      </div>
    </div>
  </div>
</section>

javascript html twitter jekyll github-pages
2个回答
0
投票

我在 Jekyll 网站上对此进行了测试,它立即生效。我只是在

root/twitter/.index.html
中创建了一个新页面:

---
layout: page
title: "Twitter feed"
heading: "Twitter feed"
excerpt: "Twitter feed."

permalink: twitter

---

Twitter feed placeholder:



<section id="main-description">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        ...
      </div>
      <div class="col-md-4">
        <div>
          <a class="twitter-timeline" href="https://twitter.com/CodeForBuffalo?ref_src=twsrc%5Etfw">Tweets by CodeForBuffalo</a>
          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
      </div>
    </div>
  </div>
  </section

并得到了预期的结果:

如果您仍然遇到问题,请检查浏览器控制台是否有任何错误。也许你缺少 JS 依赖?除了上面的代码之外,我没有添加任何内容,但我的网站确实已经包含了 Bootstrap 和相关的 JS 库。不确定这些是否需要或已在

async
脚本中提供。


0
投票

这似乎是在埃隆·马斯克收购 Twitter(现在的 X)之后。 嵌入式时间线被破坏 来源

© www.soinside.com 2019 - 2024. All rights reserved.