Leon Fong 的个人网站
·
如何给你的个人网站添加点赞功能
💡
原文中文，约2600字，阅读约需7分钟。
📝
内容提要
本文介绍了博客添加点赞功能的过程，包括SVG绘制点赞按钮、CSS实现动画效果和数据持久化的实现。
🎯
关键要点
- 重构博客，添加点赞功能。
- 点赞按钮由两个爱心形状的 SVG 组成，一个为前景，一个为背景。
- 使用 mask 标签定义遮罩元素，设置透明矩形作为遮罩区域。
- 通过 CSS 的 translateY 属性实现点赞动画，最多点击 5 次才能看到完整的爱心形状。
- 点击时显示 '+1' 字样，并在第三次点击时扩散 mini 爱心。
- 使用 Framer Motion 动画库实现更有趣的交互效果。
- 数据持久化通过数据库保存用户点赞次数和文章总获赞次数。
- 每次点击发送 POST 请求，存储用户 IP 和文章 ID，返回当前点赞次数。
- 用户再次进入页面时发起 GET 请求，获取当前点赞状态。
- 总结点赞功能的实现过程：绘制图标、制作动画、数据持久化。
➡️
