前言

今天为博客进行了一次重大的功能升级，主要添加了三个核心功能：GitHub评论系统、相关推荐文章和小剪刀分割线装饰。这些功能的加入让博客的用户体验得到了显著提升。

功能亮点

1. GitHub评论系统

使用Utterances评论系统，基于GitHub Issues实现：

1
2
3
4
5
6
7
<script src="https://utteranc.es/client.js"
        repo="maomao725.github.io"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

优势：

  • 无需额外注册，使用GitHub账号即可评论
  • 支持Markdown语法和代码高亮
  • 自动适配深色/浅色主题
  • 完全免费且稳定

2. 相关推荐文章

在文章底部智能推荐相关内容，提高用户粘性：

  • 基于标签和分类的智能匹配
  • 卡片式布局，包含封面图片
  • 悬停动画效果
  • 响应式设计

3. 小剪刀分割线

精美的装饰性分割线，用于分隔不同内容区域：

  • 渐变背景效果
  • 中间带小剪刀图标 ✂
  • 支持主题切换
  • 提升视觉层次感

技术实现

CSS样式优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.custom-hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 30px 0;
  position: relative;
}

.custom-hr::before {
  content: "✂";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  padding: 0 15px;
  color: #87CEEB;
  font-size: 18px;
}

配置优化

在Butterfly主题配置中启用相关功能：

1
2
3
4
5
6
7
# 评论系统
comments:
  use: Utterances
  
# 相关推荐
related_post:
  enable: true

用户体验提升

  1. 互动性增强：评论功能让读者可以直接参与讨论
  2. 内容发现：相关推荐帮助用户发现更多感兴趣的内容
  3. 视觉美化：精美的装饰元素提升整体观感
  4. 响应式设计：在各种设备上都有良好的显示效果

后续计划

  • 添加文章搜索功能
  • 完善友链页面
  • 优化SEO设置
  • 添加访客统计

总结

这次功能升级让博客从一个简单的展示平台变成了一个真正的交互式网站。GitHub评论系统的加入让读者可以方便地参与讨论，相关推荐功能提高了内容的可发现性，而精美的视觉装饰则让整个网站更加美观。

希望这些改进能为访问者带来更好的阅读体验！

如果您对这些功能有任何建议或问题，欢迎在下方评论区留言讨论！