작업 환경#

Ubuntu 22.04

5단계: 댓글 기능 추가하기#

다양한 서드파티 중에 Giscus를 사용해서 댓글 기능을 추가하겠습니다.

5.1. Giscus 서드파티 추가하기#

먼저 Giscus를 추가하기 위한 조건을 확인합니다. giscus condition

1번째 조건은 이미 충족 되었으니, 2번째 조건인 Giscus를 설치합니다. Giscus 설치하기

Install 버튼을 클릭합니다. giscus install page

이후, Only select repositories를 선택하고, blog로 사용하고 있는 repository를 할당합니다.

select repository

정상적으로 추가된 것을 알 수 있습니다.

success

이후 repository의 settings에 들어가서 Discussions -> Set up discussions를 클릭합니다.

set up discussions

우측 하단에 있는 Start discussion 버튼을 클릭하고, Start discussion 버튼을 클릭해서 설정해 주면 됩니다.

다시 Giscus 설정 페이지로 돌아와서 저장소 주소를 할당합니다.

add address in Giscus setting page

5.2. 블로그에 Giscus 추가하기#

그대로 사용해도 되고, 취향껏 커스터마이징을 진행합니다. 하단에 생성된 Giscus 관련 <script> 관련 코드를 복사합니다.

그 다음에 repository의 src/components/ 경로에서 Giscus.astro 파일을 하나 추가합니다. 이후, Giscus 페이지에서 복사한 <script> 코드를 다음과 같이 붙여 넣습니다.

1
<div class="giscus-container">
2
    <script src="https://giscus.app/client.js"
3
        data-repo="kinesis19/kinesis19.github.io"
4
        data-repo-id="R_kgDOPMN3mw"
5
        data-category="General"
6
        data-category-id="DIC_kwDOPMN3m84CtQ1D"
7
        data-mapping="pathname"
8
        data-strict="0"
9
        data-reactions-enabled="1"
10
        data-emit-metadata="0"
11
        data-input-position="bottom"
12
        data-theme="preferred_color_scheme"
13
        data-lang="ko"
14
        crossorigin="anonymous"
15
        async
16
    >
17
    </script>
18
</div>

이후 pages/posts/ 경로에 있는 [...slug].astro 파일의 코드를 수정합니다.

import문 추가

1
import path from "node:path";
2
import License from "@components/misc/License.astro";
3
import Markdown from "@components/misc/Markdown.astro";
4
import I18nKey from "@i18n/i18nKey";
5
import { i18n } from "@i18n/translation";
6
import MainGridLayout from "@layouts/MainGridLayout.astro";
7
import { getSortedPosts } from "@utils/content-utils";
8
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
9
import { Icon } from "astro-icon/components";
10
import { licenseConfig } from "src/config";
11
// 아래와 같이 Giscus import
12
import Giscus from "../../components/Giscus.astro";
13
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
14
import PostMetadata from "../../components/PostMeta.astro";
15
import { profileConfig, siteConfig } from "../../config";
16
import { formatDateToYYYYMMDD } from "../../utils/date-utils";

Giscus 태그 추가

1
            <Markdown class="mb-6 markdown-content onload-animation">
2
                <Content />
3
            </Markdown>
4

5
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
6
            <!-- Add Giscus -->
7
            <Giscus />
8

9
        </div>
10
    </div>

수정한 내용을 저장하고 local 서버를 실행하면, 정상적으로 반영된 것을 알 수 있습니다. Giscuss test

Trouble Shooting#

T1. Run Biome issue#

1
Run biome ci ./src --reporter=github
2
  biome ci ./src --reporter=github
3
  shell: /usr/bin/bash -e {0}
4
Error: The imports and exports are not sorted.
5
ci ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6

7
  × Some errors were emitted while running checks.
8

9

10
Error: File content differs from formatting output
11
Error: Process completed with exit code 1.

위와 같이 Run biome 관련해서 build 실패가 확인되면 다음 명령어를 통해 해결하고, 다시 push하면 정상적으로 build 됩니다.

1
pnpm run lint