hexo_blog原创开发tooltip功能
独立开发 tooltip 功能过程记录
悬浮框
初代版本
影响自定义鼠标效果的解决方案：限制 tootip 的作用域，通过 添加 .content 类名
需要排除受到影响的类或标签，例如 .content 深层嵌套时 ，.tabs 切换按钮失效 和
代码块标签的折叠显示按钮js// 获取 .content 下的所有元素，排除 .tabs 标签
const allElements = document.querySelectorAll(".content *");
const filteredElements = Array.from(allElements).filter(el => {
const foldingTag = el.closest(".folding-tag"); // 检查是否有最近的 .folding-tag
const isInsideContent = el.closest(".content"); // 检查元素是否在 .content 内部
const isFigure = el.tagName.toLowerCase() === 'figure'; // 检查元素是否是 <figure> 标签
return !(foldingTag && foldingTag.querySelector(".content .tabs")) && !isInsideContent && !isFigure;
});
严格规则匹配，精简了代码逻辑
2024-12-3 下午，严格规定了匹配元素的格式，新增支持全角和半角括号
《》、「」的代码。其余规则保持不变，确保括号内容严格符合成对括号包裹，并且仅包含唯一合法分隔符｜或|的情况。更新后的代码
jsfilteredElements.forEach(tag => {
// 匹配成对的全角或半角括号（包括新增的《》和「」），并确保括号内部内容包含唯一的｜或|
tag.innerHTML = tag.innerHTML.replace(
/(?:［|【|\[|《|「)([^［【\[《「］】\]》」]*?[｜\|][^［【\[《「］】\]》」]*?)(?:］|】|\]|》|」)/g,
function (match, content) {
// 校验是否包含合法的全角或半角分隔符 ｜ 或 |
if ((content.match(/[｜\|]/g) || []).length === 1) {
const parts = content.split(/[｜\|]/); // 按全角或半角 | 分割
if (parts.length === 2 && parts[0].trim() && parts[1].trim()) {
return `<span class="tooltip" data-tooltip="${parts[1].trim()}">${parts[0].trim()}</span>`;
}
}
// 若括号内容不符合格式要求，返回原内容
return match;
}
);
});改动点说明
正则表达式新增支持的括号类型：
- 新增括号类型：
- 开始符号：
《和「。 - 结束符号：
》和」。 - 括号类型完整支持：
- 开始：
［、【、[、《、「。 - 结束：
］、】、]、》、」。
- 规则保持不变：
唯一合法分隔符
校验括号内容是否包含且仅包含一个全角或半角分隔符
(content.match(/[｜|]/g) || []).length === 1
内容验证：按分隔符分割后，确保两部分内容都不为空：
jsconst parts = content.split(/[｜\|]/);
if (parts.length === 2 && parts[0].trim() && parts[1].trim()) {
return `<span class="tooltip" data-tooltip="${parts[1].trim()}">${parts[0].trim()}</span>`;
}
测试用例
输入示例：
html
<div>【测试内容|提示信息】</div> |
输出结果：
html
<div><span class="tooltip" data-tooltip="提示信息">测试内容</span></div> |
规则总结
- 新增括号支持：
- 现支持以下全角和半角括号类型：
[ ]、［ ］、【 】《 》、「 」
- 现支持以下全角和半角括号类型：
- 严格分隔符校验：
- 括号内容中必须且仅能包含一个全角或半角分隔符
｜或|。
- 括号内容中必须且仅能包含一个全角或半角分隔符
- 成对括号验证：
- 确保括号成对且嵌套格式正确。
- 不符合条件保留原样：
- 对于不符合规则的内容（如缺少括号、分隔符数量不符或嵌套格式错误），直接返回原内容。
文章页面主题色配置&前端调用样式
文章头部指定主题色，供前端调用色值，进行文章风格统一
以下是具体的实现步骤：
- 在 Front-matter 中定义 theme_color
在你的 Markdown 文件中，添加 Front-matter 并定义 theme_color，例如：
plaintext
--- |
- 在 layout.pug 中注入 CSS 变量
你需要在 layout.pug 的 <head> 部分动态生成 CSS 变量。找到 head.pug 的引入部分（通常在 head 标签内），并在其上方或下方添加以下代码：
plaintext
style. |
page.theme_color：从当前文章的 Front-matter 中获取theme_color。theme.highlight_text_color：如果 Front-matter 中没有定义theme_color，则使用主题配置中的默认值（你需要在主题配置中定义highlight_text_color）。#e5a80d：如果以上都没有定义，则使用默认的备用颜色。
修改后的 layout.pug 示例：
plaintext
doctype html |
- 在主题配置中定义默认颜色（可选）
如果你希望在主题配置中定义一个默认的 highlight_text_color，可以在 _config.butterfly.yml 中添加：
plaintext
highlight_text_color: "#e5a80d" |
- 在 CSS 中使用变量
在你的自定义 CSS 文件中（通常是 source/css/custom.css），使用 CSS 变量来定义 .highlight-text 的样式：
plaintext
.highlight-text { |
- 在文章中使用 .highlight-text 类
在你的 Markdown 文件中，可以直接使用 HTML 标签并添加 .highlight-text 类：
markdown
复制
plaintext
<p class="highlight-text">这段文字会使用 Front-matter 中定义的 theme_color 颜色。</p> |
- 重新生成并预览
完成以上步骤后，运行以下命令重新生成 Hexo 站点并预览效果：
plaintext
hexo clean && hexo g && hexo s |
总结
通过以上步骤，你可以实现：
- 在 Front-matter 中定义每篇文章的
theme_color。 - 使用 Pug 模板引擎动态生成 CSS 变量。
- 在 Butterfly 主题中应用动态颜色。
コメント