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를 추가합니다:

테마 이름 바꾸기

If you're using an IDE it will auto-save after you make this change.

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

post.hbs 열기

Next we need to identify where to add the FastComments.com widget code.

If you're using the default casper theme, you'll see a section like this at line 82:

비활성화된 댓글 섹션

If you're using other themes, you won't see this, and will need to add this code after the last </section>:

섹션 예제

Copy

1

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

3</section>

4

You should have something like this ready:

댓글 코드 삽입을 위한 템플릿 준비

Once ready, copy the FastComments.com widget code:

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

...and it should look like this:

FastComments.com 댓글 코드 추가

Coding done. Now we just have to re-import our theme!

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

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

테마 내보내기

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

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

테마 업로드

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

업로드할 Zip 선택

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

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

성공!

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

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

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