From 7e0167a8bbe5d4ade9de8ba590b53b379c32952c Mon Sep 17 00:00:00 2001
From: wait4xx
- {copy.blurb}{copy.repoLabel}{' '}{copy.blurbAfter.trim()} -
+ {storyHtml ? ( + + ) : ( ++ {copy.blurb}{copy.repoLabel}{' '}{copy.blurbAfter.trim()} +
+ )}/i, '').replace(/<\/p>\s*$/i, '').trim(); } +export interface PageNoteStyle { + /** 像素字号(已夹取到 11–16) */ + size: number; + /** 已过白名单的 ink 档位(ink-1..ink-4) */ + color: string; + /** 已过白名单的排版字体类(font-sans 等) */ + font: string; +} + +export interface PageNote { + /** 已渲染的行内 HTML(note 走 renderRich inline,避免
套
) */
+ html: string;
+ /** 直接可挂的行内样式串(字号 + 颜色) */
+ style: string;
+ /** 字体类名(白名单内),与 style 一起挂到元素上 */
+ className: string;
+ resolved: PageNoteStyle;
+}
+
+/** 标题下说明文案的默认值(= 改造前硬编码的两句;删 yaml 字段即回到这里) */
+const PAGE_NOTE_DEFAULTS = {
+ moments: {
+ zh: '零碎的记录:随手拍、一句话感想、开源动态。',
+ en: 'Fragmented notes: casual shots, one-liners, and open-source updates.',
+ },
+ books: {
+ zh: '点一行展开封面与简介 · 置顶的书默认展开',
+ en: 'Tap a row for the cover and blurb · pinned books start open',
+ },
+} as const;
+
+/** 颜色白名单:只认灰阶 ink 档位(后台可填任意值,但绝不能把正文染成任意颜色/破对比度) */
+const NOTE_COLORS = ['ink-1', 'ink-2', 'ink-3', 'ink-4'] as const;
+/** 字号夹取:<11px 读不清、>16px 会盖过正文层级 */
+const NOTE_SIZE_MIN = 11;
+const NOTE_SIZE_MAX = 16;
+const NOTE_SIZE_DEFAULT = 13;
+
+/**
+ * 页面标题下说明文案(瞬间 / 书架)+ 可选样式。
+ * 后台可改文字与字号/颜色/字体;样式全部经白名单校验后回落,非法值不会破版:
+ * · size 夹取 11–16(缺省 13)
+ * · color 只认 ink-1..ink-4(其它回落 ink-4)
+ * · font 只认排版类白名单(其它回落 font-sans)
+ * 无 yaml 字段时文字回落内置默认,与改造前逐字一致(零回归)。
+ */
+export async function pageNote(
+ page: 'moments' | 'books',
+ locale: Locale,
+): Promise
+ 同一份真实数据(近一年 {total} 次贡献 · 活跃 {stats.activeDays} 天 · 当前连续
+ {stats.current} 天 · 最长 {stats.longest} 天),数据更新于 {buildTime}(构建期快照)。
+ 滚动到热力图时,格子像水面一样按「周 + 星期」斜向漫过、逐个亮起(约 0.9s)。
+ 优点有生命感、不打扰、只播一次;代价纯装饰,不提供额外信息。 鼠标在网格上移动时,一小片光晕跟着走,被照到的格子更亮,右下角浮出「日期 · 贡献数」。
+ 优点能精确读数、零轮播;代价触屏设备没有指针,需退化为点按读数。 把指针移到格子上 → 拖动滑块从头"重放"这一年,累计贡献数跟着涨;也可点播放自动扫过。
+ 优点最有叙事感、能直观感受节奏;代价多一层交互,需要一点耐心。 当前连续的那几天会有一条光带从最早一格流到最新一格,像电流经过;旁边显示连续天数。
+ 优点把"坚持"这件事讲成故事;代价只覆盖最近一小段,全年的信息仍靠静态格子。 指针落在任一格上,整列(那一周)轻轻抬起,右侧给出「这一周合计 / 最好的一天」。
+ 优点信息密度最高、动效克制;代价仍是鼠标优先,触屏靠点按。 数据口径:GitHub GraphQL 贡献日历,构建期快照({buildTime})。切到"减少动态效果"时五个方案全部退化为静态网格。 {L.note} {t('moments_note', locale)}
- 同一份真实数据(近一年 {total} 次贡献 · 活跃 {stats.activeDays} 天 · 当前连续
- {stats.current} 天 · 最长 {stats.longest} 天),数据更新于 {buildTime}(构建期快照)。
+ 同一份真实数据(近一年 {stats.total} 次贡献 · 当前连续
+ {stats.current} 天 · 最长 {stats.longest} 天 · 单日最高 {stats.best} 次),
+ 数据更新于 {buildTime}。
滚动到热力图时,格子像水面一样按「周 + 星期」斜向漫过、逐个亮起(约 0.9s)。
- 优点有生命感、不打扰、只播一次;代价纯装饰,不提供额外信息。 一条蛇沿着贡献格蛇形爬过:吃到有贡献的格子就把它们点亮并"长"一点,空格直接穿过。
+ 优点最有生命感、天然表达"这一年被一点点吃掉";代价是持续动画(离开视口即暂停)。 准备出发… · 每格按当日贡献量呼吸:越忙的日子跳得越快、越亮,静下来时整片缓慢起伏。
+ 优点像一张"活的"心电图,无需交互;代价持续动画(纯 CSS,合成层,很省)。 鼠标在网格上移动时,一小片光晕跟着走,被照到的格子更亮,右下角浮出「日期 · 贡献数」。
- 优点能精确读数、零轮播;代价触屏设备没有指针,需退化为点按读数。 从"最后一次贡献"那一格出发,涟漪一圈圈向外扩散,扫过的格子闪一下再落定。
+ 优点叙事清晰(现在 → 过去)、只播一次;代价纯装饰。 把指针移到格子上 → · 起点 {lastActive} 拖动滑块从头"重放"这一年,累计贡献数跟着涨;也可点播放自动扫过。
- 优点最有叙事感、能直观感受节奏;代价多一层交互,需要一点耐心。 把贡献量当"海拔":忙的日子凸起来,整块网格随鼠标轻轻倾斜,像俯瞰一年的地貌。
+ 优点一眼看出密集区、视觉独特;代价倾斜会略降可读性。 当前连续的那几天会有一条光带从最早一格流到最新一格,像电流经过;旁边显示连续天数。
- 优点把"坚持"这件事讲成故事;代价只覆盖最近一小段,全年的信息仍靠静态格子。 指针落在任一格上,整列(那一周)轻轻抬起,右侧给出「这一周合计 / 最好的一天」。
- 优点信息密度最高、动效克制;代价仍是鼠标优先,触屏靠点按。 网格下方按月长出一排柱子,进视口时逐根升起;指针移到柱子上,对应那些格子同时亮起。
+ 优点把"哪几个月最忙"讲清楚、信息量大;代价多一层图表,页面变高。 数据口径:GitHub GraphQL 贡献日历,构建期快照({buildTime})。切到"减少动态效果"时五个方案全部退化为静态网格。 指针所在处浮起一枚圆镜,把周围 5×5 的格子放大显示,并标出当天日期与次数。
+ 优点小格子也读得清、趣味强;代价触屏需点按。 把指针移到任意格子上 数据口径:GitHub GraphQL 贡献日历,构建期快照({buildTime})。"减少动态效果"下六案全部静态。
- 同一份真实数据(近一年 {stats.total} 次贡献 · 当前连续
- {stats.current} 天 · 最长 {stats.longest} 天 · 单日最高 {stats.best} 次),
- 数据更新于 {buildTime}。
+ 按你的选择做成 F + J 方向,并让蛇循环爬(学 GitHub README 蛇的
+ 节奏:吃完一轮 → 停顿 → 清空 → 再来)。真实数据:近一年 {stats.total} 次贡献 ·
+ {stats.activeDays} 天有贡献 · 当前连续 {stats.current} 天 · 数据更新于 {buildTime}。
一条蛇沿着贡献格蛇形爬过:吃到有贡献的格子就把它们点亮并"长"一点,空格直接穿过。
- 优点最有生命感、天然表达"这一年被一点点吃掉";代价是持续动画(离开视口即暂停)。 蛇沿格子蛇形爬一年,吃到有贡献的日子就点亮;爬到尽头停一拍、清空、重新开始,
+ 无限循环。身体保持 6 格长度(GitHub README 蛇手感)。 准备出发… · 准备出发… · 第 1 轮 ·
+ 每格按当日贡献量呼吸:越忙的日子跳得越快、越亮,静下来时整片缓慢起伏。
- 优点像一张"活的"心电图,无需交互;代价持续动画(纯 CSS,合成层,很省)。 每吃到一天就长一节(最长 26 节),前半程是细蛇、后半程拖成长尾,吃完循环重置。
+ 优点"积累"的隐喻最强;代价尾长时略挡格子。 准备出发… · 蛇长 3 节 从"最后一次贡献"那一格出发,涟漪一圈圈向外扩散,扫过的格子闪一下再落定。
- 优点叙事清晰(现在 → 过去)、只播一次;代价纯装饰。 两条蛇分别从最早与最新一头出发对向而吃,在年中附近交汇,吃完一起循环。
+ 优点更有戏剧性、时间感双向;代价两条同时动,注意力会被分走。 · 起点 {lastActive} 准备出发… 把贡献量当"海拔":忙的日子凸起来,整块网格随鼠标轻轻倾斜,像俯瞰一年的地貌。
- 优点一眼看出密集区、视觉独特;代价倾斜会略降可读性。 蛇每爬进一个月,对应的柱子就同步升起并高亮;爬到年末时十二根柱子全部立起,
+ 然后蛇回到起点、柱子清零、再来一轮。优点格子与柱状图互相解释,信息与动感兼得。 准备出发… 网格下方按月长出一排柱子,进视口时逐根升起;指针移到柱子上,对应那些格子同时亮起。
- 优点把"哪几个月最忙"讲清楚、信息量大;代价多一层图表,页面变高。 不带动效时的样子:进视口逐根升起,指针移到柱子上,对应月份的格子同时高亮。
+ 可单独用,也可像 FJ 那样与蛇联动。 指针所在处浮起一枚圆镜,把周围 5×5 的格子放大显示,并标出当天日期与次数。
- 优点小格子也读得清、趣味强;代价触屏需点按。 把指针移到任意格子上 数据口径:GitHub GraphQL 贡献日历,构建期快照({buildTime})。"减少动态效果"下全部静态;离开视口自动暂停。 数据口径:GitHub GraphQL 贡献日历,构建期快照({buildTime})。"减少动态效果"下六案全部静态。 {locale === 'zh' ? '数据板' : 'Data board'}热力图:五个动效方案
+
+ 看完告诉我选哪个(回「A」「B」「C」「D」「E」,也可以说「C 但速度慢一点」)。
+ 五个方案都守灰阶红线、都尊重「减少动态效果」系统设置。
+ 入场波纹
+ 光标光晕
+ 年度回放
+ 连续电流
+ 悬停周详情
+
{items.map((b) => (
diff --git a/src/components/pages/MomentsPage.astro b/src/components/pages/MomentsPage.astro
index d5130c6..9529f49 100644
--- a/src/components/pages/MomentsPage.astro
+++ b/src/components/pages/MomentsPage.astro
@@ -5,7 +5,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
import MomentComments from '../MomentComments.astro';
import ViewMeta from '../geek/ViewMeta.astro';
import { t } from '../../i18n/ui';
-import { renderRich } from '../../lib/site-content';
+import { pageNote, renderRich } from '../../lib/site-content';
import type { Locale } from '../../lib/locale';
// /en/ 侧由 T4 薄页传 locale='en';zh 路由无人传参,默认 zh 零回归
@@ -13,6 +13,8 @@ interface Props {
locale?: Locale;
}
const { locale = 'zh' } = Astro.props;
+// 标题下说明:文字与样式都可后台改(白名单校验,非法值回落)
+const note = await pageNote('moments', locale);
const moments = (await getCollection('moments')).sort(
(a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
@@ -32,7 +34,8 @@ const iso = (d: Date) => d.toISOString();
{t('moments_title', locale)}
- 热力图:五个动效方案
+热力图:六个更深入的方案
- 看完告诉我选哪个(回「A」「B」「C」「D」「E」,也可以说「C 但速度慢一点」)。
- 五个方案都守灰阶红线、都尊重「减少动态效果」系统设置。
+ 上一版的五个方案已按你的反馈下线;这一版六个都往「有生命、有叙事」的方向推。
+ 回字母告诉我选哪个(也可以说「F 但慢一点」「F + J 组合」)。
入场波纹
- 贪吃蛇
+ 心跳呼吸
+ 光标光晕
- 雨滴涟漪
+ 年度回放
- 3D 地形
+ 连续电流
- 悬停周详情
- 周冠军柱
+
+ {months.map(([m, v]) => (
+
- 显微镜
+ 热力图:六个更深入的方案
+热力图:蛇的四个变体
- 上一版的五个方案已按你的反馈下线;这一版六个都往「有生命、有叙事」的方向推。
- 回字母告诉我选哪个(也可以说「F 但慢一点」「F + J 组合」)。
+ 回字母告诉我选哪个(F1 / F2 / F3 / FJ / J),也可以说「FJ 但循环慢一点」。
贪吃蛇
- 循环贪吃蛇
+ 心跳呼吸
- 生长蛇
+ 雨滴涟漪
- 双蛇对开
+ 3D 地形
- 蛇 + 月度柱联动 你的选择方向
+
+ {months.map(([m, v], i) => (
+
+ 周冠军柱
- 月度柱状图
+
{months.map(([m, v]) => (
@@ -153,240 +159,192 @@ const dataForClient = { cells: days.map((d) => d.count), weeks: weeks.length };
显微镜
-
- {card.dark && (
-
- )}
-
-