gitbook搜索插件汉化案例

初始化gitbook项目后使用search-pro搜索插件

效果： 以上是搜索插件的效果，但是这个提示是英文的，我想把它改成中文提示

如何修改呢？

1、 我首先想到的是在项目中搜索"Type to search" 找到这个字符串修改成想要的提示

经过搜索发现本项目中没有关于"Type to search" 的信息，此方法失败。

2、F12根据页面寻找线索

根据特征标识在项目中搜索

根据查询到的文件内容得知这是个模板文件，渲染完成后搜索框placeholder属性的值为"Type to search"， 那么我们就要搞清楚"{{ 'SEARCH_PLACEHOLDER'|t }}"这段模板代码是怎么变成"Type to search"这个字符串的

接下来看看gitbook的执行信息

用SVCode打开gitbook3.2.3版本的项目，C:\Users\user.gitbook\versions\3.2.3这个项目 在这个项目中搜索"Type to search"

找到了这个文件直接修改

重启查看界面

这种可以但不是我想要的结果，因为en.json这个文件是在node_modeuls中的，重新安装又会变回来

3、寻找更好的方法 打开en.json文件的位置，查看到同目录下有个zh-hans.json，可以推断这个地方定义的json就是个字典，en.json定义的英文， zh-hans.json定义的是中文

这么样才能用上zh-hans.json而不是en.json这样提示就是中文了

因为没有特别的配置，所以推断en.json是默认值，我们搜索en.json试试看（试了下，搜索en.json搜索不到，搜索en又搜索的太多了，另寻出路吧！）

还记得我们之前说的吧，搞清楚"{{ 'SEARCH_PLACEHOLDER'|t }}"这段模板代码是怎么变成"Type to search"这个字符串的，就能知道其中的原理了，有助于我们修改，打开项目的README.md文件看看介绍吧

通过上面我们得知，gitbook使用的是Nunjucks模板语言，那我们就看看Nunjucks是怎么解析"{{ 'SEARCH_PLACEHOLDER'|t }}"这段模板的吧， 找到Nunjucks官网看下文档，

根据文档得知，上面的代码用的是t这个过滤器我们找找t这个过滤器是干什么的

根据文档找了下内置过滤器没有叫t这个名字的过滤器，由此推断t是个自定义过滤器，我们找找看自定义过滤器是怎么定义的，

查看API得知addFilter这个方法是添加自定义过滤的，我们在gitbook中搜索addFilter看看

看上去第一个比较像自定义过滤器的地方，我们打个断点看看是不是有叫t这个名字的过滤在这个地方添加

右键，编辑断点， filterName == "t"

我们怎么看到这里的值呢，可以添加监视

由此我们得到，t是在这里初始化的

由此，分析得知，t这个过滤器的方法内容是 return i18n.t(language, s); 搜索return i18n.t(language, s); 试试看

在这里打个断点，看看这个方法是干什么的

通过代码分析，lang为空（没设置语言），默认用的en, 如果我们把en变成zh-hans就可以变成中文了，

跳出方法，看看是谁调用了这个方法，

这里通过代码得知，language是空，我们在这个js文件看看是在哪里初始化这个变量的

找到了，我们在这里打个断点，然后重启项目，再次进入断点看看这个是怎么初始化的，

根据分析，config的内容有部分是从book.json文件中读取的，那我们在项目中的book.json中配置个language等于zh-hans试试

重启项目

值已经设置好了，我们正常启动起来看看

此时已经变成了中文，

等我做完这一切后，发现了这篇文章betheme.net/news/txtlis…

是不是感觉绕了远路？

不不不我们做的这些是有意义的，可以更深刻的了解gitbook的运行机制 如果说搜索框的“输入并搜索”这个提示我们要修改成自定义的呢？通过以上我们的理解是不是可以试试，自己写一个zh-hans2.json这个文件让gitbook去加载这个文件

由上面我们的过程得知gitbook是从_i18n文件夹下加载的json，而且还可以通过项目上的book.json中的language属性控制 那么我们是不是可以在项目中创建_i18n文件夹然后在创建zh-hans2.json这个文件，这样就可以自定义提示了， 那我们试试

效果图：

至此完结。在理解的基础上去使用东西总能让你用得如鱼得水。