Hugo에 Asyntai AI 챗봇을 추가하는 방법

Hugo 정적 사이트 생성기를 위한 단계별 가이드

임베드 코드 받기

플랫폼:

1단계: 임베드 코드 가져오기

먼저 Asyntai 대시보드로 이동하여 "임베드 코드" 섹션까지 아래로 스크롤하십시오. 다음과 같은 형태의 고유 임베드 코드를 복사하십시오:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

2단계: 테마 파셜에 코드 추가 (권장)

Hugo 사이트의 모든 페이지에 챗봇을 추가하는 가장 좋은 방법은 파셜을 만드는 것입니다:

Hugo 프로젝트의 layouts/partials/ 디렉토리로 이동하세요
asyntai-widget.html이라는 새 파일을 만드세요
이 파일에 Asyntai 임베드 코드를 붙여넣으세요:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

테마의 baseof.html 파일을 여세요 (보통 layouts/_default/baseof.html에 있음)
닫는 </body> 태그 앞에 파셜을 추가하세요:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

파일을 저장하고 Hugo 사이트를 다시 빌드하세요

팁: 파셜을 사용하는 것은 Hugo에서 재사용 가능한 컴포넌트를 포함하는 권장 방법입니다. 이 방법은 baseof.html 템플릿을 사용하는 모든 페이지에 챗봇이 표시되도록 하며, 이는 일반적으로 사이트의 모든 페이지에 해당합니다.

대체 방법 1: Head 파셜에 추가

테마에 head 파셜이 있으면 거기에 코드를 추가할 수 있습니다:

테마의 head 파셜을 찾으세요 (보통 layouts/partials/head.html)
존재하지 않으면 프로젝트 루트에 layouts/partials/head.html을 만드세요
이 파일에 Asyntai 삽입 코드를 추가하세요:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

baseof.html의 <head> 섹션에 이 파셜이 포함되어 있는지 확인하세요:

<head>
  {{ partial "head.html" . }}
</head>

참고: 테마에 이미 기존 콘텐츠가 있는 head.html 파셜이 있으면 Asyntai 코드를 추가하기만 하세요. 기존 콘텐츠를 교체하지 마세요.

대체 방법 2: 사용자 정의 JavaScript가 있는 Static 폴더

Hugo의 static 폴더를 사용하는 보다 모듈화된 접근 방식:

Hugo 프로젝트의 static/js/ 디렉토리로 이동하세요
디렉토리가 없으면 만드세요
asyntai-loader.js라는 새 파일을 만드세요
위젯을 로드하기 위해 다음 코드를 추가하세요:

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

baseof.html 또는 푸터 파셜에서 </body> 앞에 이 파일을 참조하세요:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

팁: static/ 디렉토리의 파일은 게시된 사이트의 루트에 그대로 복사됩니다. relURL 함수는 배포에 적합한 올바른 상대 경로를 생성합니다.

대체 방법 3: Hugo 설정 (config.toml/yaml)

설정을 통해 사용자 정의 스크립트를 지원하는 일부 Hugo 테마의 경우:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

참고: 이 방법은 테마가 customJS 매개변수를 지원하는 경우에만 작동합니다. 테마 문서를 확인하세요. 테마 사용자 정의를 통해 data-asyntai-id 속성도 추가해야 할 수 있습니다.

대체 방법 4: 프론트 매터 (페이지별)

특정 페이지에만 챗봇을 추가하려면:

페이지의 프론트 매터에 사용자 정의 매개변수를 추가하세요:

---
title: "My Page"
asyntaiWidget: true
---

baseof.html 또는 파셜에 조건부 로직을 추가하세요:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

팁: 이 접근 방식은 챗봇을 포함할 페이지를 세밀하게 제어할 수 있습니다. 특정 섹션에만 위젯을 원하는 문서 사이트에 유용합니다.

대체 방법 5: 테마 레이아웃 재정의

테마 파일을 수정하지 않고 테마 레이아웃을 재정의하려면:

themes/your-theme/layouts/_default/에서 테마의 baseof.html을 복사하세요
프로젝트의 layouts/_default/baseof.html에 붙여넣으세요
닫는 </body> 태그 앞에 Asyntai 임베드 코드를 추가하세요
저장하고 사이트를 다시 빌드하세요

중요: 테마 파일을 재정의하면 테마가 업데이트될 때 해당 파일에 대한 업데이트를 자동으로 받지 못합니다. 이 방법은 완전한 제어를 제공하지만 더 많은 유지 관리가 필요합니다. 테마 업데이트를 쉽게 하려면 대신 파셜 사용을 고려하세요.

3단계: 빌드 및 배포

코드를 추가한 후 Hugo 사이트를 빌드하세요:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

생성된 사이트는 public/ 디렉토리에 있습니다
이 디렉토리를 호스팅 플랫폼(Netlify, Vercel, GitHub Pages 등)에 배포하세요

팁: 개발 중에는 hugo server를 사용하여 http://localhost:1313에서 사이트를 로컬로 미리 볼 수 있습니다. 챗봇은 모든 페이지의 오른쪽 하단에 표시되어야 합니다.

4단계: 설치 확인

Hugo 사이트를 배포한 후 새 브라우저 탭에서 열어보세요. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.

위젯이 보이지 않나요? 변경 후 hugo 명령으로 사이트를 다시 빌드했는지 확인하세요. 대시보드에서 YOUR_WIDGET_ID를 실제 위젯 ID로 교체했는지 확인하세요. 브라우저 캐시를 지우거나 시크릿 모드에서 확인하세요. CDN을 사용하는 경우 캐시를 무효화해야 할 수 있습니다. 브라우저 콘솔(F12)을 열어 JavaScript 오류가 있는지 확인하세요.