目前已经开源了,希望大家能够动动小手点个star, 非常感谢🫡🎉🎉🎉,
项目地址: github.com/SunFei12345…
在线体验: sunfei.site/#/
介绍
2024年新版的个人博客,采用react + ts + tailwindcss + daisyui + axios 等技术栈开发. 该项目通过前端的最新技术栈,开发一款多模块集成,高度个性化且实用和简洁的个人博客.
模块介绍
- 各大社区媒体短视频的热点新闻速览
- 个人常用的设计UX/UI网站,AI网站,编程网站进行一个聚合
- 个人日记随笔记录
- 个人的技术文章分类归档
- 留言板功能,获取游客的建议or想法
- 包括不限于学习的其他方向的知识的文章的归总等等
功能介绍
- 32套色彩主题 + 4款预设图片背景主题 + 自定义图片背景主题
- 4款预设字体 随心换
- 抖音当日热点订阅定时推送(corn+webSocket)
- 暗黑亮白主题一键切换
- 色彩主题模式 + 图片背景模式 一键切换
- 页面之间导航动画化,更加丝滑(react-framer-motion)
- 工具聚合网站标签化查找
- 请求loading动画优化,文章详情页loading动画优化,各个页面loading动画优化等等
- 留言板随机bing壁纸
- 留言板块采取游客模式
- 评论展示用户的地理位置,设备信息等等.
- 聚合各大短视频or社区平台的热点新闻进行展示.
- 用户头像上传服务器前进行压缩处理,减少服务器的压力
- 采用tailwindcss的响应式完美兼容了移动端展示.
- ...
项目展示
主题展示
还有更多色彩主题,这里不再一一展示,更多欢迎大家访问sunfei.site/#/ 进行体验
各个页面展示
手机端展示
项目的进度历史
9/24
bug修复 + 体验优化
- 图片回显采用前端来做, 之前的做法是上传之后后端返回响应url,渲染, 这样大大增加了服务器的请求次数,而且前端渲染起来也不友好
- 使用Compressor库在图片上传至服务器前, 进行一次图片的压缩操作, 降低了服务器的压力
- 个人文章模块的头像替换为个人的, 放在前端上面,默认的
- 留言板模块输入的表情可以正常显示了,前面出问题是后端设置的DSN连接后面加上了字符集UTF8,而线上数据库因为mysql版本较低设置了utf8mb4字符集. 所以不一致导致了表情无法正常显示.
9/26 修复 + UI优化
- 调整了进度记录的UI展示效果
- 修复了website_module下的不同主题下文本色彩不匹配的问题
功能添加
- 自定义了三个预设背景图片 + 三套适配该图片的主题色, 分别为自然风景,碧海蓝天,城市行人三套主题.
- 配置面板允许用户在 默认主题色彩模式 和 背景图片主题模式 进行切换.
是否需要存储在数据库, 我想是没有必要在目前的设计下, 因为该site是完全公开的,不需要登录注册. 对于每个用户,他们修改了之后主题配置之后,这些信息将会存储在浏览器的本地localStorage中.如果用户不清楚该站点的本地存储信息的话, 那么下次登录依旧使用上吃配置的site config.
9/27 修复 + UI优化
- 昨天部署之后,由于在本地存储的时候使用的是相对路径,而线上图片资源被打包后的命名发送了改变,所以切换时候找不到图片资源. 于是使用import方法导入图片资源,在本地存储的时候使用import 导入的图片变量这样可以避免.
功能添加
- 个性化模块引入 三套预设字体. 允许用户自由选择站点内字体.
9/28 修复 + UI优化
- 修复文章评论模块的背景颜色在图片背景模式下的不匹配
- 修复了个性化配置的图片主题下的文字(主题名称)的颜色显示不确定的问题.
功能添加
- 订阅频道,消息推送功能.
用户可以在设置里面订阅两个频道,(多选). 分别为
每日热点新闻
+每日天气情况
用户a,进入网站,打开设置, 开启抖音推送,---> 开启定时任务, 设置推送间隔 --> 刷新定时任务
用户a,再次进入网站,读取本地的推送设置,订阅频道,推送间隔 --> 请求接口 --> 开启定时任务. 没有则不开启定时任务.
推送间隔暂时放弃, 因为本网站是公开的, 无需登录注册. 所以无法记录每个用户的setting设置. 后端那边也无法记录> 用户设置的间隔时间. 所以暂时不做推送功能. 只设置开启推送的开关, 不设置推送间隔时间.
9/29 修复 + UI优化
- 修复了文章评论输入框在pc端的height 数值不准确.
功能添加
- 订阅定时推送
10/2
修复 + UI优化 图片背景模式
- 站点配置的close按钮 取消掉 换成右上角的X icon 图标 ✅
- 文章模块下的二级页面 即文章列表下的文字颜色不明显 应该换成浅白色 ✅
- 文章详情页面,代码块的背景色也变透明了,应该和色彩模式下保持一致的
- 城市行人主题下的我的诗模块 打卡之后弹出的dialog 的文字和背景是一个字,修复应该背景白色,文字黑色。✅
- 图片模式下我的诗的drawer 文字颜色和背景颜色一致 修复。✅
- 图片模式下我的诗modal打开后按钮看不出来的问题
- 图片模式下 setting的抖音订阅的switch 切换按钮看不出来
- 用户信息填写的文字和背景颜色一致, 修复为白色背景 黑色文本✅
其他修复
- 在移动端的时候 把setting icon 移到导航栏上, 只需要使用icon即可,简约 ,用户也可以看明白的 ✅
- 🌇海峡主题的主色调换成橙色比较好些 ✅
- 文章列表下的每篇文章的describtion 限制为3行。 排版保持一致 ✅
功能添加
- 我的诗模块中抽屉drawer里面内容填写成我的话。 ✅
- 新增了一个马赛克风格的字体 ✅
- 将黑暗 dart 和 亮白 light 主题 单独做成icon切换 放在navbar ✅
10/6
其他事项
- 将网站进行了域名注册, 配置了ssl证书✅
- 修复ws --> wss 协议✅
- 配置了反向代理✅
- 后端头像返回的url 设置为代理的target_url✅
- 不断调整在图片模式的各个细节地方的适配效果✅
- 对于设置面板添加了随机pc,mobile 端的在线链接,扩展性更好✅