跳到主要内容

诗词网站更新：v0.2.6 - PinyinPoem 组件功能详解

· 阅读需 4 分钟
Johnny
Johnny
一年五班小憨憨

今天我们来详细介绍诗词网站中 PinyinPoem 组件的各项功能。这个组件是我们网站的核心，为用户提供了丰富的诗词学习和欣赏体验。

功能概览​

1. 拼音显示​

  • 点击眼睛图标可以切换拼音的显示/隐藏
  • 拼音显示在汉字上方，字体较小以免影响阅读
  • 自动跳过标点符号，保持排版整洁
  • 支持移动端自适应显示

2. 简繁体切换​

  • 通过翻译图标进行切换
  • 实时转换标题、作者和诗句内容
  • 保持注释内容同步转换
  • 使用 chinese-s2t 库确保转换准确性

3. 注释系统​

  • 点击书本图标开启/关闭注释功能
  • 带注释的字会显示下划线提示
  • 鼠标悬停或点击可查看注释内容
  • 注释框带有动画效果和箭头指示
  • 支持五种下划线样式：
    • 实线 (solid)
    • 点线 (dotted)
    • 短划线 (dashed)
    • 双线 (double)
    • 波浪线 (wavy)
  • 下划线样式优化：
    • 线条粗细：0.5px
    • 淡蓝色效果
    • 与文字间距：4px

4. 平仄显示​

  • 通过音符图标控制显示/隐藏
  • 使用圆点"○"表示平声
  • 使用斜点"、"表示仄声
  • 标记显示在字的右上角
  • 带有淡入动画效果
  • 颜色采用主题色，透明度0.8

5. 朝代信息​

  • 与注释系统联动显示
  • 在作者名前以方括号标注
  • 支持简繁体切换
  • 优雅的淡入动画效果

6. 分享功能​

  • 支持多个社交平台：
    • X（Twitter）
    • Telegram
    • 微博
    • Facebook
    • LinkedIn
    • Reddit
  • 支持复制文本和链接
  • 提供二维码分享

技术实现​

响应式设计​

@media screen and (max-width: 768px) {
  .characterWrapper {
    margin: 0 0.1em;
    min-width: 1.2em;
    height: 1.8em;
  }
  
  .pinyinChar {
    font-size: 0.65rem;
    top: 0.15em;
  }
}

动画效果​

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

使用示例​

<PinyinPoem 
  title="诗歌标题"
  author="作者"
  dynasty="朝代"
  content={["第一行", "第二行"]}
  pinyinData={[["pin yin"], ["pin yin"]]}
  toneData={[["ping", "ze"], ["ze", "ping"]]}
  annotations={{
    "0-0": "第一行第一个字的注释",
    "0-1": "第一行第二个字的注释"
  }}
/>

下一步计划​

  1. 添加诗歌格律分析功能
  2. 集成朗读音频
  3. 添加意象分析
  4. 扩展注释系统，支持多层次注释

反馈​

如果您在使用过程中发现任何问题，或者有功能建议，欢迎：

  1. 在 GitHub 上提交 issue
  2. 在评论区留言
  3. 通过社交媒体联系我们

Johnny
2024年1月14日