javascript - 嵌入式 Twitter 时间线在 Jekyll 网站上不起作用
问题描述
目标:在我们的 Jekyll GitHub Pages 网站上嵌入我组织的 Twitter 时间线。
当我创建一个包含以下代码的本地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 时间线吗?
<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>
解决方案
我在我的 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
脚本中提供。
推荐阅读
- vuejs3 - 多页面构建不适用于 vite 2.6 和 vue 3.2
- java - 我有一个带有图像的水平回收视图,但它们彼此相距太远
- javascript - 为什么在 GET 上我的 URL 后面会添加“?a=a”?
- typescript - Nest 无法解析 ResolutionService 的依赖项
- swift - Theo (neo4j for swift ios) 覆盖基本 Int 初始化程序,返回 nil 以获得有效值
- google-chrome-extension - 如何在没有持久背景页面的情况下监听 Web 请求?
- python - 如何从多个流中连续加载同步视频?
- sql - Group By 子句无法与 sp_executesql 一起正常工作
- hyperledger - 如何卸载有关 Hyperledger Sawhooth 的所有内容以重新启动
- go - map struct golang中计数器的最佳实践