彻底解决翻译干扰：kiss-translator元素排除功能全攻略

最新推荐文章于 2025-09-17 07:27:38 发布
原创 最新推荐文章于 2025-09-17 07:27:38 发布 · 1k 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

彻底解决翻译干扰：kiss-translator元素排除功能全攻略

【免费下载链接】kiss-translator A simple, open source bilingual translation extension & Greasemonkey script (一个简约、开源的 双语对照翻译扩展 & 油猴脚本) 【免费下载链接】kiss-translator 项目地址: https://gitcode.com/gh_mirrors/ki/kiss-translator

你是否还在为翻译工具误译代码块、导航菜单或广告文本而烦恼？是否希望精细控制网页哪些内容需要翻译，哪些应该保持原样？作为一款开源的双语对照翻译扩展（Extension）与用户脚本（User script），kiss-translator提供了强大的元素排除功能，让你告别"翻译过度"的困扰。本文将系统讲解如何通过选择器排除、术语过滤和规则配置三大核心手段，实现对翻译内容的精准控制，让翻译体验真正做到"按需定制"。

核心痛点与解决方案

在信息爆炸的今天，我们每天浏览大量多语言内容，但并非所有文本都需要翻译。想象以下场景：

  • 阅读技术文档时，代码块被翻译成乱码
  • 浏览国际新闻时，导航栏和广告频繁被翻译
  • 使用学术数据库时，专业术语被错误替换

这些问题不仅影响阅读体验，更可能导致信息误解。kiss-translator的元素排除功能正是为解决这些痛点而生，其工作原理基于规则引擎与CSS选择器技术，通过三层过滤机制实现精准控制：

mermaid

元素排除的三种实现方式

1. 选择器排除（推荐）

选择器排除是最精准、最常用的排除方式，通过CSS选择器语法指定不需要翻译的页面元素。这基于文档对象模型（DOM, Document Object Model）的层级结构，让你可以精确定位任何HTML元素。

基础语法与常见场景
选择器类型语法示例应用场景优先级
ID选择器#navbar导航栏、固定区域高
类选择器.code-block代码块、广告区块中
标签选择器pre预格式化文本、代码标签中
属性选择器[data-no-translate]自定义标记元素高
组合选择器div.advertisement, span.promotion多元素批量排除中
实战案例：排除GitHub代码块

GitHub页面的代码块使用<table>标签配合class="highlight"实现语法高亮，要排除这些代码块，只需在规则设置中添加：

/* 排除GitHub代码块 */
table.highlight, pre.file-code {
  /* kiss-translator会跳过这些元素 */
}

在kiss-translator的规则设置界面中，你需要：

  1. 导航到规则管理页面
  2. 找到目标网站的规则（或创建新规则）
  3. 在keep_selector字段中输入上述选择器
  4. 保存并刷新页面生效
高级技巧：伪类与层级选择

对于动态生成的内容或复杂组件，可以使用层级选择器精确定位：

/* 排除Stack Overflow的回答中的代码块 */
div.answercell div.post-text pre {
  /* 只排除回答区域内的代码块，不影响评论区 */
}

/* 排除具有特定属性的按钮 */
button[data-action="translate"]:not(.active) {
  /* 排除未激活状态的翻译按钮 */
}

2. 术语过滤排除

术语过滤允许你指定不需要翻译的关键词或短语，适用于专业术语、品牌名称、特殊符号等文本内容。这基于字符串匹配技术，支持简单匹配和正则表达式两种模式。

基础配置与语法

在规则设置的terms字段中，你可以：

  • 使用逗号分隔多个关键词：API, JSON, JavaScript
  • 添加!前缀表示强制排除：!GitHub, !GitLab（即使出现在句子中间也会排除）
  • 使用正则表达式：/^[A-Z0-9]{8}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{12}$/（排除UUID格式文本）
正则表达式高级应用

对于复杂模式匹配，正则表达式（Regular Expression）是强大工具：

