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

Добро пожаловать в Waline. Всего за несколько шагов вы сможете включить Waline, чтобы добавить на свой сайт комментарии и просмотры страниц.

Развёртывание сервера

Vercel

1. Нажмите кнопку выше, чтобы перейти в Vercel и развернуть сервер.

   Заметка

   Если вы не вошли в систему, Vercel предложит зарегистрироваться или войти. Для быстрого входа используйте аккаунт GitHub.

2. Введите подходящее название проекта Vercel и нажмите Create, чтобы продолжить:

   

   create

3. Vercel создаст и инициализирует новый репозиторий на основе шаблона Waline. Названием репозитория станет только что введённое название проекта.

   

   deploy

   Через одну-две минуты на экране появится фейерверк в честь успешного развёртывания. Нажмите Go to Dashboard, чтобы перейти в панель управления приложением.

   

   deploy

Создание базы данных

1. Нажмите Storage в верхней части, чтобы открыть страницу настройки хранилища, затем выберите Create Database. В качестве Marketplace Database Providers выберите Neon и нажмите Continue, чтобы продолжить.

   

   neon

2. Вам будет предложено создать аккаунт Neon. Нажмите Accept and Create, чтобы принять условия и создать его. Затем потребуется выбрать тариф базы данных, включая регион и квоту. Можно оставить всё по умолчанию и нажать Continue.

   

   neon

3. Далее вас попросят задать имя базы данных. Его также можно оставить без изменений и нажать Continue.

   

   neon

4. Теперь в разделе Storage должен отображаться только что созданный сервис базы данных. Нажмите на него и выберите Open in Neon, чтобы перейти в Neon. В интерфейсе Neon выберите SQL Editor на левой боковой панели, вставьте в редактор SQL-выражения из waline.pgsql и нажмите Run, чтобы создать таблицы.

   

   neon

   

   neon

5. Через некоторое время появится уведомление об успешном создании. Вернитесь в Vercel, нажмите Deployments в верхней части и нажмите кнопку Redeploy справа от последнего развёртывания. Этот шаг гарантирует, что только что настроенный сервис базы данных вступит в силу.

   

   redeploy success

6. Вы будете перенаправлены на страницу Overview, и начнётся развёртывание. Через некоторое время STATUS изменится на Ready. Нажмите Visit, чтобы открыть развёрнутый сайт. Этот URL и есть адрес вашего сервера.

   

   visit

Привязка собственного домена

1. Нажмите Settings → Domains в верхней части, чтобы открыть страницу настройки домена.

2. Введите домен, который хотите привязать, и нажмите Add.

   

   Add domain

3. Добавьте новую запись CNAME у вашего регистратора домена:

   Тип	Имя	Значение
   CNAME	example	cname.vercel-dns.com

4. Дождитесь вступления записи DNS в силу. После этого Waline будет доступен по вашему домену 🎉

   • Система комментариев: example.yourdomain.com
   • Управление комментариями: example.yourdomain.com/ui

   

   success

Подключение в HTML

Вот как добавить Waline на веб-страницу или сайт:

1. Подключите таблицу стилей https://unpkg.com/@waline/client@v3/dist/waline.css в <head>

2. Создайте тег <script> и инициализируйте Waline с помощью init() из https://unpkg.com/@waline/client@v3/dist/waline.js, передав необходимые параметры el и serverURL.

   • Параметр el — это элемент, в котором отрисовывается Waline. В качестве него можно указать CSS-селектор в виде строки или объект HTMLElement.
   • serverURL — ссылка на ваш сервер развёртывания, который вы только что создали в Vercel.
   • Другие параметры см. на странице Параметры компонента

   Пример:

   <head>
     <!-- ... -->
     <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
   </head>
   <body>
     <!-- ... -->
     <div id="waline"></div>
     <script type="module">
       import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
   
       init({
         el: '#waline',
         serverURL: 'https://your-domain.vercel.app',
         lang: 'en',
       });
     </script>
   </body>

3. Теперь сервис комментариев успешно работает на вашем сайте 🎉!

Управление комментариями (Панель управления)

1. После завершения развёртывания перейдите на <serverURL>/ui/register, чтобы зарегистрироваться. Первый зарегистрировавшийся становится администратором.

2. После входа в качестве администратора вам станет доступна панель управления комментариями. Здесь можно редактировать, помечать и удалять комментарии.

3. Пользователи также могут зарегистрировать аккаунт через поле комментариев; после входа они будут перенаправлены на страницу своего профиля.

Видеоруководство

Один увлечённый пользователь Waline записал видеоруководство. Если описанные выше инструкции не совсем понятны, можно обратиться к видео: