今日诗词 (Jinrishici) Web Component

这是一个基于 HTML5、CSS3 和 JavaScript (ES6) 构建的精美古诗词展示卡片。项目调用了 今日诗词 API (Jinrishici SDK)，能够动态加载中国经典古诗词的名句、作品标题、朝代、作者以及译文，并支持无刷新一键“换一首”。

---

🌟 项目特性

• 完整解析 API JSON 数据：不仅展示精选名句，还完整解析并展示作品标题、作者、朝代及译文。
• 无刷新加载 (AJAX/SDK)：点击“换一首”按钮即可快速获取新诗词，无需重新加载整个页面。
• 响应式 UI 设计：采用现代化的卡片式设计，自适应手机与桌面设备。
• 交互防抖与状态提示：在加载数据时自动禁用按钮并显示加载中状态，防止重复请求触发 API 限流。

---

📂 项目结构

├── index.html       # 主页面文件（包含 HTML、CSS 和 JavaScript 逻辑）
└── README.md        # 项目说明文档

🚀 快速开始

1. 克隆或下载本项目： 直接下载 index.html 文件到本地。
2. 运行项目： 无需配置复杂的开发环境或 Node.js 框架，直接双击 index.html 在任何主流浏览器（Chrome, Edge, Firefox, Safari）中打开即可。

🛠️ API 数据结构解析

本项目调用的 API 返回示例如下，前端逻辑已针对以下字段进行了针对性解析与渲染：

{
  "status": "success",
  "data": {
    "id": "5b8b9572e116fb3714e6fa41",
    "content": "斜月沉沉藏海雾，碣石潇湘无限路。",
    "origin": {
      "title": "春江花月夜",
      "dynasty": "唐代",
      "author": "张若虚",
      "content": [ ... ],
      "translate": [ ... ]
    }
  },
  "token": "ZxxW11AvMmpaME8poTcnXbo6aMZFBIEW"
}

• data.content：诗词精选名句（主要展示内容）。
• data.origin.title：诗词标题。
• data.origin.author：作者姓名。
• data.origin.dynasty：朝代。
• data.origin.translate：译文数组（自动提取并展示相关注释/译文）。

⚠️ 注意事项与常见问题 (FAQ)

1. 关于 IP 限流/异常流量警告 (warning)

如果在控制台或 API 返回中收到以下提示：

"接口侦测到来自您 IP 的异常流量，已主动下调推荐效果..."

原因：短期内频繁点击“换一首”按钮，或在没有配置固定 Token 的情况下发送了大量请求。 解决方法：

• 避免过于频繁地连续点击按钮。
• SDK 会自动将首次获取到的 Token 存储在浏览器的 localStorage 中。若需在生产环境中长期稳定使用，建议前往 今日诗词官网 注册专属 Token 并配置在请求头中。

📄 开源协议

本项目基于 MIT 协议开源，可自由修改与二次开发。诗词 API 接口版权归 今日诗词 (Jinrishici) 所有。