带有嵌入式 Twitter 动态的社区

Chris27 · 2019 年11 月 20 日 21:10

你好，

我想请问是否有人知道有哪些 Discourse 社区嵌入了 Twitter 动态？我读过一些关于这个话题的帖子，但想知道是否有可以查看的示例。

提前感谢！

smrtey · 2019 年11 月 20 日 23:08

您需要注册才能查看，因为我不得不将其从默认主题中移除，因为它会导致未登录用户访问页面时出错。创建账户，然后从汉堡菜单中选择深色或浅色主题即可实时查看；如果您不想登录，这里也有一张截图。

Chris27 · 2019 年11 月 20 日 23:19

谢谢 @smrtey，我会注册以便更仔细地查看，但截图看起来很棒！

Anatolia · 2019 年11 月 20 日 23:45

这看起来很棒。如果不介意的话，我想知道你是怎么做的。

smrtey · 2019 年11 月 21 日 00:53

我的同事为侧边栏编写了一个脚本并覆盖了模板，我只添加了 Twitter 动态和一些 Cookie。他说我可以把脚本发到这里，所以我就把添加了 Twitter 内容和 CSS 的版本发出来了。

编辑：好的，下面就是他，所以我会让他来处理。

torsi · 2019 年11 月 21 日 01:05

在任何人使用该代码之前请稍等。这比我预期的要多得多，而且其中大部分对于嵌入式推特内容来说完全没必要。我很快就会发布一个更精简的版本。

torsi · 2019 年11 月 21 日 02:05

好的，这应该能在所有列表页面上嵌入一个 Twitter 动态，作为左侧边栏。您需要编辑第 60 行，填入适合您要嵌入的时间线的 HTML 代码。

访问此 Twitter 页面，输入您要嵌入的内容（例如 https://twitter.com/TwitterDev），然后点击“嵌入时间线”（Embedded Timeline）
您将获得类似以下的代码：
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
删除 <script> 部分，只保留：
<a class="twitter-timeline" href="https://twitter.com/SampleTwitterUser?ref_src=twsrc%5Etfw">Tweets by SampleTwitterUser</a>
将其粘贴到下方第 60 行，替换 XXXXXXXXXX

将此代码添加到 Desktop - </head> 中：

<script>
         window.twttr = (function(d, s, id) {
             var js, fjs = d.getElementsByTagName(s)[0],
                 t = window.twttr || {};
             if (d.getElementById(id)) return t;
             js = d.createElement(s);
             js.id = id;
             js.src = "https://platform.twitter.com/widgets.js";
             fjs.parentNode.insertBefore(js, fjs);
             t._e = [];
             t.ready = function(f) {
                 t._e.push(f);
             };
             return t;
         }
         (document, "script", "twitter-wjs"));
</script>
<script type="text/discourse-plugin" version="0.8">
     api.onPageChange(() => {
            twttr.widgets.load( document.getElementById("twitter-sidebar") );
     });
</script>

