Привет,
Интересует, знает ли кто-нибудь о сообществах Discourse, в которые встроена лента Twitter? Я прочитал несколько тем на эту тему, но хотел бы увидеть примеры, чтобы ознакомиться с ними.
Заранее спасибо!
Чтобы увидеть это, необходимо зарегистрироваться, так как я удалил это из темы по умолчанию, поскольку оно нарушало отображение страницы для пользователей, не авторизованных в системе. Создайте аккаунт и выберите тёмную или светлую тему в меню-гамбургере, чтобы увидеть это в действии. Если же вы не хотите регистрироваться, вот скриншот:
Спасибо, @smrtey! Я зарегистрируюсь, чтобы посмотреть поближе, но скриншот выглядит отлично!
Выглядит отлично. Не могли бы вы рассказать, как вы это сделали, если вам не сложно?
Мой коллега создал скрипт и переопределил шаблон для боковой панели, а я просто добавил ленту Twitter и несколько файлов cookie. Он сказал, что я могу опубликовать скрипт здесь, так что вот он с добавленными элементами Twitter и CSS.
edit: Хорошо, это он ниже, так что я оставлю это ему.
Подождите, прежде чем кто-либо использует этот код. Это гораздо больше, чем я ожидал увидеть, и большая часть совершенно не нужна для встроенной ленты Twitter. Я скоро опубликую гораздо меньшую версию.
OK, это должно обеспечить встраивание ленты Twitter в левую боковую панель на всех страницах списков. Вам нужно отредактировать строку 60, добавив HTML-код, соответствующий временной шкале, которую вы хотите встроить.
-
Перейдите на эту страницу Twitter, введите то, что вы хотите встроить (например,
https://twitter.com/TwitterDev), и нажмите «Встроенная временная шкала». -
Вы получите код вроде этого:
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Твиты от 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">Твиты от 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, чем у нас, поэтому я не могу гарантировать, что результат будет идеальным для всех.}
Для отображения временной шкалы у неавторизованных пользователей требуется перезагрузка страницы. Это известная ошибка, которую мы ещё не успели исправить.
Это также не работало на 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}
Впервые сегодня вечером я внимательно посмотрел на всё это в твиттере. Думаю, я понял, где нужно исправить известные баги, но сейчас у меня нет на это времени.
Если кто-то захочет использовать это, я соберу всё в один компонент темы в течение ближайших пары дней.
Вот компонент, который, кажется, стабилен:
Он добавляет боковую панель Twitter в файл discovery/topics.hbs для Discourse, поэтому боковая панель будет отображаться на всех страницах: «Последние», «Непрочитанные», «Новые», «Закладки» и т. д. Она не будет загружаться, если пользователь не авторизован, так как нам не удалось заставить её работать без входа в систему. Также она не работает на iOS, поэтому, вероятно, отключена на iPad, но я не могу это проверить.
Чтобы загрузить вашу ленту Twitter вместо ленты Discourse, следуйте инструкциям на строке 30 в файле Desktop head_tag.html и добавьте правильный код на строке 39.
На мой взгляд, это выглядит намного лучше, если увеличить ширину обертки на страницах, где есть боковая панель.
Где находится этот файл?
Спасибо, я нашёл <\head>
Попробуйте компонент темы Smartey, который связал несколько постов.
Не знаю, что вам сказать. У меня были проблемы с загрузкой ленты, пока я не добавил
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
Но это в компоненте, поэтому, если у вас это не работает, единственное, что я могу предложить, — проверить настройки безопасности, а именно параметр «Политика безопасности контента» (content security policy), и если у вас стоит галочка
то, думаю, скрипты Twitter работать не будут.
Это довольно круто. Я попробовал, и всё работает отлично. Молодцы!
Когда я впервые увидел эту тему, подумал, что она будет немного другой. В моём сообществе у многих участников есть Twitter. Сложно мотивировать их вести более глубокие и долгосрочные обсуждения на форуме тем, о которых они твитят. Интерфейс для просмотра ленты и создания темы по твиту был бы интересным решением! Возможно, ленту можно было бы привязать к хештегу? Или же пользователи могли бы видеть свою собственную ленту Twitter в профиле и создавать темы оттуда.
Спасибо, Smertey. Я снял галочку с политики безопасности контента, и теперь всё работает. Есть ли какие-либо риски для безопасности при снятии этой опции?