如何给插件添加中文（超详细）

众所周知，大部分插件都只有英文，例如插件的设置面板，或者是插件增加的右上角的提示等。

本文提供的方法只针对某个特定插件添加中文，而非对所有插件添加中文。
添加中文前可以先给插件作者询问是否愿意接收你为插件添加的中文，如果不愿意就没辙。
如果作者同意你为该插件添加中文，那么你添加好中文后可以给插件作者提交 pr，等待作者合并了你的 pr 后，该插件后续的版本都可以看到中文了，你也可以在该插件的 Contributers 中找到你的名字。

步骤

本教程提供给看得懂英文的小白，希望能够为你心爱的某个插件增加中文翻译的用户。我会尽量写的详细点，不需要你有很专业的代码经验。

准备工作

步骤一：安装 git, vscode 和 npm

具体操作可以看 git的安装与配置（详细） - 知乎 (zhihu.com)、npm超详细安装（包括配置环境变量）.

步骤二：fork 插件

具体操作就是打开插件的 GitHub 仓库，点击右上角的 fork 按钮（需要注册 GitHub 账号）。相当于你拿到了一个插件仓库的副本。

步骤三：将 fork 好的项目下载到本地（三种方法三选一即可）

你可以点击页面上方的绿色的 Code 按钮，然后点击下方的 download zip 下载压缩好的整个项目。
你也可以在点击了绿色的 Code 按钮后，复制下面提供的以 git clone 开头的任意一段命令，然后在本地的某个文件夹中右键选择 Open Git Bash Here 打开 git bash，然后粘贴刚刚复制的那段命令，点击回车。这样项目就会被下载到这个文件夹中（可能会下载失败，一般与网络有关。如果报错可以百度查一下报错信息，也可以科学上网，或者用其他两种方法）
推荐第三种方法，在 vscode 中克隆 Git 仓库。你可以在 vscode 的欢迎界面找到选项『克隆 Git 仓库…』，也可以在上方搜索中输入 > Git: 克隆，选择从 GitHub 克隆。然后选择你刚刚 fork 的项目，再选择一个你想把该项目克隆到本地的位置即可

这样我们就把插件项目克隆到本地了。为了测试，你可以在该文件夹同级添加一个测试用的文件夹，然后用 obsidian 打开该文件夹作为测试库，名字可以随意取，例如

如何给插件添加中文（超详细）--准备工作

当然，你可以查看插件源码中的 esbuild.config.mjs 文件，在里面找到一项 outfile，后面跟着的就是代码编译后生成的 main.js 文件存放的位置，为了方便测试，可以把他修改为测试库中的对应内容，例如 outfile:: “../developmentVault/.obsidian/plugins/pluginName”（其中两个点 .. 代表到上一级目录），esbuild.config.mjs 文件不会提交到 GitHub 上，无需担心修改后影响源码。

有的插件比较完善，生成 main.js 的时候会自动帮你生成测试库（例如 dataview, hometab 等），那么你就可以不需要自己创建测试库。

添加中文

右键插件的源码所在的文件夹，选择『通过 vscode 打开』。在 vscode 左上角点击『终端 => 新建终端』（页面不够宽时点击左上角三个点可以找到）

如何给插件添加中文（超详细）--添加中文

这时候查看项目中的源码，会发现很多都标红报错。在下方弹出的窗口中输入 npm i，这一步是安装项目所需依赖。一般需要等待几秒到几十秒。安装完之后报错基本都会消失。安装完之后，输入 npm run dev

新建翻译文件夹

提示

下面的创建的文件夹 lang，你可以根据下面的教程手动一个个创建，也可以找个有中文的插件（例如 excalidraw, kanban, floating-toc 等）直接下载那个插件源码中的 lang 文件夹然后复制粘贴到你当前需要添加翻译的插件源码的 src 文件夹中。

一般插件都会有一个叫作 src 的文件夹，在这个文件夹中新建一个文件夹 lang，然后在这个文件夹中新建以下文件和文件夹，先不用在里面添加内容。

注意

helpers.ts 文件与 locale 文件夹同级。

