给网站添加相关内容推荐、随机推荐的实践
做静态博客或者小网站，大家肯定都有过类似的感觉：
一篇文章辛辛苦苦写完发布，刚发那几天可能有点动静，过段时间就沉到底下吃灰去了。读者顺着搜索或者外链点进来，读完手头这篇，底部除了个灰扑扑的“上一篇 / 下一篇”，基本就没啥可看的了，关掉标签页就走。
为了让读者多看两眼，也让老文章多点露脸机会，我最近给网站文末加上了相关内容推荐和随机推荐、动画。
整个改造过程挺顺手，这里把实现的思路、我的思考和做法简单记一下。
1. 推荐内容放在哪儿最有效？
读者如果能把整篇文章滑到底，说明对内容本身是感兴趣的，这时候注意力还没完全散掉。
所以直接把推荐模块嵌在文章正文末尾。读完了当前这篇，视线很自然就落到了底下的推荐卡片上，直接能看到更多相关内容，用户也可能是感兴趣的，再之后才是随机推荐的文章，再结合一些动画，让页面更生动。
2. 相关内容推荐（5篇）：顺藤摸瓜
有时候读者是带着具体问题来的（比如找某个 PDF 工具或者代码技巧），读完后大概率还想看同类的东西。
相关推荐的做法并不复杂：
- 匹配规则：拿当前文章的分类、标签和全站文章做对比。分类相同的加 3 分，标签命中的每个加 2 分。
- 篇数设定：挑得分最高的 5 篇。如果文章太新、同类太少凑不够 5 篇，就拿其他内容随机补齐，保证排版整齐。
- 卡片展示：每个卡片包含文章标题和一段纯文本摘要。摘要是在生成时过滤掉 Markdown 标记和代码块后的前几十个字，读者扫一眼大概就知道是不是自己想要的。
3. 随机推荐（10篇）：随手抽盲盒
相关推荐解决的是“精准延伸”，但纯靠标签匹配，读者容易局限在一个小圈子里，而且很多早期的杂项笔记永远排不上号。
这时候“随机推荐”就派上用场了：
- 篇数设定：直接做了 10 篇，展示在相关推荐后面。
- 规则：优先排除掉当前文章和前面已经选出的 5 篇相关文章，避免重复推荐，然后用 Fisher-Yates 算法在剩余池子里随机抓取。
- 体验：每次重新生成或者翻到不同页面，底下的推荐内容都不一样，给用户一些随机的新鲜事儿。
4. 卡片样式：用鲜艳明亮的颜色抓眼球
以前很多网站的推荐就是一排密密麻麻的文字列表，样式灰暗沉闷，几乎勾不起任何点击欲。
这次我特意换了思路，把卡片做成颜色各不相同的亮色块：
- 准备了一套高透光、治愈明朗的渐变色调色盘（暖阳橙、晴空蓝、薄荷绿、晨曦紫、早春青、落日杏等）。
- 每个卡片按顺序循环分配不同的亮色背景。
- 文字采用高对比度的纯白色，标题粗体放大，摘要半透明细字衬托。
- 添加了自动滚动的动画，眼睛天然会关注一些运动的东西，会关注到内容推荐的滚动
整齐划一的彩色小卡片往文末一摆，视觉冲击力很强，原本死板的静态页面一下子活泼了起来，用户视线滑到底部时会本能地多停几秒。
技术改造成本低、提升访问量
整个逻辑是在 Hexo build 构建期直接把卡片注入到 HTML 里，既不依赖后台数据库和接口开销，也不会拖慢页面加载速度。思路有了，AI做起来也很快。
改完之后实际看下来，文末确实不再冷清了。5 篇相关内容负责解决深度探索，10 篇随机推荐负责制造意外惊喜，再配上明快的彩色卡片、动画滚动，网页也生动起来了，页面访问量也能提升。