Add Comments to Your Eleventy (11ty) Site

모든 숏코드와 플로우가 공용 demo 테넌트에 대해 로컬에서 실행되는 모습을 보려면, 리포지토리를 클론하고 다음을 실행하세요:

cd example
npm install
npm start

각 컴포넌트는 example/src/pages/ 아래에 자체 페이지가 있으며, 이를 그대로 복사하여 자신의 Eleventy 사이트에 붙여넣을 수 있습니다.

npm install fastcomments-11ty

Eleventy 구성 파일(.eleventy.js or eleventy.config.js)에 플러그인을 등록하세요:

const { fastcommentsPlugin } = require('fastcomments-11ty');

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
};

또는 ESM 사용 시:

import { fastcommentsPlugin } from 'fastcomments-11ty';

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
}

그런 다음 템플릿에서 숏코드를 사용하세요. Nunjucks (.njk)에서는:

{% fastcomments { tenantId: "demo" } %}

Liquid (.liquid)에서는:

{% fastcomments tenantId: "demo" %}

"demo"를 본인의 FastComments 테넌트 ID로 변경하세요.

예제

{# 텍스트와 함께 인라인으로 표시되는 댓글 수 #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# 라이브 채팅 #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# 협업 채팅 — CSS 선택자로 콘텐츠 요소를 대상으로 지정 #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# 이미지 채팅 — CSS 선택자로 이미지 요소를 대상으로 지정 #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# 리뷰 요약 #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# 사용자 활동 피드 #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // 단축 코드의 하위 집합만 등록합니다:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // 등록된 모든 단축 코드 이름에 접두사를 추가합니다 (예: "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

각 숏코드는 HTML 문자열을 반환하는 독립 실행형 함수로도 내보내집니다:

const { fastcomments, commentCount } = require('fastcomments-11ty');

eleventyConfig.addShortcode('comments', fastcomments);
eleventyConfig.addShortcode('commentCount', commentCount);

작동하는 데모가 example/ 디렉토리에 포함되어 있습니다:

cd example && npm install && npm start

• FastComments 문서
• 맞춤화 및 구성
• Eleventy 문서

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