hexo_blog原创开发tooltip功能

hexo + butterfly 个人博客 & webstack 主题个人导航搭建全过程系列

基础环境配置（一）
博客魔改（二）
gitactions 实现自动化部署（三）
独立开发tooltip功能全记录（四）⇦当前位置🪂

悬浮框

初代版本

影响自定义鼠标效果的解决方案：限制 tootip 的作用域，通过添加 .content 类名

需要排除受到影响的类或标签，例如 .content 深层嵌套时，.tabs 切换按钮失效和

代码块标签的折叠显示按钮

// 获取 .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 下午，严格规定了匹配元素的格式，新增支持全角和半角括号 《》、「」 的代码。其余规则保持不变，确保括号内容严格符合成对括号包裹，并且仅包含唯一合法分隔符 ｜ 或 | 的情况。

更新后的代码

filteredElements.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;
    }
  );
});

改动点说明

正则表达式新增支持的括号类型：
- 新增括号类型：
- 开始符号：《 和 「。
- 结束符号：》 和 」。
- 括号类型完整支持：
- 开始：［、【、[、《、「。
- 结束：］、】、]、》、」。
1. 规则保持不变：
- 唯一合法分隔符
- 校验括号内容是否包含且仅包含一个全角或半角分隔符
(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>`;
}

测试用例

输入示例：

<div>【测试内容|提示信息】</div>
<div>[测试内容｜提示信息]</div>
<div>［测试内容|提示信息］</div>
<div>《测试内容｜提示信息》</div>
<div>「测试内容|提示信息」</div>
<div>【测试内容提示信息】</div>
<div>【测试内容|】</div>
<div>《|提示信息》</div>
<div>「测试内容｜提示信息｜额外内容」</div>
<div>《测试内容|》</div>

输出结果：

<div><span class="tooltip" data-tooltip="提示信息">测试内容</span></div>
<div><span class="tooltip" data-tooltip="提示信息">测试内容</span></div>
<div><span class="tooltip" data-tooltip="提示信息">测试内容</span></div>
<div><span class="tooltip" data-tooltip="提示信息">测试内容</span></div>
<div><span class="tooltip" data-tooltip="提示信息">测试内容</span></div>
<div>【测试内容提示信息】</div>
<div>【测试内容|】</div>
<div>《|提示信息》</div>
<div>「测试内容｜提示信息｜额外内容」</div>
<div>《测试内容|》</div>

规则总结

新增括号支持：
- 现支持以下全角和半角括号类型：
  - [ ]、［］、【】
  - 《》、「」
严格分隔符校验：
- 括号内容中必须且仅能包含一个全角或半角分隔符 ｜ 或 |。
成对括号验证：
- 确保括号成对且嵌套格式正确。
不符合条件保留原样：
- 对于不符合规则的内容（如缺少括号、分隔符数量不符或嵌套格式错误），直接返回原内容。

文章页面主题色配置&前端调用样式

文章头部指定主题色，供前端调用色值，进行文章风格统一

以下是具体的实现步骤：

在 Front-matter 中定义 theme_color

在你的 Markdown 文件中，添加 Front-matter 并定义 theme_color，例如：

---
title: 我的文章
theme_color: "#e5a80d"
---

在 layout.pug 中注入 CSS 变量

你需要在 layout.pug 的 <head> 部分动态生成 CSS 变量。找到 head.pug 的引入部分（通常在 head 标签内），并在其上方或下方添加以下代码：

style.
  :root {
    --theme-color: #{page.theme_color || theme.highlight_text_color || "#e5a80d"};
  }

page.theme_color：从当前文章的 Front-matter 中获取 theme_color。
theme.highlight_text_color：如果 Front-matter 中没有定义 theme_color，则使用主题配置中的默认值（你需要在主题配置中定义 highlight_text_color）。
#e5a80d：如果以上都没有定义，则使用默认的备用颜色。

修改后的 layout.pug 示例：

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    style.
      :root {
        --theme-color: #{page.theme_color || theme.highlight_text_color || "#e5a80d"};
      }
    include ./head.pug
  body
    if theme.preloader.enable
      !=partial('includes/loading/index', {}, {cache: true})

    if theme.background 
      #an_music_bg     
      if page.background
        #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
      else
        #web_bg(style=getBgPath(theme.background))
      
    !=partial('includes/sidebar', {}, {cache: true})

    #body-wrap(class=pageType)
      include ./header/index.pug

      main#content-inner.layout(class=hideAside)
        if body
          div!= body
        else
          block content
          if theme.aside.enable && page.aside !== false
            include widget/index.pug

      - const footerBg = theme.footer_img
      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache: true})

    include ./rightside.pug
    include ./additional-js.pug

在主题配置中定义默认颜色（可选）

如果你希望在主题配置中定义一个默认的 highlight_text_color，可以在 _config.butterfly.yml 中添加：

highlight_text_color: "#e5a80d"

在 CSS 中使用变量

在你的自定义 CSS 文件中（通常是 source/css/custom.css），使用 CSS 变量来定义 .highlight-text 的样式：

.highlight-text {
  color: var(--theme-color);
  font-weight: 700;
}

在文章中使用 .highlight-text 类

在你的 Markdown 文件中，可以直接使用 HTML 标签并添加 .highlight-text 类：

markdown

复制

<p class="highlight-text">这段文字会使用 Front-matter 中定义的 theme_color 颜色。</p>

重新生成并预览

完成以上步骤后，运行以下命令重新生成 Hexo 站点并预览效果：

hexo clean && hexo g && hexo s

总结

通过以上步骤，你可以实现：

在 Front-matter 中定义每篇文章的 theme_color。
使用 Pug 模板引擎动态生成 CSS 变量。
在 Butterfly 主题中应用动态颜色。

独立开发 tooltip 功能过程记录

悬浮框

文章页面主题色配置&前端调用样式