厲害了|一秒切換Hexo中英文,厲害了!

Hi ! 我是小小，今天是本周的第二篇，本篇將會著重講解關於如何切換Hexo中英文

Hexo 配置

增加英文配置

首先在根目錄下增加 _config-en.yml其配置項

# Sitetitle: TITLEsubtitle: SUBTITLEdescription: DESCRIPTIONkeywords: KEYWORDSlanguage: en# URLurl: https://chanvinxiao.com/en/blogroot: /en/blog/# Directorysource_dir: source-enpublic_dir: public-en#Site相關的配置，把中文內容改為英文的URL和 root要設置為獨立於中文地址將英文的 source和 public目錄和中文區分開增加相關腳本

在 package.json中增加以下腳本

"scripts": {..."build:en": "hexo generate --config _config.yml,_config-en.yml","clean:en": "hexo clean --config _config.yml,_config-en.yml","server:en": "hexo server --config _config.yml,_config-en.yml"},增加了英文對應的構建、清除和伺服器的腳本，中英文相對獨立，互不影響

Nginx 配置

在 Nginx 對應的 server中增加以下配置

if ( $http_accept_language ~* ^en ) {rewrite ^(/blog.*) /en$1 redirect;}rewrite ^(/blog.*) /cn$1 redirect;location /cn/blog {alias /PATH/TO/BLOG/public;error_page 404 $scheme://$host/cn/blog;}location /en/blog {alias /PATH/TO/BLOG/public-en;error_page 404 $scheme://$host/en/blog;}$http_accept_language為 Nginx的 http模塊為請求首部 Accept-Language設置的 內嵌變量，如果瀏覽器的默認語言為英文，其值將以 en 開頭，例如 en-US,en;q=0.9rewrite ^(/blog.*) /en$1 redirect;相當於把 /blog 開頭的地址前面增加 en，rewrite的標記設置為 redirect表示 302 跳轉，下面默認的 cn 跳轉也是一致3. 以上設置對以 /blog開頭的地址（即未明確語言的地址）進行了判斷跳轉，如果瀏覽器默認語言為英文，則跳轉到以 /en/blog開頭的英文站，否則默認跳轉到以 /cn/blog開頭的中文站4. 因為 /cn/blog 對應的是 public 目錄下的 index.html，而不是 cn/blog/index.html，所以需要使用alias

，而不是root

error_page設置了 404 處理， $scheme為 http或 https，標示為頁面跳轉，分別跳轉到對應博客中、英文首頁

頁面對應切換

以模版 landscape 為例，在 themes/landscape/source/js/script.js中的 })(jQuery);前，增加以下內容

let language = {};language.now = location.pathname.match(/^/en/) ? 'en' : 'cn';if('en' === language.now){language.label = '中文';language.href = location.pathname.replace(/^/en/, '/cn');}else{language.label = 'English';language.href = location.pathname.replace(/^/cn/, '/en');}$('#sub-nav').prepend(`<a href="https://www.tuicool.com/articles/Abi6Nrz/${language.href}">${language.label}</a>`)根據頁面路徑前面是否為 /en，確認是博客中文頁面還是英文頁面英文頁面增加到對應中文頁面的連結菜單，中文則增加英文的連結直接將地址中的 cn改為 en或 en改為 cn則為對應頁面，如果沒有對應頁面，根據以上的 Nginx 配置，將跳轉到對應首頁利用 jQuery的 prepend將連結增加到子菜單中，共用類 main-nav-link的樣式關於作者

我是小小，一枚雙魚座的程序猿，我們下期再見~bye

END