FastComments.com
Menu Icon

Язык 🇷🇺 Русский
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Документация

Живая демонстрация
В продакшене
Статус поддержки

Начало работы

Установка

Использование

Использование
Обновление текущей страницы (пример SPA)

Add Comments to Your Vue 2 App

Это официальная библиотека Vue 2 для FastComments.

Виджеты комментариев FastComments для Vue 2

Репозиторий

Просмотреть на GitHub

Живая демонстрация Internal Link

Чтобы просмотреть все виджеты и потоки, работающие локально против публичного demo арендатора, клонируйте репозиторий и запустите:

npm install
npm run serve

У отдельных демонстраций также есть собственные точки входа (npm run serve-collab-chat, serve-live-chat, serve-image-chat, serve-pagination, serve-toggle-dark-mode) в каталоге dev/.

Установка Internal Link

NPM

npm install --save fastcomments-vue

Yarn

yarn add fastcomments-vue

Использование Internal Link

Виджет комментариев

Компонент FastCommentsVue содержит живой виджет комментариев FastComments.

Замените "demo" ниже на ваш "tenantId" — доступный здесь в административной панели FastComments.

Виджет поддерживает множество опций - смотрите FastCommentsConfig здесь.

<script lang="ts">
import Vue from 'vue';
import FastCommentsVue from 'fastcomments-vue';

export default Vue.extend({
  name: 'ServeDev',
  components: {
    FastCommentsVue
  }
});
</script>

<template>
  <div id="app">
    <fast-comments-vue v-bind:config="{tenantId: 'demo'}" />
  </div>
</template>

Обновление текущей страницы (пример SPA) Internal Link

В FastComments идентификатор статьи или страницы, к которой привязаны комментарии, называется URL ID, поскольку это может быть URL или идентификатор. Определите URL ID следующим образом. Компонент отслеживает изменения в объекте конфигурации и будет перезагружаться, поэтому вы можете просто обновить настройки "url" и "urlId".

См. полный рабочий пример здесь.

Запустите пример пагинации командой:

npm run serve-pagination
<fast-comments-vue v-bind:config="{tenantId: 'demo', url: 'https://example.com', urlId: 'some-page-id'}" />

Регион аккаунта (ВНИМАНИЕ: клиенты ЕС)

Если ваш аккаунт находится в ЕС, установите region = 'eu' в конфигурации виджета, например:

<fast-comments-vue v-bind:config="{tenantId: 'demo', url: 'https://example.com', urlId: 'some-page-id', region: 'eu'}" />

В противном случае вам не нужно задавать region.

В продакшене Internal Link

Вам, вероятно, не стоит определять конфигурацию inline, если вы передаёте колбэки и т. п. Вместо этого вам следует определить конфигурацию в блоке computed, иначе каждый раз, когда будет вызываться ваш колбэк и т. п., весь виджет будет перерисовываться.

См. пример со спиннером, чтобы узнать, как это сделать.

Статус поддержки Internal Link

Эти компоненты являются оболочками вокруг наших основных компонентов VanillaJS. Мы можем автоматически обновлять эти компоненты (исправлять ошибки, добавлять функции) без публикации этой библиотеки, так что, хотя она может некоторое время не публиковаться, это не означает, что FastComments не находится в активной разработке! За обновлениями заглядывайте в наш блог. Ломающие изменения API или новые функции никогда не будут внесены в лежащую в основе core-библиотеку без повышения версии этой библиотеки.

Нужна помощь?

Если вы столкнулись с проблемами или у вас есть вопросы по поводу Vue 2 Library, пожалуйста:

Вклад

Вклады приветствуются! Пожалуйста, посетите репозиторий на GitHub для правил внесения вклада.

Внести вклад в это руководство