태그를 위한 composer 템플릿을 도입하는 것에 대해 많은 논의가 있었습니다. 하지만 제 사용 사례에서는 작동하지 않아서 이 방법을 대신 구축했습니다. 이는 급할 때 태그용으로 사용할 수 있으며, 태그에서도 작동하도록 약간 수정하거나, 원하는 위치에 템플릿이 트리거되도록 URL을 수정하는 디스코urs 추가 기능을 사용할 수도 있습니다.
이 기능은 URL을 스캔하여 해당 URL을 발견할 때마다 composer에 템플릿을 삽입합니다. 예를 들어 developers를 입력하면 developers 태그가 사용될 때마다 표시되도록 설정할 수 있습니다.
일반적으로는 더 구체적으로 tag/developers를 사용하거나 /tags/intersection/developers/pineapple과 같은 교차점을 사용하는 것이 좋습니다.
c/general과 같이 카테고리에도 사용할 수 있으며, 이는 카테고리 템플릿 옵션을 재구성하고 덮어쓰기 때문에 창의적으로 사용하여 카테고리 내 조건부 템플릿으로 활용할 수 있습니다.
스레드에서 첫 번째 게시물에만, 답변에만, 또는 모든 게시물에 적용할 수 있습니다:
템플릿 텍스트가 표시되는 방식:
- 해당 위치에 아직 토픽/스레드가 없는 경우에만
- 항상
할 일: 해당 위치에 다른 사용자가 토픽을 게시했더라도, 방문한 사용자가 아직 토픽을 게시하지 않았을 때만 템플릿을 삽입하는 기능. 안타깝게도 이 기능 구현 중 어려움을 겪었고, 당분간 시간을 확보하지 못했습니다.
이 테마 컴포넌트 설치
URL Composer Templates
URL 파라미터에 기반하여 composer에 템플릿 텍스트를 미리 채워 넣는 Discourse 테마 컴포넌트입니다. Docuss와 완벽하게 연동되어 다양한 유형의 상호작용에 대해 컨텍스트에 맞는 템플릿을 제공하도록 설계되었습니다.
기능
- URL 파라미터 지원: URL에서
?composer_template=X를 자동으로 감지하고 해당 템플릿을 적용합니다. - 다양한 템플릿 유형: 다양한 목적(보고, 참석, 초대, 사용자 정의 템플릿)을 위해 최대 6개의 서로 다른 템플릿을 설정할 수 있습니다.
- Composer 자동 열기: 기존 스레드가 없는 Docuss 링크를 방문할 때 composer를 자동으로 열도록 선택적으로 설정할 수 있습니다.
- 유연한 적용 범위: 템플릿은 첫 번째 게시물에만, 모든 답변에, 또는 양쪽에 적용할 수 있습니다.
- 세션 유지: 페이지 내비게이션 간 템플릿 선택을 유지하기 위해 sessionStorage를 사용합니다.
- 디버그 모드: 템플릿 적용 문제를 해결하기 위해 자세한 콘솔 로깅을 활성화할 수 있습니다.
설치
-
Discourse에서 테마 컴포넌트 설치:
- Admin → Customize → Themes로 이동합니다.
- “Install” → "From a Git repository"를 클릭합니다.
- 입력:
https://github.com/focallocal/url-composer-templates - 컴포넌트를 활성 테마에 추가합니다.
-
플러그인 재빌드 불필요!
composer_template파라미터 지원은 이미 dcs-discourse-plugin과 dcs-client에 존재합니다. -
composerTemplateprop을 전달하도록 업데이트된 DCSLink 컴포넌트를 사용하여 React 앱(fl-maps) 배포. -
컴포넌트 설정에서 템플릿 구성 (Admin → Customize → Themes → 내 테마 → url-composer-templates → Settings).
설정
템플릿 설정
각 템플릿에는 세 가지 설정 옵션이 있습니다:
템플릿 1 (보고)
- template_1_id:
report- 이 템플릿을 트리거할 URL 파라미터 값 - template_1_text: composer에 미리 채울 텍스트
- template_1_use_for:
first_post- 새 토픽 생성 시에만 적용
템플릿 2 (참석)
- template_2_id:
going- “참석합니다” 유형의 상호작용을 위한 - template_2_text: 참석 확인을 위한 미리 채워진 텍스트
- template_2_use_for:
all_replies- 모든 답변에 적용 (첫 번째 게시물은 제외)
템플릿 3 (초대)
- template_3_id:
invite- 초대 상호작용을 위한 - template_3_text: 초대를 위한 미리 채워진 텍스트
- template_3_use_for:
all_replies- 모든 답변에 적용
템플릿 4-6 (사용자 정의)
- 기본적으로 비활성화됨
- 특정 사용 사례를 위해 활성화 및 사용자 정의 가능
- 필요에 따라 ID, 텍스트, 적용 범위를 설정
자동 열기 설정
- enable_auto_open_composer:
true- 활성화되면 다음 조건에서 composer가 자동으로 열립니다:- Docuss 링크가 클릭된 경우 (URL에
?composer_template=X포함) - 해당 태그 조합에 대해 아직 스레드가 없는 경우
- 사용자가 즉시 토론을 시작할 수 있도록 도와줍니다
- Docuss 링크가 클릭된 경우 (URL에
디버그 모드
- debug_mode:
false- 활성화 시 이모지 접두사가 포함된 자세한 콘솔 로그를 볼 수 있습니다:
템플릿 적용 로그
Composer 자동 열기 로그
Docuss 연동
자동 연동
url-composer-templates 컴포넌트는 Docuss와 자동으로 작동하도록 설계되었습니다. 다음 두 가지가 모두 있는 경우:
- 이 컴포넌트가 Discourse 인스턴스에 설치되어 있고
- 업데이트된 Docuss 클라이언트 및 플러그인(composer_template 지원 포함)이 있는 경우
템플릿은 다음 기준으로 자동으로 적용됩니다:
- Interact Mode:
DISCUSS모드 → triggerId 힌트(going, invite)를 사용하거나 기본적으로report사용COMMENT모드 →report템플릿 사용
HTML 속성을 통한 사용자 정의 템플릿
더 정밀한 제어를 위해 HTML에서 data-dcs-composer-template 속성을 사용하여 템플릿을 직접 지정할 수 있습니다:
<!-- 예시: 보고 버튼 -->
<div class="dcs-trigger"
data-dcs-trigger-id="issue-report"
data-dcs-interact-mode="DISCUSS"
data-dcs-composer-template="report">
Report an Issue
</div>
<!-- 예시: 참석 버튼 -->
<div class="dcs-trigger"
data-dcs-trigger-id="event-rsvp"
data-dcs-interact-mode="DISCUSS"
data-dcs-composer-template="going">
I'm Going!
</div>
<!-- 예시: 초대 버튼 -->
<div class="dcs-trigger"
data-dcs-trigger-id="invite-friends"
data-dcs-interact-mode="DISCUSS"
data-dcs-composer-template="invite">
Invite Friends
</div>
<!-- 예시: 사용자 정의 템플릿 -->
<div class="dcs-trigger"
data-dcs-trigger-id="feedback"
data-dcs-interact-mode="DISCUSS"
data-dcs-composer-template="custom1">
Give Feedback
</div>
템플릿 ID 매칭
이 컴포넌트는 URL 파라미터의 템플릿 ID를 설정된 템플릿 ID와 매칭합니다:
| URL 파라미터 | 템플릿 설정 | 기본 목적 |
|---|---|---|
?composer_template=report |
template_1_id |
버그 보고, 이슈 |
?composer_template=going |
template_2_id |
이벤트 RSVP |
?composer_template=invite |
template_3_id |
초대 |
?composer_template=custom1 |
template_4_id |
사용자 정의 용도 |
?composer_template=custom2 |
template_5_id |
사용자 정의 용도 |
?composer_template=custom3 |
template_6_id |
사용자 정의 용도 |
작동 방식
템플릿 적용 흐름
- URL 감지: 사용자가
?composer_template=X가 포함된 URL로 이동하면 컴포넌트는 템플릿 ID를 sessionStorage에 저장합니다. - Composer 가로채기: composer가 열리면 컴포넌트는 저장된 템플릿 ID를 확인합니다.
- 템플릿 매칭: ID에 기반하여 일치하는 템플릿을 찾습니다.
- 범위 검증: 템플릿이 적용되어야 하는지 확인합니다 (첫 번째 게시물, 답변, 또는 둘 다).
- 텍스트 삽입: 템플릿 텍스트로 composer를 미리 채웁니다.
- 정리: 재적용을 방지하기 위해 템플릿이 적용되었음을 표시합니다.
자동 열기 흐름
- 파라미터 감지: URL에
?composer_template=X가 포함되어 있고 자동 열기가 활성화되어 있는지 확인합니다. - 토픽 검색: 현재 태그 조합을 가진 기존 토픽을 검색합니다.
- Composer 열기: 토픽이 발견되지 않으면 composer를 자동으로 엽니다.
- 템플릿 적용: 위에서 설명한 정상적인 흐름을 통해 템플릿이 적용됩니다.
사용 사례 예시
이벤트 웹사이트
# settings.yml
template_2_id: "going"
template_2_text: "I'm planning to attend! 🎉\n\nLooking forward to seeing everyone there."
template_2_use_for: "all_replies"
template_3_id: "invite"
template_3_text: "I'd like to invite friends to this event.\n\nWho I'm inviting:\n- \n\nWhy they should come:\n"
template_3_use_for: "first_post"
이슈 추적
template_1_id: "bug"
template_1_text: "**Bug Description:**\n\n**Steps to Reproduce:**\n1. \n2. \n3. \n\n**Expected Behavior:**\n\n**Actual Behavior:**\n"
template_1_use_for: "first_post"
template_4_enabled: true
template_4_id: "feature"
template_4_text: "**Feature Request:**\n\n**Use Case:**\n\n**Proposed Solution:**\n"
template_4_use_for: "first_post"
커뮤니티 참여
template_1_id: "question"
template_1_text: "**My Question:**\n\n**What I've Tried:**\n\n**Additional Context:**\n"
template_1_use_for: "first_post"
template_2_id: "answer"
template_2_text: "Here's what worked for me:\n\n**Solution:**\n\n**Why it works:**\n"
template_2_use_for: "all_replies"
문제 해결
템플릿이 적용되지 않을 때
- URL 파라미터 확인: URL에 템플릿 ID와 일치하는
?composer_template=X가 포함되어 있는지 확인합니다. - 디버그 모드 활성화: 설정에서
debug_mode를 켜서 콘솔 로그를 확인합니다. - 템플릿 범위 확인:
use_for설정이 내 동작(토픽 생성 vs 답변)과 일치하는지 확인합니다. - SessionStorage 지우기: 브라우저 콘솔을 열고
sessionStorage.clear()를 실행합니다.
자동 열기가 작동하지 않을 때
- 설정 확인:
enable_auto_open_composer가true로 설정되어 있는지 확인합니다. - URL 확인: 자동 열기는 URL에
?composer_template=X가 포함된 경우에만 작동합니다. - 기존 토픽 확인: 해당 태그 조합으로 토픽이 전혀 없는 경우에만 자동 열기가 트리거됩니다.
- 디버그 모드 활성화: 콘솔에서 이모지 로그를 찾습니다.
잘못된 템플릿이 적용될 때
- 템플릿 ID 확인: URL 파라미터가 템플릿 ID와 정확히 일치하는지 확인합니다 (대소문자 구분).
- 우선순위 확인: 여러 템플릿이 일치할 수 있는 경우, 첫 번째 일치하는 템플릿이 사용됩니다.
- 세션 지우기: SessionStorage에 이전 값이 있을 수 있습니다:
sessionStorage.clear()
Docuss 연동 문제
- Docuss 업데이트: 다음 최신 버전을 가지고 있는지 확인합니다:
dcs-client(HtmlBased.js의 composerTemplate 지원 포함)dcs-discourse-plugin(DcsIFrame.js.es6의 URL 파라미터 생성 포함)
- HTML 속성 확인: 트리거에
data-dcs-composer-template이 올바르게 설정되어 있는지 확인합니다. - 네트워크 검사: 브라우저 DevTools의 Network 탭에서 URL 파라미터가 추가되는지 확인합니다.
버전 히스토리
v1.0.0 (현재)
- 초기 출시
- 6개의 구성 가능한 템플릿 지원
- URL 파라미터 기반 템플릿 선택
- Docuss 링크를 위한 Composer 자동 열기
- SessionStorage 지속성
- 문제 해결을 위한 디버그 모드
기여
버그를 찾거나 기능 요청이 있나요? GitHub 저장소에서 이슈를 열어 주세요.
라이선스
이 컴포넌트는 오픈 소스이며 MIT 라이선스 하에 제공됩니다.
크레딧
Andy@Focallocal이 개발했으며, Docuss와 잘 작동합니다 - Docuss는 모든 웹사이트에 Discourse 토론을 임베딩하기 위한 시스템입니다.
