全站多语言

category
tags
type
status
slug
date
password
Last edited time
May 7, 2024 03:34 AM
summary
icon

适用场景

需要面对不同语言用户展现完全不同内容的站点,例如项目官网,品牌官网等。

效果预览

  • 访问首页时,会检测用户的默认语言进行自动跳转。默认语言取自用户浏览器的偏好语言(window.navigator.language)
    • 例如用户的浏览器默认语言如果是 en , 则会跳转到 /en目录;否则就不会自动跳转,用户可以从菜单栏自行选择切换语言。
      notion image
  • 理论上可以配置无数种语言。

使用方法

⚠️
多语言功能不支持静态导出的部署方案:例如 yarn export,cloudflarePage、4Everland等都不支持多种语言。 若要用静态导出方案,可以用多域名解决:例如:xxx.cn xxx.en, xxx.jp 等; 或者 cn.xxx.com , jp.xxx.com, cn.xxx.com

1. 网站准备多个数据库

一种语言一个数据库。例如我准备两个演示数据库

2. 配置NOTION_PAGE_ID

blog.config.js中将NOTION_PAGE_ID设置成多个(用英文逗号隔开): 示例:'02ab3b8678004aa69e9e415905ef32a5en:7c1d570661754c8fbc568e00a01fd70e
notion image
其中第一个PAGE_ID视作默认主语言,与以往旧版的NotionNext使用方式无异。
而逗号后面的ID要以语言名开头且ID中间用英文冒号:隔开。例如缩写en:xxxx 表示英文站点使用xxxx这个数据库,访问站点的 [domain.com]/en 读取的站点数据来自xxxx 这个数据库。

3. 更多语言示例

按照上面的规律我们可以创建更多语言
假设我要创建支持4种语言的站点,默认语言是日文,然后支持切换中文、英文、西班牙文,该如何设置呢?
先准备好对应的四个数据库,如下:
语言名
数据库ID(示例)
说明
jp
xxJPxx
日文优先
en
xxENxx
英文
zh
xxZHxx
中文
es
xxesxx
西班牙文
 
然后将他们配置到NOTION_PAGE_ID中:
NOTION_PAGE_ID = ‘xxJPxx,en:xxENxx,zh:xxZHxx,es:xxESxx
至此大功告成。

4. 用菜单切换语言。

只要让用户跳转到对应的语言路径即可,例如我的默认语言是中文,要让用户点击后切换到英文 /en
 
但是多语言的菜单处理会比较特殊,不能使用相对路径,例如 /en , /zh , /jp 这种作为菜单的slug,而是要用全路径。
 
例如默认中文主页是 https://preview.tangly1024.com/ , 则要切换成英文,则需要创建一个菜单,slug是 https://preview.tangly1024.com/en。 否则会切换异常。
 
自定义数据库表头站点统计相关
Loading...
✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨‍👦‍👦 联系方式
🤝 合作共赢