js简体繁体切换代码

2023-08-10
7,150次阅读
4条评论

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

不少网站为了更好地照顾不同用户使用简体/繁体的阅读习惯,会提供简体繁体两种版本字体切换,提高用户体验。例如hexo虽然作者是来自台湾的,但是hexo的官网不仅提供了适合台湾同胞阅读的繁体中文版,还提供了适合我们内地同胞阅读的简体中文版,照顾了我们这些习惯使用简体读写的大陆用户,hexo得到了不少内地忠实粉丝追捧。同样,我们也可以提供繁体版来照顾那些使用繁体字的台湾、香港同胞阅读习惯。

具体实现:

  1. 首先,点击这里右键另存下载简繁字体切换所需的tw_cn.js文件,上传到自己的网站空间。
  2. 其次,修改模板,在你想要显示简繁转换按钮的地方加上下面一段代码。我就直接在footer.swig(我的hexo主题是NexT.Mist,里面布局文件的格式是.swig,其他主题的后缀名可能不相同,找到对应的文件名即可)里添加了如下代码:
<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://ylface.com"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁體"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上,但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

这就基本完成了简体繁体切换功能,不管你是hexo,jelly,Octopress等静态博客,还是wordpress,typecho,emlog,Z-Blog等动态的,都可以用上。具体的演示效果可以点击我博客底部简体中文切换字体,至于简体繁体切换按钮嘛,文字和样式可以按个人喜好自行更改。这是一篇来源于三步让你的网站支持简体繁体切换 的文章,由于原博客现在展示不了切换效果,我优化了一下文章并添加了切换效果。

下载链接

tw_cn.js

密码:auyb

正文完
要饭中,多少给点吧(支付宝)
post-qrcode
 1
评论(4条评论)
验证码
2024-06-03 15:22:27 回复

Puock 主题有办法集成这个功能吗?

 Windows  Chrome  中国上海上海市电信