简体中文网站简单变成不同路径的繁体中文网站

 2018-11-13 07:12:22  266 人阅读  34 条评论

这两天一直在想如何实现简体中文和繁体中文 WordPress 网站共用一个数据,折腾了很久都没有成功,最后才想起可以利用 JS 实现繁体和简体切换功能来实现,再加上重写规则即可实现简体中文网站跟繁体中文网站使用不同的 URL 地址。今天就跟大家分享一下我的折腾过程吧。

简体中文网站简单变成不同路径的繁体中文网站 建站经验 第1张

一、设置繁体中文网站的 URL 地址

因为 boke112 导航用的是 Nginx,所以这里就以 Nginx 和 abc.com 为例进行说明。比如繁体中文网站地址是 abc.com/zh-hant/,我们只需要在 Nginx 相对应网站的 conf 里面添加以下规则即可:

rewrite ^/zh-hant/(.*)$ https://abc.com/$1?zh-hant last;

设置好之后可以在自己站点的首页或文章页中添加 zh-hant 试试是否正常打开,如果正常即可下一步,否则检查规则是否设置有误。如以下类似的地址都可以正常打开访问即表示成功:

  • https://abc.com/zh-hant/
  • https://abc.com/zh-hant/888.html

二、添加 JS 代码实现简体中文变繁体中文

我们可以通过 JS 代码来直接将简体中文变成繁体中文,而且可以将当前页面的所有本地链接地址改为添加有 zh-hant 的繁体中文地址,以防用户点击链接又切换回简体中文。想要实现这个功能我们只需要将以下 JS 代码添加添加到页脚文件的适当位置中,如 footer.php。

<script type="text/javascript">
var fanurl = window.location.href;
if(fanurl.indexOf("zh-hant") >= 0 ) {
document.write("<a id='StranLink' style='display:none' class='wencode' href='javascript:StranBody()'>简体</a><script type='text/javascript' src='https://abc.com/js/zh-cn-tw.js'><\/script>");
var hrefs = document.getElementsByTagName('a');
var rexDomain = 'abc.com';
var newDomain = 'abc.com/zh-hant';
for(var i=0,len=hrefs.length;i<len;i++){
hrefs[i].href = hrefs[i].href.replace(rexDomain,newDomain)
} }
</script>
特别注意:

1、点此下载 zh-cn-tw.js 文件,然后上传到自己站点并替换以上代码中的 zh-cn-tw.js 路径改为自己站点的路径。

2、将以上 abc.com 改为自己的站点域名。

3、添加好 JS 代码之后一定要记得清空缓存或者强刷新才行,要不然不一定生效。

4、由于本站的所有静态文件都是用二级域名,所以以上 JS 代码替换链接仅仅替换文章链接,不会涉及到静态文件链接的替换。如果没有采用动静分离的话,如果以上 JS 代码不生效,估计要做一个判断,让其不替换静态文件的 URL 地址。

添加好 JS 代码之后,我们就可以访问第一步中的地址,或者随便打开一篇文章,在域名后面添加上 zh-hant 试试看是否已经变成了繁体中文。如果已经成功变成繁体中文则继续第三步,否则检查第二步的代码是否添加或修改有误。

三、在页头添加 hreflang 属性

直接找到当前主题的 header.php 文件,添加以下代码(记得修改里面的域名为自己域名):

<link rel="alternate" hreflang="zh-hans" href="https://abc.com/" />
<link rel="alternate" hreflang="zh-hant" href="https://abc.com/zh-hant/" />

四、添加简体和繁体链接按钮

在简体中文或繁体中文显眼的地方添加上简体中文和繁体中文的链接地址,届时只要有人点击繁体中文或者直接访问繁体中文网址即可直接显示为繁体中文的内容。

五、总结

