Hexo-NexT支持简体繁体一键切换

本文主要介绍如何在Hexo上实现简体/繁体一键切换。

简体繁体切换的基本原理:首先建立一个简体字与繁体字相对应的映射表,然后遍历整个界面,把相应的简体字或者是繁体字映射为对应的字体即可。

Hexo实现过程

  1. 首先,我们可以在这里右键另存下载简繁字体切换所需的tw_cn.js文件,我们把这个文件放到~/themes/next/source/js文件夹下。

  2. 修改模板,在我们想要显示简繁转换按钮的地方添加如下代码。例如,我在NexT主题的布局文件~/themes/next/layout/_partials/footer.swig里添加了如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="translate-style">
繁/简:<a id="translateLink" href="javascript:translatePage();">繁体
</a>
</div>
<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体,1-繁体,2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "https://tding.top/"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁体"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上,但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

读者可以在博客底部点击简体/繁体来看具体的切换字体效果。

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道