Ghost 사이트에 회원 전용 실시간 댓글 추가

FastComments를 Ghost에 올바르게 추가하려면 테마 파일을 편집해야 합니다.

먼저 현재 사용 중이거나 원하는 테마를 다운로드하는 것부터 시작하겠습니다.

사이트 대시보드로 이동하여 왼쪽 아래의 톱니바퀴 아이콘을 클릭하세요:

설정 열기

다음으로 Design 옵션을 선택하세요:

디자인 선택

기술적으로 테마를 변경하는 것은 아니지만, 왼쪽 아래의 Change Theme를 클릭하세요:

테마 변경

오른쪽 상단에서 Advanced를 선택하세요:

고급 선택

...그런 다음 현재 사용 중인 테마 또는 원하는 테마를 다운로드하세요:

테마 다운로드

이제 zip 파일을 다운로드했으므로 폴더에 압축을 푸세요. 기본 casper.zip을 다운로드하여 Windows의 Downloads\casper에 추출했습니다.

다음으로 LTS 버전 이상의 NodeJS가 설치되어 있는지 확인하세요. 다음에서 다운로드할 수 있습니다: https://nodejs.org/en/download/

NodeJS가 설치되면 코드 편집기를 설치하세요.

추천(및 당사에서 사용하는) 편집기는 WebStorm이며, 30일 체험판(신용카드 불필요)으로 여기에서 받을 수 있습니다: https://www.jetbrains.com/webstorm/

다음으로 가장 좋은 무료 옵션은 아마 Visual Studio Code일 것입니다: https://code.visualstudio.com/download

편집기를 설정하고 에디터에서 테마 폴더를 연 후, IDE에서 터미널을 열고 다음을 실행하세요:

테마 설치

Copy

1

2npm install

3

성공적인 출력은 다음과 같습니다(경고는 무시하셔도 됩니다):

npm 설치 성공 출력

이렇게 하면 이후 실행할 명령을 위해 테마의 의존성이 설정됩니다. 또한, the export는 테마의 의존성이 설치되어 있어야 하므로, 그렇지 않으면 the re-import가 제대로 작동하지 않습니다.

이제 에디터에서 테마를 열었으니, package.json을 열고 name 필드를 다른 이름으로 변경하세요. 여기서는 끝에 -fastcomments를 추가했습니다:

테마 이름 변경

IDE를 사용 중이라면 이 변경 사항을 적용한 후 자동으로 저장됩니다.

이제 블로그 게시물에 사용되는 템플릿을 열겠습니다. 이름은 post.hbs입니다:

post.hbs 열기

다음으로 FastComments.com 위젯 코드를 추가할 위치를 확인해야 합니다.

기본 casper 테마를 사용하는 경우 82번째 줄에서 다음과 같은 섹션을 볼 수 있습니다:

비활성화된 댓글 섹션

다른 테마를 사용하는 경우에는 이 섹션이 보이지 않으며, 마지막 </section> 뒤에 이 코드를 추가해야 합니다:

섹션 예시

Copy

1

2<section class="article-comments gh-canvas">

3</section>

4

다음과 같은 형태가 준비되어 있어야 합니다:

댓글 코드를 위한 준비된 템플릿

준비가 되면 FastComments.com 위젯 코드를 복사합니다:

Ghost FastComments.com 댓글 코드 스니펫

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let simpleSSO = null;

7

8 \{{#if access}}

9 \{{#if @member}}

10 simpleSSO = {

11 id: '\{{ @member.uuid }}',

12 email: '\{{@member.email}}',

13 username: '\{{@member.name}}',

14 avatar: '\{{ @member.avatar_image }}',

15 optedInNotifications: true,

16 optedInSubscriptionNotifications: true,

17 displayLabel: '\{{@member.labels}}'

18 }

19 \{{/if}}

20 \{{/if}}

21

22 window.fcConfigs = [{

23 target: '#fastcomments-widget',

24 tenantId: "demo",

25 urlId: window.location.pathname,

26 allowAnon: false,

27 simpleSSO: simpleSSO

28 }];

29 })();

30</script>

31

...그러면 다음과 같이 표시됩니다:

FastComments.com 댓글 코드 추가

코딩이 완료되었습니다. 이제 테마를 다시 가져오기만 하면 됩니다!

이제 테마 파일을 다시 ZIP 파일로 묶어야 합니다. 이를 위해 Ghost의 내장 기능을 사용하세요.

에디터의 터미널을 다시 열고 npm run zip을 실행하세요.

테마 내보내기

이렇게 하면 테마가 dist/casper-fastcomments.zip에 zip 파일로 패키징됩니다 (해당 테마 이름을 Step Three에서 그렇게 지정했다면).

다시 Ghost 대시보드로 돌아가서 테마를 업로드합니다:

테마 업로드

제 경우 zip 파일은 다음 위치에 있습니다. dist 폴더를 확인하세요:

업로드할 Zip 선택

새로 업로드한 테마를 활성화하는 것을 잊지 마세요(Ghost가 이를 요청할 것입니다).

이제 우리 멤버들에게 FastComments 실시간 댓글 기능이 활성화되어 있을 것입니다!

성공!

Ghost에 FastComments를 설정하신 것을 축하합니다! 도메인 오류가 발생했거나 댓글 영역을 사용자화하는 방법을 알고 싶다면 계속 읽어보세요!

FastComments는 사이트에 맞게 맞춤 설정할 수 있도록 설계되었습니다.

사용자 지정 스타일을 추가하거나 구성을 조정하려면, 맞춤 설정 문서에서 방법을 확인하세요.