Skip to content

TOC 链接样式

问题描述

在 TOC 的页面信息部分，分类和标签链接的样式与文章底部的 post-meta 区域样式不一致，需要统一设计语言。

解决方案

1. 统一链接样式

将 page-info-item 中的 category-tag-link 样式与 post-meta-item 的标签样式保持一致。

2. 主要变更

2.1 基础样式 (_page-info.scss)

.page-info-item {
  span {
    flex: 1;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  a.category-tag-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.4rem;
    background: rgba(13, 110, 253, 0.8);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(13, 110, 253, 0.8);
    border-radius: 6px;
    font-size: 0.7rem;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 1.8rem;
    box-sizing: border-box;

    &:hover {
      background: rgba(13, 110, 253, 0.9);
      border-color: rgba(13, 110, 253, 0.9);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      color: white;
      text-decoration: none;
    }

    &:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
      color: white;
    }
  }
}

2.2 深色模式支持 (_dark-mode.scss)

.dark-mode .page-info-item {
  color: #e5e5e5;

  i {
    color: var(--accent-color);
  }

  a.category-tag-link {
    background: rgba(13, 110, 253, 0.7);
    border-color: rgba(13, 110, 253, 0.7);
    color: rgba(255, 255, 255, 0.9);

    &:hover {
      background: rgba(13, 110, 253, 0.85);
      border-color: rgba(13, 110, 253, 0.85);
      color: white;
    }
  }
}

设计特点

  1. 一致性：与 post-meta 区域的标签样式保持完全一致
  2. 视觉层次：使用蓝色背景的标签样式，突出重要信息
  3. 交互反馈：
  4. 悬停时稍微上移和添加阴影
  5. 颜色加深提供清晰的交互反馈
  6. 响应式：支持多标签换行显示
  7. 深色模式：在深色模式下保持良好的对比度和可读性

视觉效果

  • 标签背景：蓝色半透明背景 rgba(13, 110, 253, 0.8)
  • 文字颜色：白色文字确保对比度
  • 悬停效果：背景加深 + 轻微上移 + 阴影
  • 边框圆角：6px 圆角保持现代化外观
  • 字体大小：0.7rem，保持与 post-meta 一致

这个更新确保了整个网站的标签和分类链接样式的一致性，提供了更加统一和专业的用户体验。