正则表达式匹配内容应用场景
\b\d{3}-\d{2}-\d{4}\b社会保障号码格式敏感信息保护
(https?|ftp):\/\/[^\s/$.?#].[^\s]*URL链接链接地址保护
[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}电子邮件地址联系方式保护
实战案例：技术文档术语保护

在技术文档阅读场景中，我们需要保护编程语言关键词和API名称：

!JavaScript, !TypeScript, !React, !Vue, /^use[A-Z]\w+$/, /^[A-Z_]{2,}$/

上述配置将：

  • 精确保护"JavaScript"、"TypeScript"等框架名称
  • 通过正则表达式保护以"use"开头的React Hooks（如useState, useEffect）
  • 保护全大写的常量（如API_KEY, MAX_SIZE）

3. URL模式匹配排除

URL模式匹配允许你为不同网站或页面设置差异化的翻译规则，包括完全排除特定URL的翻译。这基于模式匹配算法，支持通配符和正则表达式两种匹配方式。

模式语法与优先级
模式类型语法示例匹配效果优先级
精确匹配https://github.com/仅匹配该URL最高
前缀匹配https://github.com/*匹配所有子路径中
通配符匹配*://*.github.com/*匹配所有子域名中
正则匹配/^https:\/\/github\.com\/[\w-]+\/[\w-]+$/匹配GitHub仓库页面高
多规则冲突解决

当多个规则同时匹配一个URL时，kiss-translator遵循以下优先级规则：

  1. 精确匹配规则 > 正则表达式规则
  2. 具体路径规则 > 通配符规则
  3. 后定义的规则 > 先定义的规则（可覆盖）

mermaid

规则配置全指南

规则系统架构

kiss-translator的规则系统采用层级结构设计，确保配置的灵活性和可维护性。每个规则包含基本信息、匹配条件和行为设置三部分：

mermaid

全局规则 vs 网站规则

全局规则（pattern: ""）适用于所有网站，而网站规则（如pattern: "://.github.com/"）仅适用于特定网站。建议将通用排除规则（如代码块、广告）放在全局规则，网站特有规则单独配置。

全局规则最佳实践

全局规则配置示例（关键部分）：

{
  "pattern": "*",
  "selector": "body",
  "keepSelector": "pre, code, .highlight, [data-no-translate], #navbar, .advertisement",
  "terms": "API, JSON, HTTP, HTTPS, URL, CSS, HTML, JavaScript, TypeScript",
  "transOpen": "true",
  "fromLang": "auto",
  "toLang": "zh-CN"
}

这个配置将：

  • 排除所有<pre>、<code>标签内容
  • 排除带有highlight类的元素（通常是代码块）
  • 排除所有指定技术术语
  • 对所有网站默认启用翻译

规则管理界面详解

kiss-translator提供直观的规则管理界面，位于扩展选项（Options）页面的"规则"标签页。主要功能区域包括：

1. 规则列表区域

显示所有已配置规则，包括全局规则和网站规则。每个规则项可展开查看详细配置，支持编辑、删除和禁用操作。

2. 规则编辑区域

关键配置项说明：

  • Pattern：URL匹配模式，决定规则应用范围
  • Selector：需要翻译的元素选择器（默认"body"）
  • Keep Selector：不需要翻译的元素选择器（核心排除功能）
  • Terms：不需要翻译的术语列表
  • Translate Switch：是否启用翻译（可临时关闭）
3. 导入/导出功能

规则支持JSON格式导入导出，便于备份和共享。建议定期导出重要规则配置，格式如下：

[
  {
    "pattern": "*",
    "selector": "body",
    "keepSelector": "pre, code",
    "terms": "API, JSON",
    "transOpen": "true",
    "fromLang": "auto",
    "toLang": "zh-CN"
  },
  {
    "pattern": "*://*.github.com/*",
    "selector": "main",
    "keepSelector": ".repository-content pre, .highlight, #wiki-body pre",
    "terms": "PR, Issue, Commit, Branch, Fork",
    "transOpen": "true"
  }
]

高级技巧与常见问题

动态内容排除方案

现代网站大量使用JavaScript动态加载内容（如SPA应用），传统静态选择器可能无法捕获这些元素。解决方案：

  1. 使用MutationObserver：通过injectJs配置项注入DOM变化监听器
  2. 高阶选择器：使用:has()伪类选择器（如div:has(> pre)）
  3. 延迟排除：利用transStartHook在翻译开始前动态添加排除规则

示例：为动态加载的代码块添加排除

// 在injectJs中添加
document.addEventListener('DOMContentLoaded', function() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.tagName === 'DIV' && node.classList.contains('dynamic-content')) {
          node.setAttribute('data-no-translate', 'true');
        }
      });
    });
  });
  
  observer.observe(document.body, { childList: true, subtree: true });
});

