gitbook搜索插件汉化案例

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

效果： image.png

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

如何修改呢？

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

image.png

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

2、根据页面寻找线索

image.png

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

image.png

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

接下来看看gitbook的执行信息

image.png

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

image.png

找到了这个文件直接修改

image.png

重启查看界面

image.png

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

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

image.png

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

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

还记得我们之前说的吧，要搞清楚"{{ 'SEARCH_PLACEHOLDER'|t }}"这段模板代码是怎么变成"Type to search"这个字符串的，打开项目的README.md文件看看介绍吧

image.png

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

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

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

image.png

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

image.png

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

image.png

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

image.png image.png

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

image.png image.png

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

image.png

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

image.png

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

image.png image.png image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

重启项目

image.png

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

image.png

此时已经变成了中文，

等我做完这一切后，发现了这篇文章https://betheme.net/news/txtlist_i54819v.html?action=onClick

image.png

是不是感觉绕了远路？

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

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

image.png image.png

效果图：

image.png

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