blog 点赞被直接刷爆，学到了

[suni]

今天不是说 blog 加一个点赞嘛，想着 阿里云函数+kv 就好了

但是发现 couldflare worker + kv 不要钱，于是乐呵呵的就加了（发现 couldflare 操作面板还是很舒服的嘛，没想的那么老）

然后嘞，几个小时，就崩溃了，请求量 116k，然后邮件直接说：kv get 10 万次用完了。write 应该早 g 了。

我有点懵，啥情况。。。

晚上倒腾了下，kv 确实不合适做这个，要用 d1 ，每天用量是 5 百万次，这就宽裕很多。

再加上网关限制，不知道这能抗多久。随他吧，反正也不要钱。

长个教训，不知道哪里的文章误导我用 kv 的，确实用数据库多好。

再夸 worker 写起来真方便，接入 kv/d1 都直接接好了。大部分都可以 UI 操作，真滴棒。

（对咯，你们一直吐槽的动画卡，应该好一些咯，背景的动态画布我调了下）

blog 地址：yysuni.com

已经开源了哈，需要的可以直接到最新帖子： https://www.v2ex.com/t/1173132

[codehz]

d1 也不适合，最适合的是 durable object

[suni]

@codehz 是吗？可是那个要收费耶 _(:⑧」∠)_

[since2021]

什么文章这么受欢迎

[liuidetmks]

好了，我知道你是来炫博客的，（确实也漂亮）
动画流畅灵动，设计也跟上了最新的玻璃效果，👍

[4seasons]

确实做的漂亮，我都想 ai 给你的样式风格抄过来了

[zealotxxxx]

@4seasons #5 哈哈哈哈，同
确实是很舒服的设计

[suni]

@since2021 不是，是被攻击的那种，应该是莫个 v2 兄，顺手攻击着玩，攻击完应该 gigigi 的笑嘞 🤣

[suni]

是想把自己做的好的东西拿出来给大家看的，但更多是分享东西，也分享经验嘛 😁

[jellyX]

太好看啦, 源码有木有

[suni]

@jellyX 等我写的差不多了，安全性问题也好些了，我就开源出来。安全性问题在上次提到 https://www.v2ex.com/t/1172382?p=1#reply24

[uCharles]

仓耳今楷的字体挺好看的，也可以作为备用哦

[suni]

@uCharles 确实确实好看，但感觉好像要授权费 😢

[bensky]

半分钟没打开，需要什么姿势？

[bryanwongxin]

好漂亮。。。

[tanranran]

做的真好看，未来会开源吗？

[suni]

@bensky 那啥，这个是 couldflare + vercel 的服务，一般国内访问还行，特殊情况 vpn 效果更佳 🙌

[suni]

@tanranran 我本身 持可开源 可不开源的态度的， 你们要，我肯定会给的 👌

[codehz]

@suni sqlite 后端的不需要了，那个就是 D1 的上位替代，解决了 D1 的一大堆问题（现在 D1 基本都不维护了，几年前画的大饼都没了，https://github.com/cloudflare/workers-sdk/issues/2733 我发的 issues ，直接被关了）

[ronyin]

挺漂亮的。哈哈哈

[suni]

@codehz 好的好的，哥，不要钱，那我就得学习学习了😘

[suni]

@codehz 已点赞，已关注。还是二次元大佬，还玩无限暖暖，嘿嘿嘿💕

[since2021]

@suni https://turso.tech/
这个免费额多

[JimLee0921]

很好看，如果有能力真想用前后端分离仿照一个啊🤩

[mokeyjay]

博客挺好看的，点赞。就是没做移动端可惜了

[Jmeow]

非常清爽好看的 Blog ，点赞

[suni]

@mokeyjay 会的 会的

[suni]

@since2021 已收集，3q

[suni]

@JimLee0921 就是纯前端静态不依赖后端喔

[linyi01]

插个眼，等开源后来学习一波

[ilaipi]

这个是没 seo 的吗？看起来页面源码不是那种纯 html 的。

感觉非常流畅，比我用 nuxt 做的流畅太多了。如果导出成纯 html ，seo 那种，仍然这么流畅吗？

[suni]

@ilaipi 其实 seo 是能做的，就是懒🤣，文档逻辑就是 ui 提交代码到 github ，我放在了 public 所以不能预编译，其实直接提交到 app 目录，seo 就有了。现在 seo 还有啥用喔 😂

[haibing]

期待开源

[yb2313]

打不开

[LeegoYih]

我一直在想类似微博的这种大并发点赞要怎么实现，想了一个方案不知道可不可行