如何给插件添加中文（超详细）--新建翻译文件夹

解释一下这些文件，helpers.ts 相当于中转站，里面的内容是固定的（导出了一个函数 t() 用于根据语言转换文本为各个语言）。locale 文件夹中的文件存放的就是各种语言的翻译了。

把这段代码复制到 helper.ts 文件中，不需要做修改。我们需要修改的是 locale 文件夹中的各个文件。

import { moment } from "obsidian";
import ar from "./locale/ar";
import cz from "./locale/cz";
import da from "./locale/da";
import de from "./locale/de";
import en from "./locale/en";
import enGB from "./locale/en-gb";
import es from "./locale/es";
import fr from "./locale/fr";
import hi from "./locale/hi";
import id from "./locale/id";
import it from "./locale/it";
import ja from "./locale/ja";
import ko from "./locale/ko";
import nl from "./locale/nl";
import no from "./locale/no";
import pl from "./locale/pl";
import pt from "./locale/pt";
import ptBR from "./locale/pt-br";
import ro from "./locale/ro";
import ru from "./locale/ru";
import tr from "./locale/tr";
import zhCN from "./locale/zh-cn";
import zhTW from "./locale/zh-tw";

const localeMap: { [k: string]: Partial<typeof en> } = {
  ar,
  cs: cz,
  da,
  de,
  en,
  "en-gb": enGB,
  es,
  fr,
  hi,
  id,
  it,
  ja,
  ko,
  nl,
  nn: no,
  pl,
  pt,
  "pt-br": ptBR,
  ro,
  ru,
  tr,
  "zh-cn": zhCN,
  "zh-tw": zhTW,
};

const locale = localeMap[moment.locale()];

export function t(str: keyof typeof en): string {
  return (locale && locale[str]) || en[str];
}

接下来修改 locale 文件夹中的各个文件。主要需要修改的文件为 en.ts, zh-cn.ts 和 zh-tw.ts。分别代表插件的英文、简体中文和繁体中文。

先复制下面这段代码，放到 locale 文件夹中的所有文件夹中，然后替换语言名为各自的语言

// 语言名，需要替换为下方表格中的对应内容

export default {};

下表是不同语言文件开头放的注释

文件名	语言
ar.ts	`// العربية`
cz.ts	`// čeština`
da.ts	`// Dansk`
de.ts	`// Deutsch`
en.ts	`// English`
en-gb.ts	`// British English`
es.ts	`// Español`
fr.ts	`// français`
hi.ts	`// हिन्दी`
id.ts	`// Bahasa Indonesia`
it.ts	`// Italiano`
ja.ts	`// 日本語`
ko.ts	`// 한국어`
nl.ts	`// Nederlands`
no.ts	`// Norsk`
pl.ts	`// język polski`
pt-br.ts	`// Português do Brasil` `// Brazilian Portuguese`
pt.ts	`// Português`
ro.ts	`// Română`
ru.ts	`// русский`
tr.ts	`// Türkçe`
zh-cn.ts	`// 简体中文`
zh-tw.ts	`// 繁體中文`

添加翻译内容

接下来开始在 en.ts, zh-cn.ts 和 zh-tw.ts 文件中添加翻译。

翻译其实是一个映射，把键 key 替换成 value，因此不同语言需要使用相同的 key 值，然后 value 是各自语言的对应翻译。比如 excalidraw 插件所选用的 key 值为大写英文。为了不更多修改插件本身的源码，我们直接以所需翻译的英文作为 key，这样我们只需要添加 value 即可。

首先找到我们需要翻译的内容，这里以插件的设置面板举例。

想要找到设置的面板，你可以用 vscode 的全局搜索（快捷键 ctrl shift f 或者直接点击左边栏第二个搜索图标），搜索 display() 或者是 extends PluginSettingTab，搜索结果一般位于 settings.ts / main.ts / …SettingTab.ts 文件中。这个 PluginSettingTab 就代表插件的设置面板，display 则是设置面板中展示的内容。如果还是找不到，直接搜索插件设置面板中的英文。

如何给插件添加中文（超详细）--添加翻译内容