Jekyll 사이트에 댓글 추가하기

공개 demo 테넌트에 대해 로컬에서 실행 중인 모든 태그를 보려면, 저장소를 복제하고 다음을 실행하세요:

cd example
bundle install
bundle exec jekyll serve

각 위젯은 example/ 아래에 별도의 페이지로 들어 있으며, 이를 그대로 복사하여 자신의 Jekyll 사이트에 붙여넣을 수 있습니다.

사이트의 Gemfile에서 :jekyll_plugins 그룹에 gem을 추가하세요:

group :jekyll_plugins do
  gem "fastcomments-jekyll"
end

Then:

bundle install

(Jekyll 3.7+ 및 4.x와 호환됩니다.)

예제

{% raw %}{# 댓글 수. 위젯이 자체 레이블을 렌더링합니다. 예: "0개의 댓글" #}
{% fastcomments_comment_count %}

{# 실시간 채팅 #}
{% fastcomments_live_chat %}

{# 협업 채팅. CSS 선택자로 콘텐츠 요소를 지정하세요 #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcomments_collab_chat target="#post-body" %}

{# 이미지 채팅. CSS 선택자로 이미지 요소를 지정하세요 #}
<img id="hero" src="/hero.jpg" alt="Hero image">
{% fastcomments_image_chat target="#hero" %}

{# 리뷰 요약 #}
{% fastcomments_reviews_summary %}

{# 사용자 활동 피드. 사용자 id가 필요합니다 #}
{% fastcomments_user_activity_feed user_id="demo:demo-user" %}

{# 블로그 인덱스용 다중 댓글 수 집계 #}
{% for post in site.posts %}
  <a href="\{{ post.url }}">\{{ post.title }}</a>
  <span class="fast-comments-count" data-fast-comments-url-id="\{{ post.url }}"></span>
{% endfor %}
{% fastcomments_comment_count_bulk %}{% endraw %}

Config는 세 곳에서 옵니다. 나중에 지정된 항목이 우선합니다:

1. 전역 기본값은 _config.yml의 fastcomments: 키 아래에 있습니다.
2. 페이지 컨텍스트는 페이지 범위 위젯에 대해 자동으로 파생됩니다(아래 참조).
3. 태그 속성은 태그 자체에 작성된 값입니다.

따라서 태그에 있는 url_id는 페이지에서 파생된 값을 덮어쓰고, 그 값은 어떤 전역 기본값도 덮어씁니다.

Attribute syntax

속성은 snake_case의 key=value 쌍입니다:

{% raw %}{% fastcomments url_id="my-stable-id" readonly=true count=20 %}{% endraw %}

• 따옴표로 묶인 값("..." 또는 '...')은 리터럴 문자열입니다.
• 따옴표 없이 쓴 true/false는 불리언이 되고, 숫자는 숫자가 됩니다.
• 따옴표 없이 쓴 그 외의 항목은 페이지 컨텍스트의 Liquid 변수로 해석됩니다. 예: url_id=page.slug. (Liquid은 태그의 속성 안에서 {% raw %}\{{ ... }}{% endraw %}를 확장하지 않으므로, "{% raw %}\{{ page.slug }}{% endraw %}" 대신 bare page.slug 형태를 사용하세요.)

Snake_case 속성 및 설정 키는 FastComments가 기대하는 camelCase 키로 자동 매핑됩니다 (tenant_id → tenantId, url_id → urlId, page_title → pageTitle, has_dark_background → hasDarkBackground, 등). 위젯 구성의 다른 모든 옵션도 동일하게 직접 전달됩니다.

Page-derived values

페이지 범위 위젯들(fastcomments, fastcomments_comment_count, fastcomments_live_chat, fastcomments_collab_chat, fastcomments_image_chat)의 경우, 다음 값들이 직접 설정하지 않는 한 현재 페이지에서 자동으로 채워집니다:

• url_id ← page.url (방문 도메인과 무관한 안정적인 식별자)
• url ← site.url + page.url (_config.yml에 url이 설정된 경우에만)
• page_title ← page.title

사이트 전체 위젯(최근 댓글/토론, 상위 페이지, 리뷰 요약, 사용자 활동 피드, 일괄 카운트)은 특정 페이지에 묶여 있지 않으며 이러한 값을 유도하지 않습니다.

EU data residency

EU 고객은 region: eu를 추가합니다. 전역적으로:

fastcomments:
  tenant_id: your-tenant-id
  region: eu

또는 태그별로: {% raw %}{% fastcomments region="eu" %}{% endraw %}. 그러면 위젯은 EU CDN에서 로드됩니다.

• FastComments 문서
• 맞춤 설정 및 구성
• Jekyll 문서

이러한 컴포넌트들은 당사의 핵심 VanillaJS 컴포넌트를 감싸는 래퍼입니다. 우리는 이들 컴포넌트를 라이브러리를 배포하지 않고도 자동으로 업데이트할 수 있습니다(버그 수정, 기능 추가). 따라서 이 라이브러리가 당분간 공개되지 않을 수 있지만, 그렇다고 FastComments가 활발히 개발되고 있지 않다는 의미는 아닙니다! 업데이트는 우리 블로그에서 확인하세요. 호환성을 깨는 API 변경이나 기능은 이 라이브러리에서 버전 업데이트가 이루어지지 않는 한 기반 코어 라이브러리에 절대 반영되지 않습니다.