Hexo 블 로 그 는 Nginx 를 이용 하여 중 영문 전환 을 실현 합 니 다.

본 고 는 Hexo 블 로 그 를 영어 로 전환 하 는 설정 과정 을 기록 하여 같은 응용 프로그램 공용 모드 를 실현 하고 모든 페이지 가 다른 언어의 대응 페이지 로 전환 할 수 있 으 며 명확 하지 않 은 언어의 방문 주 소 를 브 라 우 저 언어 에 따라 자동 으로 전환 할 수 있 습 니 다.
세칙 을 실현 하 다
중 영문 주소 구분
블 로그 중국어 첫 페이지:https://chanvinxiao.com/cn/blog/
블 로그 영어 홈 페이지:https://chanvinxiao.com/en/blog/
중 영문 전환
예 를 들 어 아래 블 로그 중국어 페이지https://chanvinxiao.com/cn/blog/archives/2020/04/
오른쪽 상단 의 English 를 클릭 하면 아래 주소 로 전환 합 니 다.https://chanvinxiao.com/en/blog/archives/2020/04/
이 페이지 에서 오른쪽 상단 의 중국 어 를 클릭 하면 돌아 옵 니 다.
자동 점프
예 를 들 어 아래 블 로그 주소https://chanvinxiao.com/blog/vuejs-tic-tac-toe/
브 라 우 저 언어 설정 의 첫 번 째 언어 가 영어 일 때 해당 하 는 영어 버 전 으로 이동 합 니 다.https://chanvinxiao.com/en/blog/vuejs-tic-tac-toe/
브 라 우 저 언어 설정 의 첫 번 째 언어 가 중국어 일 때 해당 하 는 중국어 버 전 으로 이동 합 니 다.https://chanvinxiao.com/cn/blog/vuejs-tic-tac-toe/
Hexo 설정
영어 설정 추가
프로젝트 루트 디 렉 터 리 에 추가 _config-en.yml

# Site
title: TITLE
subtitle: SUBTITLE
description: DESCRIPTION
keywords: KEYWORDS
language: en

# URL
url: https://chanvinxiao.com/en/blog
root: /en/blog/

# Directory
source_dir: source-en
public_dir: public-en

#Site 관련 설정 은 주로 중국어 의 내용 을 영어 로 바 꾸 는데 관건 은 language 을 en 로 설정 하 는 것 이다. 그러면 모델 은 영어 의 언어 항목

을 사용 할 것 이다.

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"
  },

영어 에 대응 하 는 구축, 제거 와 서버 의 스 크 립 트 를 추 가 했 습 니 다. 중 영 어 는 상대 적 으로 독립 되 고 서로 영향 을 주지 않 습 니 다

사용자 정의 설정 을 사용 하여 해당 스 크 립 트 의 설정 을 _config.yml 과 _config-en.yml 의 중첩 설정

으로 설정 합 니 다.

시스템 은 중첩 프로필 _multiconfig.yml 을 자동 으로 생 성 합 니 다. 이 파일 을 'gitignore' 에 추가 해 야 합 니 다

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.9

rewrite ^(/blog.*) /en$1 redirect; 는 / blog 로 시작 하 는 주소 앞 에 N 을 추가 하 는 것 과 같 습 니 다. rewrite 의 표 시 는 redirect 302 점프 를 표시 하고 아래 의 기본 cn 점프 도 일치 합 니 다

이상 의 설정 은 /blog 로 시작 하 는 주소 (즉 언어 가 명확 하지 않 은 주소) 를 판단 하여 이동 하 였 으 며, 브 라 우 저 기본 언어 가 영어 일 경우 /en/blog 로 시작 하 는 영어 역 으로 이동 하 였 으 며, 그렇지 않 으 면 기본 으로 /cn/blog 로 시작 하 는 중문 역

으로 이동 하 였 다.

cn / blog 는 cn / blog / index. html 가 아 닌 Public 디 렉 터 리 의 index. html 에 대응 하기 때문에 alias root

대신 사용 해 야 합 니 다.

error_page 404 처 리 를 설 치 했 고 $scheme 는 http 또는 https 로 페이지 전환 이 라 고 표시 하 며 해당 블 로그, 영어 홈 페이지

로 각각 이동 했다.
페이지 대응 전환
모델 스 케 이 프 의 경우 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(`${language.label}`)

페이지 경로 앞 에 있 는 지 여부 /en 에 따라 블 로그 중국어 페이지 인지 영어 페이지 인지 확인

영어 페이지 는 중국어 페이지 에 해당 하 는 링크 메뉴 로, 중국 어 는 영어 링크

로 추 가 됩 니 다.

주소 중 cn 을 en 또는 en 로 직접 cn 대응 페이지 로 변경 하고, 대응 페이지 가 없 으 면 위의 Nginx 설정 에 따라 대응 첫 페이지

로 이동 합 니 다.

이용 jQuery 의 prepend 링크 를 하위 메뉴 에 추가 하고 공용 클래스 main-nav-link 의 스타일

총결산
블 로그 에서 영 어 를 실현 하 는 과정 에서 주로 다음 과 같은 기술 을 사용 했다.

Hexo 의 사용자 정의 설정 과 package. json 의 scripts

Nginx 의 http 모듈 의 첫 번 째 내장 변수 요청

Nginx 의 명령 rewrite, alias 과 error_page

location 의 pathname 와 jQuery 의 prepend

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Hexo 블 로 그 는 Nginx 를 이용 하여 중 영문 전환 을 실현 합 니 다.

좋은 웹페이지 즐겨찾기