常见问题排查流程

当排除功能不生效时，可按以下步骤排查：

  1. 检查选择器语法：使用浏览器开发者工具（Elements > Selector）测试
  2. 确认规则匹配：检查当前URL是否匹配规则的pattern
  3. 查看控制台日志：按F12打开开发者工具，查看Console标签页是否有错误
  4. 检查规则优先级：是否有其他规则覆盖了当前配置
  5. 验证元素加载：动态加载的元素可能需要特殊处理

性能优化建议

过多或复杂的选择器可能影响页面加载速度，建议：

  • 优先使用ID和类选择器，避免复杂层级选择器
  • 合并相似规则，减少规则数量
  • 对大型网站使用更具体的pattern，避免全局规则过度匹配
  • 定期清理不再需要的规则

实战案例：打造完美阅读体验

案例1：学术论文阅读优化

学术论文通常包含大量公式、引用和专业术语，通过以下配置实现精准翻译：

{
  "pattern": "*://*.scienceDirect.com/*, *://*.nature.com/*",
  "selector": ".article-content, .main-content",
  "keepSelector": "math, .equation, .reference, .citation, .table, .figure-caption",
  "terms": "DNA, RNA, PCR, ATP, GDP, mRNA, tRNA, cDNA, kDa, nm, μm, PCR, ELISA",
  "transOpen": "true",
  "fromLang": "en",
  "toLang": "zh-CN",
  "skipLangs": ["zh", "ja", "ko"]
}

案例2：视频网站字幕优化

观看外语视频时，我们通常希望翻译字幕但保留界面元素：

{
  "pattern": "*://*.youtube.com/*, *://*.netflix.com/*",
  "selector": ".caption-text, .subtitles",
  "keepSelector": "#player-container, .video-player, .control-bar, .ads",
  "terms": "HD, 4K, HDR, Dolby, 5.1, 7.1, CC",
  "transOpen": "true",
  "transOnly": "true",
  "textStyle": "diy",
  "textDiyStyle": "background: rgba(0,0,0,0.7); color: white; padding: 2px 4px; border-radius: 2px;"
}

案例3：技术文档阅读增强

技术文档需要保护代码示例和命令，同时翻译说明文字：

{
  "pattern": "*://*.developer.mozilla.org/*, *://docs.python.org/*, *://reactjs.org/*",
  "selector": ".main-content, .document",
  "keepSelector": "pre, code, .highlight, .code-example, .cli-snippet, .notranslate",
  "terms": "Python, JavaScript, TypeScript, React, Vue, Angular, Node.js, npm, yarn, pip, conda",
  "transOpen": "true",
  "fromLang": "en",
  "toLang": "zh-CN"
}

总结与展望

元素排除功能是kiss-translator实现精准翻译的核心机制，通过选择器排除、术语过滤和URL模式匹配三大手段，让你完全掌控翻译内容。从简单的代码块排除到复杂的动态内容处理，kiss-translator提供了灵活而强大的配置选项，满足不同场景的翻译需求。

随着Web技术的发展，未来元素排除功能将支持更智能的识别方式，包括基于机器学习的内容分类和用户行为分析，进一步提升翻译体验的智能化和个性化。

最后，作为一款开源项目，kiss-translator欢迎你贡献规则配置、反馈使用问题或参与代码开发。让我们共同打造更智能、更贴心的翻译工具！

立即行动：

  1. 升级到最新版kiss-translator
  2. 配置你的第一个排除规则
  3. 在评论区分享你的使用心得
  4. 关注项目更新获取更多高级功能

项目地址：https://gitcode.com/gh_mirrors/ki/kiss-translator 规则分享社区：[官方讨论区] 问题反馈：[Issues页面]

【免费下载链接】kiss-translator A simple, open source bilingual translation extension & Greasemonkey script (一个简约、开源的 双语对照翻译扩展 & 油猴脚本) 【免费下载链接】kiss-translator 项目地址: https://gitcode.com/gh_mirrors/ki/kiss-translator

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值