Twikoo 댓글 시스템

클라우드 함수 배포

Twikoo를 호스팅하거나 지정된 사이트에 직접 배포하세요

프론트엔드 배포

👆위의 클라우드 함수 환경 주소를 도입하기만 하면 됩니다

Hexo에서 사용하기

Hexo Butterfly 테마에서 사용하기

Butterfly 설치 문서(4) 테마 설정-2를 참고하여 설정하세요

Hexo Keep 테마에서 사용하기

hexo-theme-keep/_config.yml을 참고하여 설정하세요

Hexo Volantis 테마에서 사용하기

hexo-theme-volantis/_config.yml을 참고하여 설정하세요

Hexo Ayer 테마에서 사용하기

hexo-theme-ayer/_config.yml을 참고하여 설정하세요

Hexo NexT 테마에서 사용하기

NexT 8 이하 버전은 아직 지원되지 않습니다, 먼저 NexT 8로 업그레이드하세요. 그런 다음 Hexo 프로젝트 루트 디렉토리에서 실행하세요

# NexT 버전 >= 8.0.0 && < 8.4.0용
npm install hexo-next-twikoo@1.0.0
# NexT 버전 >= 8.4.0용
npm install hexo-next-twikoo@1.0.3

그런 다음 설정에 추가하세요

twikoo:
  enable: true
  visitor: true
  envId: xxxxxxxxxxxxxxx # 텐센트 클라우드 환경은 envId를 입력; Vercel 환경은 주소를 입력 (https://xxx.vercel.app)
  # region: ap-guangzhou # 환경 지역, 기본 ap-shanghai, 텐센트 클라우드 환경은 ap-shanghai 또는 ap-guangzhou 입력; Vercel 환경은 입력하지 마세요

Hexo Matery 테마에서 사용하기

hexo-theme-matery/_config.yml을 참고하여 설정하세요

Hexo Icarus 테마에서 사용하기

异次元de机智君💯의 텐센트 클라우드를 기반으로 당신의 Icarus 블로그에 Twikoo 댓글 시스템을 장착하세요를 참고하세요

Hexo MengD 테마에서 사용하기

hexo-theme-MengD/_config.yml을 참고하여 설정하세요

hexo-theme-fluid 테마에서 사용하기

설정 가이드 - 댓글을 참고하여 설정하세요

hexo-theme-cards 테마에서 사용하기

hexo-theme-cards/_config.yml을 참고하여 설정하세요

maupassant-hexo 테마에서 사용하기

maupassant-hexo/_config.yml을 참고하여 설정하세요

hexo-theme-redefine 테마에서 사용하기

Redefine 공식 문서 #comment를 참고하여 설정하세요

Hexo-Theme-Solitude 테마에서 사용하기

Solitude 문서를 참고하여 설정하세요

Hugo에서 사용하기

hugo-theme-stack 테마에서 사용하기

Comments | Stack과 hugo-theme-stack/config.yaml#L83을 참고하여 설정하세요

FixIt 테마에서 사용하기

입문편 - FixIt #테마 설정과 hugo-fixit/FixIt/config.toml#L613-L624을 참고하여 설정하세요

VitePress에서 사용하기

VitePress twikoo 통합 참고 솔루션을 참고하여 설정하세요.

CDN으로 도입하기

사용 중인 블로그 테마가 Twikoo를 지원하지 않고, Twikoo를 도입하는 방법을 모르는 경우 블로그 테마 개발자에게 적응 요청을 제출할 수 있습니다

<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"></script>
<script>
twikoo.init({
  envId: '귀하의 환경 id', // 텐센트 클라우드 환경은 envId를 입력; Vercel 환경은 주소를 입력 (https://xxx.vercel.app)
  el: '#tcomment', // 컨테이너 요소
  // region: 'ap-guangzhou', // 환경 지역, 기본 ap-shanghai, 텐센트 클라우드 환경은 ap-shanghai 또는 ap-guangzhou 입력; Vercel 환경은 입력하지 마세요
  // path: location.pathname, // 다른 글을 구분하기 위한 사용자 정의 js 경로, 글 경로가 location.pathname이 아닌 경우 이 매개변수를 전달해야 합니다
  // lang: 'zh-CN', // 댓글 영역 언어를 수동으로 설정하는 데 사용, 지원되는 언어 목록 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
})
</script>

다른 버전 간의 차이점

• twikoo.all.min.js: 텐센트 클라우드 클라우드 개발(tcb)이 포함된 전체 버전, 텐센트 클라우드 클라우드 개발로 배포하는 경우 이 버전을 선택하세요
• twikoo.min.js: 텐센트 클라우드 클라우드 개발(tcb)이 제거된 간소화 버전, 용량이 더 작으며 텐센트 클라우드 클라우드 개발로 배포하지 않는 모든 사용자에게 적합합니다
• twikoo.nocss.js: 전체 버전에서 스타일을 분리한 버전, 정상적으로 표시하려면 twikoo.css를 동시에 도입해야 하며, 댓글 영역 스타일을 마음대로 수정하고 싶은 사용자에게 적합합니다

CDN 미러 교체

기본 CDN의 로딩 속도가 느린 경우 다른 CDN 미러로 교체할 수 있습니다. 다음은 선택 가능한 공용 CDN이며, 일부 CDN은 최신 버전을 동기화하는 데 며칠이 걸릴 수 있습니다:

중국에서 사용 권장

• https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js
• https://s4.zstatic.net/npm/twikoo@1.6.44/dist/twikoo.min.js

전 세계에서 사용 권장

• https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js

백업 옵션

• https://s4.zstatic.net/ajax/libs/twikoo/1.6.41/twikoo.min.js
• https://lib.baomitu.com/twikoo/1.6.39/twikoo.min.js

CDN으로 Twikoo를 도입하는 사용자는 링크 주소에서 버전을 고정하여 향후 Twikoo 업그레이드 시 비호환성 업데이트의 영향을 받지 않도록 하는 것이 좋습니다.

CDN으로 Twikoo를 도입하는 사용자는 무결성을 보장하기 위해 코드에 SRI를 추가하는 것이 좋습니다. 예:

<script
  src="https://cdn.jsdelivr.net/npm/twikoo@1.6.36/dist/twikoo.all.min.js"
  integrity="sha384-4KfOjEinLSkv1i1J8TzlkC/RTnuiLoR1OLerVgjEKoH5djYtbf7mzEFsz9p3nfuA"
  crossorigin="anonymous">
</script>

여기서 integrity의 값은 SRI Hash Generator에서 조회할 수 있습니다.