Hyvor Talk로 Vue 애플리케이션에 댓글 추가하기

Vue.js에서 제공하는 웹사이트, 애플리케이션 또는 블로그가 있습니까? 아니면 Vuetify 또는 Nuxt 같은 Vue 기반 프레임워크를 사용하고 있나요? 이 가이드에서는 Hyvor Talk commenting platform을 사용하여 Vue 애플리케이션에 댓글을 추가하는 방법을 설명합니다.

먼저 하이버톡이란?

Hyvor Talk는 모든 웹사이트(많은 platforms)를 지원하는 내장형 완전한 기능의 댓글 플랫폼입니다. 시장에서 사용할 수 있는 다른 유사한 옵션 중에서 Hyvor Talk는 몇 가지 이유로 특별합니다.

프라이버시 중심 -- 귀하 또는 귀하의 방문자 데이터를 판매하지 않으며 귀하의 웹사이트에 광고/추적을 하지 않습니다.

빠르고 가볍습니다.

완전히 사용자 정의할 수 있습니다.

최고의 중재 패널 및 도구.

Vue 기반 사이트에서 Hyvor Talk를 사용하는 방법

1단계: Hyvor Talk Console에 사이트 등록

우선 몇 분 안에 가입할 수 있는 Hyvor 계정이 필요합니다. 등록here . 그런 다음 Hyvor Talk console 으로 이동합니다. 콘솔에서 웹 사이트 세부 정보를 추가하는 두 개의 필드를 찾을 수 있습니다. 원하는 경우 여기에 여러 웹사이트를 추가할 수 있습니다.



그러면 왼쪽 상단 모서리에 새로 추가된 웹사이트와 해당 웹사이트와 관련된 모든 컨트롤러가 표시됩니다. 이 패널은 Hyvor Talk 통합을 제어하고 맞춤설정할 수 있는 전체 권한을 부여합니다.

2단계: 사이트에 Hyvor Talk 통합

hyvor-talk-vue npm 라이브러리를 사용하여 Vue JS 기반 웹사이트에 Hyvor Talk를 쉽게 설치할 수 있습니다. 설치를 시작하겠습니다.

npm install hyvor-talk-vue

또는

yarn add hyvor-talk-vue

다음으로 위에서 설치된 Hyvor Talk vue 라이브러리를 웹 페이지로 가져옵니다. 이 라이브러리에는 Embed 및 CommentCount의 두 가지 주요 구성요소가 있습니다.

Embed -- 댓글 삽입

CommentCount -- 페이지의 댓글 수 렌더링

import { Embed } from 'hyvor-talk-vue'
...

이제 댓글을 달아야 하는 곳에 'Embed' 컴포넌트를 배치할 수 있습니다.

<template>
     <div>
          <Embed websiteId={WEBSITE_ID} id={WEBPAGE_IDENTIFIER} />
     </div>
</template>

WEBSITE_ID-- 웹 사이트의 고유 식별자입니다. 계정 콘솔의 General 영역에서 복사할 수 있습니다.

WEBPAGE_IDENTIFIER -- 현재 페이지를 식별하는 고유 ID입니다. 페이지마다 다른 댓글 섹션을 로드합니다. 이를 설정하지 않으면 페이지의 표준 URL이 식별자로 사용됩니다.

팁: 사용자가 아래로 스크롤할 때 댓글을 로드하려면(지연 모드) loadMode="scroll" 속성을 추가하여 다음과 같이 구성요소를 삽입하세요.

<Embed websiteId={WEBSITE_ID} loadMode="scroll" />

loadModes에 대한 여러 값이 있습니다.

댓글 수

사용자가 웹 사이트에 계속 참여하도록 각 기사의 댓글 수를 표시하는 별도의 구성 요소가 있습니다. hyvor-talk-vue에서 CommentCount 구성 요소를 가져오기만 하면 됩니다.

import { CommentCount } from 'hyvor-talk-vue'
...

<CommentCount websiteId={WEBSITE_ID} id={WEBPAGE_IDENTIFIER} />

WEBPAGE_IDENTIFIER-- 페이지/게시물의 고유 식별자입니다. Embed 구성 요소에서 설정한 것과 동일한 것을 사용합니다. 여기에 ID를 설정하지 않은 경우 여기 페이지의 표준 URL을 사용해야 합니다.

vue 애플리케이션에 주석을 추가하는 것이 이렇게 간단합니다. 그리고 사용 가능한 많은 사용자 정의가 있습니다. 콘솔에서 확인하거나 설명서에서 자세한 내용을 확인할 수 있습니다. 질문이 있으시면 아래에 의견을 남겨주십시오.

자원

Hyvor Talk Documentation

Hyvor Talk Vue Library