안녕하세요,
누군가 임베디드 트위터 피드가 있는 Discourse 커뮤니티를 알고 계신지 궁금합니다. 관련 주제에 대해 몇 가지 글을 읽었지만, 직접 확인해 볼 수 있는 예시가 있는지 알고 싶었습니다.
미리 감사드립니다!
로그인하지 않은 사용자에게 페이지가 깨지는 문제가 발생해서 기본 테마에서 제거했기 때문에, 확인하려면 등록이 필요합니다. 계정을 생성하고 햄버거 메뉴에서 다크 또는 라이트 테마를 선택하면 실시간으로 확인할 수 있으며, 로그인하기 귀찮다면 스크린샷을 아래에 첨부했습니다.
@smrtey 감사합니다. 더 자세히 보기 위해 가입하겠습니다. 스크린샷도 정말 잘 나왔네요!
정말 잘 나와요. 괜찮으시다면 어떻게 만드셨는지 궁금해요.
동료가 사이드바용 스크립트와 템플릿 오버라이드를 만들었고, 저는 트위터 피드와 쿠키 몇 가지를 추가했습니다. 그가 여기서 스크립트를 공유해도 된다고 해서, 트위터 관련 내용과 CSS를 추가한 버전입니다.
수정: 아, 아래에 본인이 계시네요. 그에게 맡기겠습니다.
그 코드를 사용하시기 전에 잠시만요. 게시된 내용이 예상보다 훨씬 많았고, 대부분은 임베디드 트위터 피드에는 전혀 필요 없는 부분입니다. 훨씬 더 작은 버전으로 곧 업데이트하겠습니다.
OK, 이 코드는 모든 목록 페이지에서 왼쪽 사이드바에 내장된 트위터 피드를 제공해야 합니다. 내장하려는 타임라인에 적합한 HTML로 60번째 줄을 편집해야 합니다.
-
이 트위터 페이지에 가서 내장할 내용을 입력하세요. 예를 들어
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}}
<!-- ***********************************************************************
This is the only part of this template that changes.
You need to replace XXXXXXXXXX below with the link provided by Twitter on this page. but omit the <script> portion:
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가 우리 사이트에 있을 수 있으므로 모든 사람에게 완벽하게 작동한다고 보장할 수는 없습니다.
위 내용은 로그인하지 않은 사용자에게 타임라인이 표시되려면 페이지를 새로고침해야 합니다. 아직 해결하지 못한 알려진 버그입니다.
아이패드에서도 작동하지 않아서, 아이패드에 대해 기능을 비활성화하도록 아래 코드를 추가했습니다.
<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}
오늘 밤이 사실 트위터 관련 내용을 자세히 살펴본 첫 번째 기회입니다. 알려진 버그를 수정할 방법을 찾은 것 같지만, 지금은 시간이 없습니다.
혹시 이걸 사용하시길 원하시면, 앞으로 이틀 안에 테마 컴포넌트로 정리해서 올려놓을게요.
안정적인 것으로 보이는 컴포넌트 형태로 공유드립니다.
이 컴포넌트는 Discourse의 discovery/topics.hbs에 Twitter 사이드바를 추가하여, 최신(Latest), 안 읽음(Unread), 새 글(New), 북마크(Bookmarks) 등 모든 페이지에서 사이드바가 표시되도록 합니다. 로그인하지 않은 사용자의 경우 동작하지 않도록 되어 있으며, 이는 로그인 상태가 아닐 때 작동하지 않기 때문이었습니다. 또한 iOS에서는 작동하지 않아 아이패드에서도 비활성화되어 있을 것으로 생각되지만, 직접 테스트할 수는 없었습니다.
Discourse 피드가 아닌 Twitter 피드가 로드되도록 하려면, Desktop head_tag.html의 30번째 줄에 있는 지침을 따라 39번째 줄에 올바른 코드를 추가해야 합니다.
사이드바가 포함된 페이지에서 래프(wrap) 너비를 늘리면 훨씬 더 보기 좋아질 것 같습니다.
이 파일의 위치는 어디인가요?
감사합니다. <\head>를 찾았어요
대신 몇 글자 위에 smartey가 링크한 테마 컴포넌트를 시도해 보세요.
무엇을 말씀드리면 좋을지 모르겠네요. 피드 로딩에 문제가 있었는데, 아래를 추가한 후에야 해결되었습니다.
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
twttr.widgets.load( document.getElementById("sidebar") );
});
</script>
하지만 이는 컴포넌트 안에 있는 코드이므로, 만약 여러분에게 작동하지 않는다면 제가 생각할 수 있는 유일한 방법은 보안 설정(Security Settings)에서 content security policy 설정을 확인해 보는 것입니다. 만약 이 항목이 체크되어 있다면
트위터 스크립트가 작동하지 않을 것이라고 생각합니다.
정말 멋진 것 같아요. 직접 써봤는데 잘 작동합니다. 수고 많으셨어요!
처음 이 주제를 봤을 때는 조금 다른 내용일 줄 알았어요. 제 커뮤니티에서도 많은 멤버들이 트위터를 사용하거든요. 그들이 트윗한 주제에 대해 포럼에서 더 깊이 있고 장기적인 대화를 나누도록 독려하는 것이 쉽지 않은 과제입니다. 피드를 보고 특정 트윗에 대해 주제를 시작할 수 있는 인터페이스가 있다면 흥미로울 것 같아요. 피드가 해시태그 형태일 수도 있고, 아니면 프로필에서 자신의 트위터 피드를 보고 거기서 주제를 시작할 수도 있겠죠.
Smertey, 감사합니다. 콘텐츠 보안 정책(CSP)을 해제했는데, 이제 작동하는 것 같습니다. 이 옵션을 해제하면 보안에 어떤 위험이 있나요?