[whoami9426]

好看的博客 这种风格怎么设计的?

[ANDERKAISA]

期待开源

[suni]

@yb2313 那啥，这个是 couldflare + vercel 的服务，一般国内访问还行，特殊情况 vpn 效果更佳 🙌

[suni]

@LeegoYih 你说说，我听听

[suni]

@whoami9426 这个，就要长期培养自己的美感啊，你能清晰明白怎么是好看的，你也得认识到，别人反驳的时候你是觉得是个人想法还是你自己确实过时了。就多尝试，多看，多尝试，大胆一点。

[LeegoYih]

1. 用户点击点赞按钮，接口发送 Kafka 消息，返回响应结果
2. 处理 Kafka 消息，写 ClickHouse ，新增一条`| 用户 ID | 推文 ID | +1 |`的数据；用户取消点赞，则新增一条`| 用户 ID | 推文 ID | -1 |`的数据（类似冲销？）
3. 处理 Kafka 消息，写 Redis ，无论是否否命中都直接`INCR`，如果不存在会自动从 1 开始
4. 用户查看某个推文时，点赞数为数据库中的点赞数加上 Redis 中的点赞数
5. 定时每小时扫描各个 Redis 分片的 Key ，将 Redis 中的点赞数加到数据库，然后删除 Key
6. 不活跃的推文自然就从 Redis 中移除，活跃的推文会通过下次点赞再次在 Redis 中累计
7. 用户二次进入到页面，通过用户 ID 和推文 ID 查询 ClickHouse 的数据判断是否已经点赞

[cvooc]

背景图颜色看着挺舒服的, 想鬼鬼祟祟偷一下 css 来着, 结果一看是 canvas 画的, 这样不会影响性能吗

[suni]

@cvooc 哈哈哈 鬼鬼祟祟，因为背景是动态的呀

[suni]

只是背景动的慢

[badbay]

哇塞，楼主的博客真好看

[suni]

@badbay 谢谢夸奖

[yechentide]

[silvernoo]

好看计划开源吗

[suni]

@silvernoo 会的，会的 🙌❤️

[Lant248]

blog 风格好好看

[sincw]

不错不错，流畅了很多，赞一个

[asen001]

配色看的舒服 👍

[ethusdt]

@LeegoYih #40 步骤 2 和 3 会计算重复吗，再加上第 5 条也会累加么。这个系统设计的有点太重了，针对 op 这个博客系统有点杀鸡宰牛感觉。

[94]

@suni #31 ，有用啊，很多自然流量就是通过搜索引擎进来的。
没有 SEO 就没有很好的收录，流量就会少很多。没人看那博客不就是圈地自萌了吗？
特别是国内 Baidu 会用的比较多，Baidu 对于 CSR 内容的解析能力还是很弱鸡的。

我看 OP 你都在用 NextJS 了，启用一下 SSR 或者 SSG 能力就好了。

----

卡的问题优化过了之后，现在访问不会明显被感知到了。
但是文章内容的渲染还是会明显觉得些慢。改造成构建时把 MD 转换成 HTML 内容，进入详情时直接读取 HTML 内容应该有很大的提升。

以及 Navigation 并不是 `fixed` 或者 `sticky` 的，所以在看完文章回到文章列表的时候会有一点点麻烦。
但是你右侧个人信息又是 `sticky` 的... 感觉是不是没有顾及到。

[toan]

做的真不错，赞一个！👍

[94]

简单用 CSS 复现了一下，颜色和透明度没有细调。动态的话，颜色、位置和大小都可以用 CSS 变量来提供。

```
html {
height: 100vh;
background:
radial-gradient(circle at 5% 95%, #CAEBE0FF 0%, #CAEBE050 15%, transparent 25%) no-repeat,
radial-gradient(circle at 23% 85%, #E9E390FF 0%, #E9E39050 15%, transparent 25%) no-repeat,
radial-gradient(circle at 60% 80%, #A0E7E5FF 0%, #A0E7E550 25%, transparent 40%) no-repeat,
radial-gradient(circle at 90% 80%, #E9E390FF 0%, #E9E39050 25%, transparent 30%) no-repeat,
#EEEEEE;
}
```

@cvooc #41 ，
@suni #42

[suni]

@94 有心了

[suni]

@94 这个背景动画的话，是运动逻辑是有考究的，具体可以看下现在的源码，一个是噪波运动、一个是分离逻辑、一个是空白吸引。是可以用 css 做，但是复现不了的效果是 motion 带来的动态感。

[Aurorataro]

赞一个 有空学习一下