Обратная связь необходима для улучшения любого продукта. Страница документации ничем не отличается от других частей продукта. Для развития продукта очень важно собирать отзывы пользователей. Этот пост поможет вам добавить виджет обратной связи в документацию docusaurus.
Привет, я создал Happy React. Happy React — это многоцелевой виджет обратной связи. С его помощью вы можете добавлять виджеты на страницы документации. Я позаботился о производительности и простоте использования.
Основные характеристики:
- Бесплатный (скоро будет с открытым исходным кодом)
- Безголовая стилизация
- Легкий и быстрый виджет
- Аналитика
Давайте начнем
Сначала нам нужно извлечь DocItemFooter с помощью Swizzle. Выполните команду swizzle:
npm run swizzle
Затем выберите @docusaurus/theme-classic и из выпадающего списка выберите DocItemFooter.
После этой операции в каталоге src/theme должен появиться DocItemFooter. С этого момента Docusaurus будет импортировать этот компонент вместо оригинального.
Далее нам нужно создать компонент Feedback и прикрепить его в DocItemFooter.
// src/components/Feedback/index.js
import React from 'react';
export default function Feedback({ resource }) {
return (
<div>
Our feedback component for page {resource}
</div>
);
}
Затем нам нужно использовать этот компонент:
import React from 'react';
[...]
import Feedback from '../../components/Feedback';
export default function DocItemFooter(props) {
[...]
const {
editUrl,
lastUpdatedAt,
formattedLastUpdatedAt,
lastUpdatedBy,
tags,
unversionedId, // You need to get current page id
} = metadata;
[...]
return (
<>
<Feedback resource={unversionedId} />
<footer
className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}
>
{canDisplayTagsRow && <TagsRow tags={tags} />}
{canDisplayEditMetaRow && (
<EditMetaRow
editUrl={editUrl}
lastUpdatedAt={lastUpdatedAt}
lastUpdatedBy={lastUpdatedBy}
formattedLastUpdatedAt={formattedLastUpdatedAt}
/>
)}
</footer>
</>
);
}
После этого мы должны получить наш компонент обратной связи под содержимым на каждой странице документации.
Эффект после правильного добавления компонента обратной связи
Все готово! Мы можем использовать этот компонент для установки виджета обратной связи. Вот StackBlitz, где вы можете увидеть весь код.
В следующей части этого поста я покажу вам, как настроить Happy React для сбора отзывов. Хотя, если вы не хотите его использовать, вы можете посмотреть компонент обратной связи React Native docs для справки.
Что дальше?
Ознакомьтесь с интеграцией Happy React docusaurus для молниеносной и надежной интеграции виджета обратной связи с аналитикой.