Для создания реакций на сайте без использования плагинов, вы можете использовать HTML, CSS и JavaScript. Вот пример того, как это можно сделать:
1. Создайте HTML разметку для отображения реакций внутри вашего поста:
```html
<div class="reactions">
<button class="like-btn">👍</button>
<button class="dislike-btn">👎</button>
<button class="neutral-btn">😐</button>
</div>
```
2. Добавьте стили CSS для оформления кнопок реакций:
```css
.reactions {
display: flex;
justify-content: center;
}
.like-btn, .dislike-btn, .neutral-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
margin: 0 5px;
}
```
3. Напишите JavaScript код, который будет обрабатывать клики по кнопкам реакций и вызывать соответствующую функцию обратного вызова:
```javascript
document.querySelector('.like-btn').addEventListener('click', like_callback);
document.querySelector('.dislike-btn').addEventListener('click', dislike_callback);
document.querySelector('.neutral-btn').addEventListener('click', neutral_callback);
function like_callback() {
// Добавьте код для обработки лайков
}
function dislike_callback() {
// Добавьте код для обработки дизлайков
}
function neutral_callback() {
// Добавьте код для обработки нейтральных реакций
}
```
4. Для кастомизации реакций в функциях обратного вызова `like_callback()`, `dislike_callback()` и `neutral_callback()`, вы можете добавить соответствующую логику для отображения количества лайков, дизлайков и нейтральных реакций. Например:
```javascript
let likes = 0;
let dislikes = 0;
let neutrals = 0;
function like_callback() {
likes++;
updateReactions();
}
function dislike_callback() {
dislikes++;
updateReactions();
}
function neutral_callback() {
neutrals++;
updateReactions();
}
function updateReactions() {
console.log(`Likes: ${likes}, Dislikes: ${dislikes}, Neutrals: ${neutrals}`);
}
```
Таким образом, вы можете создать реакции для вашего поста на сайте без использования плагинов и кастомизировать их, добавив возможность отображения не только лайков, но и дизлайков, а также нейтральных реакций.