# Heatmap_for_typecho **Repository Path**: ymz316/heatmap_for_typecho ## Basic Information - **Project Name**: Heatmap_for_typecho - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-07-14 - **Last Updated**: 2026-07-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Heatmap GitHub 风格文章热力图插件，以日历热力图形式直观展示博客文章发布密度。 ## 特性 - **GitHub 风格热力图** — 7 行 × N 列的日历网格，周一起始，每格代表一天，5 级色阶反映文章数量 - **明暗双色** — 自动跟随 Plain 主题的 dark 类切换亮色/暗色模式，色块和文字实时适配 - **年份切换** — 年份下拉选择器，支持"最近 N 个月"和逐年视图，选中即提交 - **工具栏** — 年份选择器（左）+ 文章数 / 活跃天 / 月均统计（右），紧凑一行 - **图例** — 底部较少 → 很多色阶对照 - **点击详情** — 单击格子展开信息面板，显示日期、文章数、文章标题链接；再次点击或点 × 关闭 - **响应式** — 三档适配： - ≥ 768px：完整布局，左侧星期标签 + 顶部月份标签 - 480–768px：缩小色块，隐藏星期标签 - < 480px：每列 10 天紧凑布局，隐藏月份标签 ## 使用方法在主题模板中调用，先判断插件是否启用： ```php ``` 指定月数和年份： ```php ``` **简洁模式** — 仅热力图色块网格，不含工具栏、图例： ```php ``` ## 插件配置在 Typecho 后台 → 插件 → Heatmap → 设置： - **统计月份** — 显示最近多少个月，范围 1–12，默认 12 ## 明暗模式自动检测 `` 上的 `dark` 类（与 Plain 主题 `setdark()` 机制一致），通过 `:where(.dark, .dark *)` 选择器覆盖样式： | 元素 | 亮色 | 暗色 | |------|------|------| | 0 级色块 | `#ebedf0` | `#374151` | | 1–4 级色块 | GitHub 绿色系 | 提亮绿色系 | | 文字 / 标签 | `#666` / `#8b949e` | `#9ca3af` | | 信息面板背景 | `#f7f8fa` | 半透明白 | | 统计数值 | `#0969da` | `#60a5fa` | 支持 MutationObserver 实时跟随 + `localStorage` 跨标签页同步。 ## 响应式断点 | 断点 | 列结构 | 星期标签 | 月份标签 | 色块尺寸 | |------|--------|----------|----------|----------| | ≥ 768px | 7 行 × N 列 | 7 个（一～日） | 显示 | 10px | | 480–768px | 7 行 × N 列 | 隐藏 | 显示 | 7px | | < 480px | 10 行 × M 列 | 10 个（一～三） | 隐藏 | 10px | < 480px 时 JS 自动重排格子为每列 10 天结构，保证色块不小于 10px。 ## 色阶 | 级别 | 文章数 | 亮色 | 暗色 | |------|--------|------|------| | 0 | 0 | `#ebedf0` | `#374151` | | 1 | 1 | `#9be9a8` | `#2d6a4f` | | 2 | 2–3 | `#40c463` | `#40916c` | | 3 | 4–5 | `#30a14e` | `#52b788` | | 4 | 6+ | `#216e39` | `#74c69d` | ## 技术实现 - 纯 PHP + 内联 CSS/JS，无外部依赖 - CSS Grid 布局，Container Queries 响应式 - MutationObserver 监听主题切换，`storage` 事件跨标签页同步 - 事件委托处理格子点击，`appendChild` 移动 DOM 实现重排 - 亮暗双模式通过 `:where(.dark, .dark *)` 选择器一次定义，无需 JS 操作样式