文章页头评论数模块悬停逻辑修改

进行主题修改前必看

  • 博客魔改有风险，请务必备份你的原代码

  • 因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。

  • 本文涉及修改内容会以diff代码块进行标识,复制时请不要忘记删除前面的+,-符号

  • 本帖基于Anzhiyu主题进行修改方案编写，因此请读者优先掌握Anzhiyu主题官方文档的内容后再来进行魔改。

前言

最近在完善hover的样式,文章页头的评论数统计只有评论数字可以跳转到评论区,与hover强调的整体性不是很匹配,故有此文

原有实现的问题

在修改前的 Anzhiyu 主题中，评论计数区域的 HTML 结构如下：

1
2
3
4
5
// 原有结构（简化版）
span.post-meta-commentcount
  i.anzhiyu-icon-comments
  a(href="#post-comment")  // 只有数字部分可点击
    span 10

这种设计存在两个主要问题：

  1. 交互范围受限 ：只有数字部分可点击，图标区域无法触发跳转
  2. 视觉不一致 ：悬停效果仅作用于数字部分，整体体验不连贯

重建逻辑

路径themes/anzhiyu/layout/includes/header/post-info.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 修改前
mixin countBlock
  case theme.comments.use
    when 'Valine'
      span.post-meta-commentcount
        i.anzhiyu-icon-comments
        a(href=url_for(page.path) + '#post-comment')
          span.valine-comment-count(data-xid=url_for(page.path))
            if block
              block

// 修改后  
mixin countBlock
  case theme.comments.use
    when 'Valine'
      a.post-meta-commentcount(href=url_for(page.path) + '#post-comment')
        i.anzhiyu-icon-comments
        span.valine-comment-count(data-xid=url_for(page.path))
          if block
            block

关键改动点 ：

  1. 将span.post-meta-commentcount改为a.post-meta-commentcount
  2. 为a标签添加相应的href属性
  3. 移除内层的a标签，保留span用于显示评论数

CSS优化

路径: themes/anzhiyu/source/css/_layout/head.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 修改前
.post-meta
  &-commentcount
    cursor: pointer
    border-radius: 8px
    padding: 0 8px
    height: 28px
    line-height: 28px
    display: flex
    align-items: center
    transition: 0.3s
    &:hover
      background: rgba(255, 255, 255, 0.1)

// 修改后
.post-meta
  &-commentcount
    cursor: pointer
    border-radius: 8px
    padding: 0 8px
    height: 28px
    line-height: 28px
    display: flex
    align-items: center
    transition: 0.3s
    color: var(--light-grey)  // - 统一文字颜色
    text-decoration: none     // - 移除下划线
    &:hover
      background: rgba(255, 255, 255, 0.1)
      color: var(--light-grey)  // - 悬停时保持颜色一致
      text-decoration: none     // - 确保悬停时无下划线

多评论系统适配

如果你进行了第一步的逻辑修改,你就会发现anzhiyu主题是对多评论系统进行了适配,所以考虑到即使有较小几率更换评论系统会产生的BUG就需要进行协同修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Valine 评论系统
when 'Valine'
  a.post-meta-commentcount(href=url_for(page.path) + '#post-comment')
    i.anzhiyu-icon-comments
    span.valine-comment-count(data-xid=url_for(page.path))

// Waline 评论系统  
when 'Waline'
  a.post-meta-commentcount(href=url_for(page.path) + '#post-comment')
    i.anzhiyu-icon-comments
    span.waline-comment-count(data-path=url_for(page.path))

// Twikoo 评论系统
when 'Twikoo'
  a.post-meta-commentcount(href=url_for(page.path) + '#post-comment')
    i.anzhiyu-icon-comments
    span#twikoo-count

// Artalk 评论系统
when 'Artalk'
  a.post-meta-commentcount(href=url_for(page.path) + '#post-comment')
    i.anzhiyu-icon-comments
    span.artalk-count

到此完毕