用豆包改进了一下，实现了将脚注渲染为边注，并依照文件内内联脚注的不同日期进行颜色渲染的功能。基本可用，但在手机端使用时，会出现渲染不稳定的现象。求助大佬改进办法
图片效果大致如下：
js文件：
/* ==================== 脚注日期排序上色脚本 ==================== */
function colorFootnotesByDate() {
// 1. 获取页面所有脚注块
const footnotes = document.querySelectorAll(
'.sidenote .cm-comment:not(.cm-comment-end):not(.cm-comment-start),\
.sidenote .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start)'
);
if (footnotes.length === 0) return;
// 2. 正则：匹配所有常见日期格式（2025-12-31 / 2025.12.31 / 2025/12/31）
const dateReg = /\d{4}([\-\.\/])\d{1,2}\1\d{1,2}/g;
const dateMap = new Map();
// 3. 提取每个脚注的日期
for (const note of footnotes) {
const text = note.innerText.trim();
const match = text.match(dateReg);
if (!match) continue;
// 统一日期格式为标准时间戳
const dateStr = match[0].replace(/\./g, '-').replace(/\//g, '-');
const date = new Date(dateStr);
if (isNaN(date)) continue;
// 存入 Map：key=日期，value=该日期所有脚注
if (!dateMap.has(dateStr)) dateMap.set(dateStr, []);
dateMap.get(dateStr).push(note);
}
// 4. 按时间从早到晚排序日期
const sortedDates = Array.from(dateMap.keys()).sort((a, b) => new Date(a) - new Date(b));
// 5. 按顺序分配颜色组（同一天 = 同一组 = 同一颜色）
sortedDates.forEach((date, index) => {
const notes = dateMap.get(date);
notes.forEach(note => {
// 清除旧分组，添加新分组
note.classList.remove(...Array.from(note.classList).filter(c => c.startsWith('group-')));
note.classList.add(`group-${index}`);
});
});
}
// 立即执行 + 页面变化时自动刷新
colorFootnotesByDate();
new MutationObserver(colorFootnotesByDate).observe(document.body, { childList: true, subtree: true });
}
css如下：
1.日期配色：
/* ==================== 脚注日期自动配色系统 ==================== */
/* 基础：清空原有背景色，保证配色生效 */
.sidenote .cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.sidenote .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
background: var(--note-bg) !important;
border-left: 4px solid var(--note-border) !important;
}
.theme-dark .sidenote .cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.theme-dark .sidenote .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
background: var(--note-bg-dark) !important;
border-left: 4px solid var(--note-border) !important;
}
/* 日期组配色（按时间顺序：越早 → 越靠前） */
.sidenote .cm-comment.group-0,
.sidenote .cm-inline-footnote.group-0 { --note-bg: #fff1e6; --note-bg-dark: #3d2b1f; --note-border: #f79646; }
.sidenote .cm-comment.group-1,
.sidenote .cm-inline-footnote.group-1 { --note-bg: #e6f7ff; --note-bg-dark: #1f3a45; --note-border: #40a9ff; }
.sidenote .cm-comment.group-2,
.sidenote .cm-inline-footnote.group-2 { --note-bg: #f0fff4; --note-bg-dark: #253d30; --note-border: #52c41a; }
.sidenote .cm-comment.group-3,
.sidenote .cm-inline-footnote.group-3 { --note-bg: #fff7e6; --note-bg-dark: #3f331f; --note-border: #faad14; }
.sidenote .cm-comment.group-4,
.sidenote .cm-inline-footnote.group-4 { --note-bg: #f9f0ff; --note-bg-dark: #332242; --note-border: #9254de; }
.sidenote .cm-comment.group-5,
.sidenote .cm-inline-footnote.group-5 { --note-bg: #fff1f0; --note-bg-dark: #3d2222; --note-border: #ff4d4f; }
/* 如需更多颜色，继续往下加 group-6 / 7 / 8... 即可 */
2.css主体
/* ==================== 原有代码（完全保留，未做任何修改） ==================== */
/* 仅当 cssclasses 包含 "sidenote" 时生效（增强版选择器） */
.sidenote .cm-editor .cm-content .cm-comment-start,
.sidenote .cm-editor .cm-content .cm-comment-end,
.sidenote .cm-editor .cm-content .cm-inline-footnote-start,
.sidenote .cm-content .cm-inline-footnote-end,
/* 修复：兼容被 <mark> / <font> 包裹的脚注标记 */
.sidenote .cm-editor .cm-content mark .cm-inline-footnote-start,
.sidenote .cm-editor .cm-content mark .cm-inline-footnote-end,
.sidenote .cm-editor .cm-content font .cm-inline-footnote-start,
.sidenote .cm-editor .cm-content font .cm-inline-footnote-end {
color: transparent !important;
font-size: .1em;
letter-spacing: -1em;
}
/* 基础脚注图标样式 - 改为相对定位以支持偏移 */
.sidenote .cm-comment-end::after,
.sidenote .cm-inline-footnote-end::after,
/* 修复：兼容被标签包裹的脚注图标 */
.sidenote mark .cm-inline-footnote-end::after,
.sidenote font .cm-inline-footnote-end::after {
content: ""; /* 清空content，改用背景图 */
font-size: 0; /* 清除文字尺寸干扰 */
text-shadow: 0 0 0 var(--interactive-accent);
/* 核心对齐逻辑：实现图标中心与文字行中心对齐 */
display: inline-flex !important; /* 改为flex，方便垂直居中 */
align-items: center; /* 自身内容垂直居中 */
justify-content: center; /* 自身内容水平居中 */
margin: 0px 0.2rem !important; /* 基础左右间距 */
transform: translateY(-0.5rem); /* 重置偏移，改为基于基线的居中 */
vertical-align: middle; /* 关键：让图标整体与文字基线垂直居中 */
margin-block: unset;
/* 核心：用背景图实现，尺寸完全可控 */
--icon-size: 40px; /* 推荐尺寸：24-32px（与文字行高匹配） */
width: var(--icon-size);
height: var(--icon-size);
background-image: url("https://i1.hdslb.com/bfs/new_dyn/b65b66fdd44ff84141f8d558602abd27473195332.png");
background-size: contain; /* 保持图片比例 */
background-repeat: no-repeat;
background-position: center; /* 图片在容器内居中 */
/* 新增：相对定位，为偏移做准备 */
position: relative;
/* 防止图标重叠 */
box-sizing: border-box;
/* 修复：强制覆盖继承样式，避免内联标签干扰 */
background-color: transparent !important;
border: none !important;
z-index: 10;
}
/* ------------- 核心：同一行多个脚注依次偏移 ------------- */
/* 修复：通用选择器，无视包裹标签，正常计数偏移 */
.sidenote .cm-line :nth-of-type(1 of .cm-inline-footnote-end)::after,
.sidenote .cm-line :nth-of-type(1 of .cm-comment-end)::after {
left: 0px !important;
}
.sidenote .cm-line :nth-of-type(2 of .cm-inline-footnote-end)::after,
.sidenote .cm-line :nth-of-type(2 of .cm-comment-end)::after {
left: 50px !important;
}
.sidenote .cm-line :nth-of-type(3 of .cm-inline-footnote-end)::after,
.sidenote .cm-line :nth-of-type(3 of .cm-comment-end)::after {
left: 100px !important;
}
.sidenote .cm-line :nth-of-type(4 of .cm-inline-footnote-end)::after,
.sidenote .cm-line :nth-of-type(4 of .cm-comment-end)::after {
left: 150px !important;
}
/* 新增：单独控制 .sidenote 内的目标图片，确保行内效果 */
.sidenote .cm-comment-end::after,
.sidenote .cm-inline-footnote-end::after {
float: unset; /* 取消浮动，避免独占一行 */
text-align: left; /* 与文字左对齐 */
}
/* 脚注内容样式调整：适配多脚注偏移 */
.sidenote .cm-editor .cm-content .cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.sidenote .cm-editor .cm-content .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
position: relative;
z-index: 99 !important;
display: block;
margin-left: 25px;
margin-right: -225px;
/* 微调top偏移，适配多脚注 */
margin-top: calc(-25px + (var(--footnote-index, 0) * 10px));
float: right;
width: 225px;
height: auto;
overflow: hidden;
font-size: .75em;
padding: 10px;
border: 1px solid #36454F;
box-shadow: 3px 3px var(--interactive-accent);
opacity: 80%;
color: var(--text-muted);
background: var(--background-secondary);
/* 防止内容重叠 */
clear: right;
}
/* 脚注悬浮样式 */
.sidenote .cm-editor .cm-content .cm-comment:not(.cm-comment-end):not(.cm-comment-start):hover,
.sidenote .cm-editor .cm-content .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start):hover {
position: relative;
z-index: 100 !important;
display: block;
margin-left: 25px;
margin-right: -225px;
margin-top: calc(-25px + (var(--footnote-index, 0) * 10px));
float: right;
width: 225px;
height: auto;
font-size: .90em;
padding: 10px;
border: 1px solid #36454F;
box-shadow: 3px 3px var(--interactive-accent);
opacity: 100%;
color: var(--text-muted);
background: var(--background-secondary);
clear: right;
}
/* 激活态样式 */
.sidenote .cm-editor .cm-content .cm-active .cm-comment-start,
.sidenote .cm-editor .cm-content .cm-active .cm-comment-end,
.sidenote .cm-editor .cm-content .cm-active .cm-inline-footnote-start,
.sidenote .cm-editor .cm-content .cm-active .cm-inline-footnote-end,
/* 修复：激活态兼容包裹标签 */
.sidenote .cm-editor .cm-content .cm-active mark .cm-inline-footnote-start,
.sidenote .cm-editor .cm-content .cm-active mark .cm-inline-footnote-end {
color: var(--text-faint) !important;
font-size: 1em;
letter-spacing: initial;
}
.sidenote .cm-editor .cm-content .cm-active .cm-comment-end::after,
.sidenote .cm-editor .cm-content .cm-active .cm-inline-footnote-end::after,
/* 修复：激活态隐藏图标兼容包裹标签 */
.sidenote .cm-editor .cm-content .cm-active mark .cm-inline-footnote-end::after {
display: none !important;
}
/* 禅模式适配 */
.sidenote .plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment-end::after {
opacity: var(--zen-opacity);
}
.sidenote .plugin-cm-typewriter-scroll-zen .cm-editor .cm-content .CodeMirror-lines:not(.selecting) .CodeMirror-code > :not(.CodeMirror-activeline) .cm-comment {
font-size: 0px;
border: 0px solid #36454F;
box-shadow: 3px 3px rgba(0, 0, 0, 0);
color: var(--text-muted);
background: rgba(0, 0, 0, 0);
}
.sidenote .plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment {
font-size: 0px;
border: 0px solid #36454F;
box-shadow: 3px 3px rgba(0, 0, 0, 0);
color: var(--text-muted);
background: rgba(0, 0, 0, 0);
}
/* ==================== 新增：仅夜间模式专属样式（不影响白天模式） ==================== */
/* 夜间模式脚注容器优化 */
.theme-dark .sidenote .cm-editor .cm-content .cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.theme-dark .sidenote .cm-editor .cm-content .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
/* 夜间模式边框适配深色背景 */
border-color: var(--background-modifier-border-hover);
/* 夜间模式阴影优化：降低亮色阴影对比度，改用深色半透明 */
box-shadow: 3px 3px rgba(0, 0, 0, 0.5);
/* 增强夜间模式背景对比度 */
background: var(--background-secondary-alt);
/* 提升文字可读性 */
color: var(--text-normal);
opacity: 85%;
}
/* 夜间模式脚注悬浮样式 */
.theme-dark .sidenote .cm-editor .cm-content .cm-comment:not(.cm-comment-end):not(.cm-comment-start):hover,
.theme-dark .sidenote .cm-editor .cm-content .cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start):hover {
border-color: var(--interactive-accent);
/* 悬浮时加深阴影 */
box-shadow: 3px 3px rgba(0, 0, 0, 0.7);
opacity: 100%;
color: var(--text-normal);
background: var(--background-secondary);
}
/* 夜间模式激活态样式优化 */
.theme-dark .sidenote .cm-editor .cm-content .cm-active .cm-comment-start,
.theme-dark .sidenote .cm-editor .cm-content .cm-active .cm-comment-end,
.theme-dark .sidenote .cm-editor .cm-content .cm-active .cm-inline-footnote-start,
.theme-dark .sidenote .cm-editor .cm-content .cm-active .cm-inline-footnote-end,
/* 夜间模式兼容包裹标签 */
.theme-dark .sidenote .cm-editor .cm-content .cm-active mark .cm-inline-footnote-start,
.theme-dark .sidenote .cm-editor .cm-content .cm-active mark .cm-inline-footnote-end {
color: var(--text-accent) !important;
}
/* 夜间模式禅模式适配 */
.theme-dark .sidenote .plugin-cm-typewriter-scroll-zen .cm-editor .cm-content .CodeMirror-lines:not(.selecting) .CodeMirror-code > :not(.CodeMirror-activeline) .cm-comment,
.theme-dark .sidenote .plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment {
border-color: transparent;
box-shadow: none;
background: transparent;
}