У цій статті я розповім вам, як використовувати GitHub коментарі(utterances) для вашого блогу. Це дозволить вам зберігати коментарі в репозиторії на GitHub, а не на власному сервері. Це означає, що ви можете використовувати вже наявну інфраструктуру GitHub для управління коментарями, таку як авторизація, сповіщення та історія змін.
План по підключенню GitHub коментарів
- Створіть новий репозиторій на GitHub, який буде використовуватися для зберігання коментарів.
- Підключіть до репозиторій utterances-app.
- Встановіть utterances на вашому блозі.
- Опублікуйте ваш блог з GitHub коментарями.
- Насолоджуйтесь коментарями від своїх читачів.
Створення репозиторію на GitHub
Створіть новий репозиторій на GitHub, який буде використовуватися для зберігання коментарів. Ви можете назвати його будь-як, наприклад, blog-comments. Потрібно зробити репозиторій публічним, щоб коментарі були доступні для всіх.
Підключення до репозиторію utterances-app
Підключіть до репозиторію utterances-app. Це дозволить вам зберігати коментарі в репозиторії на GitHub. Перейдіть на сторінку utterances-app) та натисніть кнопку “Install” для підключення до вашого репозиторію.
Встановлення utterances на вашому блозі
Встановіть utterances на вашому блозі. Додайте на вашу сторінку блогу скрипт, який відображатиме коментарі. Вам потрібно вказати назву репозиторію, в якому будуть зберігатися коментарі, та шлях до сторінки блогу, на якій будуть відображатися коментарі.
На офіційній сторінці є прикад підключення скрипта з опціями, такими як тема, шляхом до репозиторія та ішшими опціями. Ось приклад скрипта:
<script
src="https://utteranc.es/client.js"
repo="owner/repo"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async
></script>
Якщо ви використовуєте React, ось приклад використання компоненту:
import { useEffect, useRef } from "react";
const Comments = () => {
const ref = useRef < HTMLDivElement > null;
useEffect(() => {
const isDarkMode = document.querySelector("html")?.dataset.theme === "dark";
const script = document.createElement("script");
script.src = "https://utteranc.es/client.js";
script.setAttribute("repo", "EarlOld/blog-comments");
script.setAttribute("issue-term", "pathname");
script.setAttribute("theme", isDarkMode ? "github-dark" : "github-light");
script.setAttribute("crossorigin", "anonymous");
script.async = true;
ref.current?.appendChild(script);
}, []);
return <div ref={ref} />;
};
export default Comments;
Код, що знаходиться нижче, перевіряє, чи включений темний режим на вашому сайті, і встановлює тему для коментарів відповідно до цього. Спрацює, звичайно, тільки при першому завантаженні сторінки, але в будь-якому випадку це краще, світла тема для світлого сайту, а темна для темного.
const isDarkMode = document.querySelector("html")?.dataset.theme === "dark";
Вигляд коментарів для світлої теми
Вигляд коментарів для темної теми
Відео
Висновок
Utterances - це простий спосіб додати коментарі до вашого блогу за допомогою GitHub. Ви можете використовувати вже наявну інфраструктуру GitHub для управління коментарями, таку як авторизація, сповіщення та історія змін. Будь ласка, поділіться своїми враженнями в коментарях нижче. Якщо у вас є питання, я з радістю на них відповім. Дякую за увагу!