至此,我们已经成功将一个简体中文网站变成了两个“网站”,一个是简体中文网站,一个是繁体中文网站,它们共用同一套数据库。唯一缺点就是这个方法是 JS 实现的,虽然繁体中文网站有自己的 URL 地址,也有自己的繁体文字,但是源代码还是简体中文网站的。对于用户而言可能看不出来,但是对于搜索引擎而言,可能会认为是同一个页面,因为两个不同的 URL 地址页面的源代码是一模一样的。

正是因为这个缺点存在,boke112 导航最终还是把这个繁体中文去掉了,毕竟源代码是简体中文的,不管是对搜素引擎还是对广告联盟,都还是会认为是简体中文,这个有点得不偿失。甚至我都还担心搜索引擎未必会收录繁体中文网站的 URL 地址,毕竟它的源码是跟简体中文一样的。

您可能感兴趣的文章

文章标签:
本文地址:https://boke112.com/6047.html
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

 发表评论

强表情无奈表情抠鼻表情笑哭表情偷笑表情衰表情流汗表情奋斗表情吐血表情抓狂表情晕表情流泪表情疑问表情呲牙表情惊讶表情鼓掌表情

  1. 洁灰博客园
    洁灰博客园 @回复

    大神,这波操作666

  2. 老站长
    老站长 @回复

    如果把简繁切换做出来就更完美了,获取当前页面链接去掉关键字符串,但是发现博主js是不是少写了一部分(繁转简:去掉简转繁js),页面会不会有缓存呢?需不需要+一截清理浏览器缓存的代码 [奋斗]

    • 老站长
      老站长2018-11-14 00:07  回复

      @老站长唉呀妈呀,老眼昏花了,好像博主文章里有相应的代码 [晕] ,学习了学习了!

    • 懿古今
      懿古今2018-11-14 11:42  回复

      @老站长本文中就说到添加JS和简繁互换按钮之后就可以直接将文字变成繁体或简体,不过这个是同样的URL地址。本文所说的是不同URL地址,本计划是做成两个站点的,可惜网页源代码相同而放弃了。

  3. nice
    nice @回复

    感觉没什么大用处

    • 懿古今
      懿古今2018-11-14 11:46  回复

      @nice如果国外使用繁体字的用户比较多,可以考虑。要不然就没有任何意义。

  4. 闲鱼
    闲鱼 @回复

    [抠鼻] 我把繁简切换的功能都关了,不提供,哈哈

    • 懿古今
      懿古今2018-11-14 11:47  回复

      @闲鱼其实现在有谷歌翻译在,或者一些浏览器会自动翻译,感觉确实意义不大

  5. 小兽wordpress
    小兽wordpress @回复

    可以的。繁体有时候也有用户。

  6. 灵异世界网
    灵异世界网 @回复

    多语言网站一直没有做过。。

  7. 微信红包活动网
    微信红包活动网 @回复

    有没有转换其他文的,有印度文源码吗?

  8. share1223
    share1223 @回复

    我的早就加上了~

  9. 森纯博客
    森纯博客 @回复

    教程真好,涨姿势了

  10. 菊座
    菊座 @回复

    暂时不用 没什么港澳台同步关注小可

  11. 99资源学习网
    99资源学习网 @回复

    搞个中英的意义更大些

  12. Jane博客
    Jane博客 @回复

    还就没来了

  13. 夏天烤洋芋
    夏天烤洋芋 @回复

    [奋斗] 我的博客好像不需要^_^

  14. 购秀时间
    购秀时间 @回复

    繁体字才是汉字原来的样子。

  15. 网站建设
    网站建设 @回复

    繁体一般是香港那么会用的到

  16. 黑鸟博客
    黑鸟博客 @回复

    简体繁体意义不大,基本大家都可以直接看懂的

  17. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    从前有访问繁体的网站,有切口是简体的,觉得很人性化

  18. 去看你博客
    去看你博客 @回复

    [抠鼻] 主题自带,不用折腾,再说也看不懂繁体

  19. 明月登楼
    明月登楼 @回复

    鸟哥Begin主题自带繁简切换,飘过!

  20. 里维斯社
    里维斯社 @回复

    朝国际路线发展了,也可以搞个英文版的