无法在 Github Pages 中呈现 twitter 流答案

【问题标题】：Can't render twitter stream in Github Pages无法在 Github Pages 中呈现 twitter 流
【发布时间】：2018-08-11 14:51:51
【问题描述】：

我从here 设置了 twitter 流并让它在 localhost 上工作，但 Github Pages 没有呈现它。

This 页面表示所有页面站点都是使用--safe 选项生成的，出于安全原因禁用自定义插件，这意味着 Twitter 流不会显示在 Github 页面上。

有人能想到替代方案吗？

This 是页面及其source。

【问题讨论】：

标签： github twitter jekyll github-pages

【解决方案1】：

Github 页面有自己支持的插件列表，jekyll-twitter-plugin 不是其中之一。完整列表请查看this link

【讨论】：

是的，但您有什么替代方案建议？
自行构建，Twitter 提要可通过publish.twitter.com轻松定制

【解决方案2】：

在开始下面的内容之前，最好先吃点零食喝一杯……

Github 页面只是有自己支持的插件列表，而 jekyll-twitter-plugin 不是其中之一。 ——马里奥·尼古拉斯

虽然从 Gemfile 和 _config.yml 文件加载的插件在技术上是正确的，但 GitHub Pages 长期支持子模块 https URL 用于跟踪此类事情。

或者换句话说，如果要解决的问题可以用 Liquid 和/或 S(C|A)SS 来表达，那么 GitHub 页面的一些小技巧可以鼓励自动从其他地方加载代码。

有人能想到替代方案吗？ ——阿奈克

是的，它适用于 GitHub 页面，请参阅 live demo 示例和 source 了解如何在其他存储库中使用。以下内容从快速开始开始解释。

将当前工作目录更改为存储库并签出您的 gh-pages 分支

cd ~/git/hub/your-project
git checkout gh-pages

在_includes子目录下创建modules目录，并将之前链接的仓库初始化为新的子模块

mkdir -p _includes/modules

git submodule add\
 -b master --name 'twitter-timeline'\
 'https://github.com/liquid-utilities/twitter-timeline.git'\
 '_includes/modules/twitter-timeline'

编辑站点布局文件以包含 Liquid 插件，在本例中，我使用的是 Minima 2.5.0；提示，版本可以在 Gemfile.lock 文件中找到，如果其他地方没有列出的话。

_layouts/default.html

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {%- include head.html -%}

  <body>

    {%- include header.html -%}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">
        {{ content }}
        {% if page.twitter-timeline %}
          {% include modules/twitter-timeline/twitter-timeline.html %}
        {% endif %}
      </div>
    </main>

    {%- include footer.html -%}

  </body>

</html>
{% comment %}
  Source: https://raw.githubusercontent.com/jekyll/minima/v2.5.0/_layouts/default.html
  License: MIT
{% endcomment %}

注意，对原始主题的主要编辑...

{% if page.twitter-timeline %}
  {% include modules/twitter-timeline/twitter-timeline.html %}
{% endif %}

...人们可能还需要摆弄放置和 CSS 才能很好地网格化。

编辑帖子或页面 FrontMatter 以触发 Liquid 插件

2019-07-15-timeline.md

---
layout: post
title: "Example Twitter Timeline"
date: 2019-07-15 13:58:05 -0700
categories: twitter timelines
twitter-timeline:
  name: TwitterDev
  width: 300
  height: 300
  chrome: nofooter noscrollbar noborders transparent
  tweet_limit: 3
  inject_js: true
---


Whatever content to be placed before _injection_ of Twitter Timeline

添加并提交更改，然后推送到 GitHub 进行测试...

git add .gitmodules
git add _includes/modules/twitter-timeline
git add _layouts/default.html
git add _posts/2019-07-15-timeline.md


git commit -F- <<'EOF'
:heavy_plus_sign: Adds liquid-utilities/twitter-timeline submodule

# Add anything else of note, though do be aware that lines
# that begin with `#` are ignored with this _fanciness_
EOF


git push origin gh-pages

如果将上述 FrontMatter 与Minima 主题。

现在，对于试图将自己伪装成插件的东西来说，这似乎有点有点，但这就是收益所在。

要更新/升级子模块，请使用...

git submodule update --init --merge --remote --recursive

要将另一个 Twitter 时间线添加到另一个帖子...

---
layout: post
title: "Example Twitter Collection Timeline"
date: 2019-07-17 13:58:05 -0700
categories: twitter examples
twitter-timeline:
  name: TwitterDev
  text: National Park Tweets
  type: collection
  collection: 539487832448843776
  chrome: nofooter noscrollbar noborders transparent
  tweet_limit: 3
  inject_js: true
---


> Something noteworthy about parks, maybe...

要添加到另一个项目，请使用前面的说明
虽然 Gem 插件无法完成所有工作，但它至少展示了如何将类似的功能卸载到可重用的块

因此，除了初始化/安装之外，子模块的运行方式与任何其他插件类似，并且此类事情不需要需要任何持续集成解决方法以及其他好处。

注意，如果你得到一个带有detached HEAD 的子模块，请将工作目录更改为子模块和fetch/pull master 分支。

提示，如果您希望机器人在子模块有更新时自动建议拉取请求，请查看 DependaBot。

如果对上面的建议有任何疑问，请发表评论，以便改进答案不会惹恼服务器管理员。

【讨论】：