言語切り替え

locales/ja-JP.yml

@@ -1,20 +1,4 @@
-_ago:
+_lang_: "日本語"
-  unknown: "謎"
-  future: "未来"
-  justNow: "たった今"
-  secondsAgo: "{n}秒前"
-  minutesAgo: "{n}分前"
-  hoursAgo: "{n}時間前"
-  daysAgo: "{n}日前"
-  weeksAgo: "{n}週間前"
-  monthsAgo: "{n}ヶ月前"
-  yearsAgo: "{n}年前"
-
-_time:
-  second: "秒"
-  minute: "分"
-  hour: "時間"
-  day: "日"
 
 introMisskey: "ようこそ！Misskeyは、オープンソースの分散型マイクロブログサービスです。\n「ノート」を作成して、いま起こっていることを共有したり、あなたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加することもできます👍\n新しい世界を探検しよう🚀"
 monthAndDay: "{month}月 {day}日"
@@ -400,6 +384,25 @@ passwordNotMatched: "一致していません"
 signinWith: "{x}でログイン"
 tapSecurityKey: "セキュリティーキーにタッチ"
 or: "もしくは"
+uiLanguage: "UIの表示言語"
+
+_ago:
+  unknown: "謎"
+  future: "未来"
+  justNow: "たった今"
+  secondsAgo: "{n}秒前"
+  minutesAgo: "{n}分前"
+  hoursAgo: "{n}時間前"
+  daysAgo: "{n}日前"
+  weeksAgo: "{n}週間前"
+  monthsAgo: "{n}ヶ月前"
+  yearsAgo: "{n}年前"
+
+_time:
+  second: "秒"
+  minute: "分"
+  hour: "時間"
+  day: "日"
 
 _tutorial:
   title: "Misskeyの使い方"

src/client/init.ts

@@ -61,8 +61,9 @@ if (localStorage.getItem('theme') == null) {
 }
 
 //#region Detect the user language
-let lang = null;
+let lang = localStorage.getItem('lang');
 
+if (lang == null) {
 	if (langs.map(x => x[0]).includes(navigator.language)) {
 		lang = navigator.language;
 	} else {
@@ -75,6 +76,7 @@ if (langs.map(x => x[0]).includes(navigator.language)) {
 	}
 
 	localStorage.setItem('lang', lang);
+}
 //#endregion
 
 // Detect the user agent

src/client/pages/settings/general.vue

@@ -27,6 +27,13 @@
 			{{ $t('reduceUiAnimation') }}
 		</mk-switch>
 	</div>
+	<div class="_content">
+		<mk-select v-model="lang">
+			<template #label>{{ $t('uiLanguage') }}</template>
+
+			<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+		</mk-select>
+	</div>
 </section>
 </template>
 
@@ -36,8 +43,9 @@ import { faImage, faCog } from '@fortawesome/free-solid-svg-icons';
 import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
+import MkSelect from '../../components/ui/select.vue';
 import i18n from '../../i18n';
-import { apiUrl } from '../../config';
+import { apiUrl, langs } from '../../config';
 
 export default Vue.extend({
 	i18n,
@@ -46,10 +54,13 @@ export default Vue.extend({
 		MkInput,
 		MkButton,
 		MkSwitch,
+		MkSelect,
 	},
 	
 	data() {
 		return {
+			langs,
+			lang: localStorage.getItem('lang'),
 			wallpaperUploading: false,
 			faImage, faCog
 		}
@@ -72,6 +83,14 @@ export default Vue.extend({
 		},
 	},
 
+	watch: {
+		lang() {
+			localStorage.setItem('lang', this.lang);
+			localStorage.removeItem('locale');
+			location.reload();
+		}
+	},
+
 	methods: {
 		onWallpaperChange([file]) {
 			this.wallpaperUploading = true;

webpack.config.ts

@@ -124,7 +124,7 @@ module.exports = {
 		}),
 		new webpack.DefinePlugin({
 			_VERSION_: JSON.stringify(meta.version),
-			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]: [string, any]) => [k, v && v.meta && v.meta.lang])),
+			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]: [string, any]) => [k, v._lang_])),
 			_ENV_: JSON.stringify(process.env.NODE_ENV)
 		}),
 		new VueLoaderPlugin(),