# 翻译指南 翻译程序能够将特定的文本替换成您的翻译, 作用范围为网页中所有文本节点(`nodeType === Node.TEXT_NODE`), 文本框的提示文字(`placeholder`), 以及鼠标停留时弹出的提示文字(`title`). ## 文件目录 - `i18n.js` 主程序 - `i18n.ja-JP.js` 日语翻译 - `i18n.en-US.js` 英语翻译 - `i18n.md` 本说明文档 即翻译文本均存放在`i18n.[ISO语言代码].js`中. ## 添加翻译文本 1. 用代码编辑器打开相应的翻译文件, 以英语为例, 则打开`i18n.en-US.js`. 2. 文件结构大致为: ```js export const map = new Map([ /* 翻译文本 */ ]); export default { export: { map }, }; ``` 3. 在`/*翻译文本*/`处添加翻译, 语法见下一节. ## 翻译的语法 ### 直接翻译 格式为``[`原文本`,`翻译后文本`],``. 例如, 将`主站`翻译为`Home`, 则添加: ```js [`主站`, `Home`], ``` 添加后的文件大致如下: ```js export const map = new Map([ /* 其他翻译... */ [`主站`, `Home`], ]); export default { export: { map }, }; ``` ### 为特殊语境指定翻译 可以为特定元素的文本特别指定一种翻译, 但是需要翻译者对[CSS](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS)的[选择器语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)有一定了解. 格式为: ```js [`原文本`, { text: `翻译后文本`, selector: `CSS选择器` }], ``` 例如: ```js [`主站`, { text: `Home2`, selector: `.xxx.yyy` }], ``` 将在文本所属节点匹配`.xxx.yyy`选择器时, 将`主站`翻译为`Home2`. 按照上面的例子, 以下的元素 ```html 主站 主站 ``` 将翻译为 ```html Home2 主站 ``` ### 混合翻译 可以组合以上两种翻译方式, 为同一词语使用多种翻译. 格式为: ```js [`原文本`, [ `翻译文本1`, { text: `翻译文本2`, selector: `CSS选择器1` }, { text: `翻译文本3`, selector: `CSS选择器2` }, ]], ``` 即存放翻译文本的地方改成一个数组`[]`, 其中存放多种翻译, 用逗号`,`隔开每一项. - 直接翻译只能有一个, 而特殊翻译可以有多个. - 越在后面的特殊翻译优先级越高, 如果一个元素同时满足两种翻译里的选择器, 程序会使用较后面出现的翻译. - 程序其实不会检查直接翻译到底有几个, 要是真的有多个, 只有最后一个出现的直接翻译被采用. 例如以下混合翻译: ```js [`主站`, [ `Home`, { text: `Home2`, selector: `.xxx.yyy` }, ]] ``` 能够将 ```html 主站 主站 ``` 翻译为 ```html Home2 Home ``` ### 使用选择器翻译 当原文本很长或很复杂时, 可以用CSS选择器选择该节点进行翻译. 这种翻译统一放在原文本为`*`的一节翻译中. 格式为: ```js [`*`, [ { selector: `CSS选择器1` text: `翻译文本1`, }, { selector: `CSS选择器2` text: `翻译文本2`, }, ]], ``` 例如以下选择器翻译: ```js [`*`, [ { selector: `.xxx.yyy` text: `Home3`, }, ]] ``` 能够将 ```html very very long text very very long text very very long text very very long text very very long text ``` 翻译为 ```html Home3 ```