<script type="text/x-handlebars" data-template-name="discovery/topics">
    {{#if redirectedReason}}
      <div class="alert alert-info">{{redirectedReason}}</div>
    {{/if}}
    
    {{#if showDismissAtTop}}
      <div class="row">
        {{#if showDismissRead}}
          <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics-top' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
        {{/if}}
        {{#if showResetNew}}
        <button id='dismiss-new-top' class='btn btn-default dismiss-read' {{action "resetNew"}}>{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
        {{/if}}
      </div>
    {{/if}}
    
    {{#if model.sharedDrafts}}
      {{topic-list
        class="shared-drafts"
        listTitle="shared_drafts.title"
        top=top
        hideCategory="true"
        category=category
        topics=model.sharedDrafts
        discoveryList=true}}
    {{/if}}
    
    {{bulk-select-button selected=selected action=(action "refresh") category=category}}


    <!-- ***********************************************************************
        这是此模板中唯一需要修改的部分。
        您需要将下方的 XXXXXXXXXX 替换为 Twitter 在此页面提供的链接，但请省略 <script> 部分：
        https://help.twitter.com/en/using-twitter/embed-twitter-feed
    ************************************************************************* -->
    <div id="sidebar">
      XXXXXXXXXX
      <div id="twitter-sidebar"></div>
    </div>



    {{#discovery-topics-list model=model refresh=(action "refresh") incomingCount=topicTrackingState.incomingCount}}
      {{#if top}}
        <div class='top-lists'>
          {{period-chooser period=period action=(action "changePeriod")}}
        </div>
      {{else}}
        {{#if topicTrackingState.hasIncoming}}
          <div class="show-more {{if hasTopics 'has-topics'}}">
            <div class='alert alert-info clickable' {{action "showInserted"}}>
              <a tabindex="0" href="" {{action "showInserted"}}>
                {{count-i18n key="topic_count_" suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
              </a>
            </div>
          </div>
        {{/if}}
      {{/if}}
    
      {{#if hasTopics}}
        {{topic-list
          highlightLastVisited=true
          top=top
          showTopicPostBadges=showTopicPostBadges
          showPosters=true
          canBulkSelect=canBulkSelect
          changeSort=(action "changeSort")
          toggleBulkSelect=(action "toggleBulkSelect")
          hideCategory=model.hideCategory
          order=order
          ascending=ascending
          bulkSelectEnabled=bulkSelectEnabled
          selected=selected
          expandGloballyPinned=expandGloballyPinned
          expandAllPinned=expandAllPinned
          category=category
          topics=model.topics
          discoveryList=true}}
      {{/if}}
    {{/discovery-topics-list}}

    <footer class='topic-list-bottom'>
      {{conditional-loading-spinner condition=model.loadingMore}}
      {{#if allLoaded}}
        {{#if showDismissRead}}
          <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn btn-default dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
        {{/if}}
        {{#if showResetNew}}
          <button id='dismiss-new' class='btn btn-default dismiss-read' {{action "resetNew"}}>
            {{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
        {{/if}}
    
        {{#footer-message education=footerEducation message=footerMessage}}
          {{#if latest}}
            {{#if canCreateTopicOnCategory}}<a href {{action "createTopic"}}>{{i18n 'topic.suggest_create_topic'}}</a>{{/if}}
          {{else if top}}
            {{#link-to "discovery.categories"}}{{i18n 'topic.browse_all_categories'}}{{/link-to}}, {{#link-to 'discovery.latest'}}{{i18n 'topic.view_latest_topics'}}{{/link-to}} {{i18n 'or'}} {{i18n 'filters.top.other_periods'}}
            {{top-period-buttons period=period action=(action "changePeriod")}}
          {{else}}
            {{#link-to "discovery.categories"}} {{i18n 'topic.browse_all_categories'}}{{/link-to}} {{i18n 'or'}} {{#link-to 'discovery.latest'}}{{i18n 'topic.view_latest_topics'}}{{/link-to}}
          {{/if}}
        {{/footer-message}}
    
      {{/if}}
    </footer>
</script>

然后将以下内容添加到 Desktop - CSS 中：

topic-list {
    width: auto;
}
#sidebar {
    width: 28%;
    float: left;
    margin-right: 20px;
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) {
    #sidebar {
        display: none !important;
    }    
}

这应该能正常工作，但我们的网站上可能还有一些其他 CSS 代码是您没有的，因此我无法保证它对每个人来说都完美无缺。

torsi · 2019 年11 月 21 日 02:10

上述情况需要刷新页面，未登录用户才能看到时间线。这是一个已知问题，我们尚未着手解决。

smrtey · 2019 年11 月 21 日 02:33

在 iPad 上也无法正常工作，因此我添加了以下代码以在 iPad 上禁用该功能：

<script type="text/discourse-plugin" version="0.8">
         api.onPageChange(() => { 
            var is_iPad = navigator.userAgent.match(/iPad/i) != null;
            if(is_iPad)  {
                document.getElementById("sidebar").classList.add("hide-it");
            }
         });
</script>

CSS
#sidebar.hide-it {display:none !important}

torsi · 2019 年11 月 21 日 02:38

今晚是我第一次仔细查看 Twitter 相关的内容。我觉得我知道如何修复其中已知的 bug，但眼下没时间去做。

smrtey · 2019 年11 月 21 日 04:55

如果有人想使用这个，我会在接下来的一两天内将其整合为一个主题组件。

smrtey · 2019 年11 月 21 日 19:47

这是一个看起来相当稳定的组件：

它为 Discourse 的 discovery/topics.hbs 添加了 Twitter 侧边栏，因此该侧边栏会显示在所有“最新”、“未读”、“新主题”、“书签”等页面上。如果用户未登录，它将不会加载，因为我们发现只有在登录状态下才能正常工作。此外，它在 iOS 上也无法运行，我认为在 iPad 上它会被禁用，但我无法对此进行测试。

若要加载您的 Twitter 动态流而不是 Discourse 的，请按照 Desktop head_tag.html 第 30 行中的说明操作，并在第 39 行添加正确的代码。

我认为，如果增加包含侧边栏的页面中 wrap 元素的宽度，整体效果会好很多。

aliyosefzai · 2019 年12 月 10 日 18:09

该文件的位置在哪里？

aliyosefzai · 2019 年12 月 11 日 14:26

谢谢，我找到了

aliyosefzai · 2019 年12 月 11 日 14:47

对我来说不起作用。我只看到了一个“测试时间线”的链接。我已经在和桌面版 CSS 中添加了这两个脚本。

torsi · 2019 年12 月 11 日 17:58

不妨试试 smartey 主题组件，它已经链接了几个帖子。

aliyosefzai · 2019 年12 月 12 日 12:59

我安装了主题组件，但不知为何，侧边栏仅显示时间线的链接，而没有显示推文。

smrtey · 2019 年12 月 13 日 21:50

我不知道该告诉你什么。我在加载源时遇到了一些问题，直到我添加了：

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        twttr.widgets.load(document.getElementById("sidebar"));
    });
</script>

但这部分代码在组件中，所以如果对你不起作用，我能想到的唯一办法是检查你的安全设置中的“内容安全策略”（content security policy）选项。如果你勾选了：

那么 Twitter 脚本可能无法正常工作。

tobiaseigen · 2019 年12 月 14 日 01:14

这相当不错。我试用了一下，效果很好。干得漂亮！

刚看到这个主题时，我以为内容会有所不同。在我的社区里，许多成员也在使用 Twitter。要鼓励他们就在推文中提到的话题在论坛上展开更深入、更长线的讨论，确实是个挑战。如果能有一个界面来查看推文流并直接围绕某条推文发起话题，那将会很有趣！也许这个信息流可以基于某个标签？或者，用户可以在自己的个人资料页面上查看自己的 Twitter 动态，并从中发起话题。

aliyosefzai · 2019 年12 月 15 日 16:13

谢谢 Smertey，我取消了内容安全策略的勾选，现在看起来已经正常工作了。取消勾选这个选项会有什么安全风险吗？

话题		回复	浏览量
Twitter Native Embed Theme component	106	6623	2026 年3 月 30 日
Configuring X login and rich embeds for Discourse Integrations how-to , social-auth , sso	143	227198	2026 年1 月 20 日
Twitter embeds have broken Support	28	3727	2020 年7 月 8 日
Is the a feature/plugin that allows you to pull in a Twitter feed? Feature	3	1298	2016 年10 月 12 日
A more social Discourse layout UX	52	8427	2022 年4 月 17 日

带有嵌入式 Twitter 动态的社区

相关话题