Question

我设置了来自here的Twitter流并让它在localhost上工作，但Github Pages没有渲染它。

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

有人可以想到另一种选择吗？

This是页面及其source。

Answer 1

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

Answer 2

在开始以下内容之前，请注意，最好先喝点零食喝一杯...

Github页面仅具有自己支持的插件列表，而jekyll-twitter-plugin并不是其中之一。     -Mario Nikolaus

技术上正确的是，从 Gemfile 和 _config.yml 文件加载的插件受到限制，但是GitHub Pages确实支持子模块，因此 https 网址用于跟踪此类内容。

或者换句话说，如果可以使用Liquid和/或S（C | A）SS表示要解决的问题，则对GitHub Pages进行少量混合可以鼓励自动从其他地方加载代码。

有人能想到替代方案吗？     -anaik

是的，它可以与GitHub Pages一起使用，示例请参见live demo，有关如何在其他存储库中使用的信息请参见source。从快速开始解释如下。

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

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

在modules子目录下创建一个_includes目录，并将先前链接的存储库初始化为新的子模块

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 plugin ，在这种情况下，我使用的是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

URL将类似于 https:// your-name-or-organization .github.io/ your-project /twitter/timelines/2019/07/15/timeline.html （如果将上面的FrontMatter与Minima主题一起使用）。

现在对于试图作为 plugin 冒充自己的东西来说，可能看起来有点像，但这就是收益所在的地方。

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

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插件并没有做所有事情，但至少说明了如何将类似功能卸载到可重用的 chunks

因此，除了初始化/安装外，子模块的运行方式与任何其他插件相似，并且不需要不需要任何其他好处之间的持续集成解决方案< / em>。

请注意，如果您曾经获得带有detached HEAD的子模块，请将工作目录更改为该子模块，并将fetch / pull更改为master分支。

提示，请检查DependaBot，如果您想让机器人在子模块具有更新时自动建议拉动请求。

如果上面的建议有任何疑问，请评论，以便改善答案；如果发现与存储库链接如何使用Twitter API的错误，请在GitHub上打开Issue或Pull Request，以便代码不会惹恼服务器管理员。

无法在Github Pages中呈现Twitter流

2 个答案: