✨ feat: 加入 i18n，支持根据浏览器语言自动切换中英文

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereal",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -19,6 +19,7 @@
     "marked-smartypants": "1.0.2",
     "vue": "2.7.14",
     "vue-easy-lightbox": "0.23.0",
+    "vue-i18n": "8.2.1",
     "vue-router": "3.6.5",
     "vue-template-compiler": "2.7.14",
     "vuex": "3.6.2",

src/components/comment/index.vue

@@ -147,7 +147,7 @@ export default {
 <template>
   <div v-if="showTwikoo || showUtterances" class="comments">
     <div class="comments-header">
-      <h2><SvgIcon name="comment" /> 评论</h2>
+      <h2><SvgIcon name="comment" /> {{ $t('comments') }}</h2>
       <ul v-if="showToggleBtn" ref="commentsNav" class="comments-nav" @click="setCurrentComment">
         <li class="utterances-toggle active">
           Utterances

src/components/nav_bar/index.vue

@@ -4,11 +4,11 @@ export default {
   data() {
     return {
       menus: [
-        { id: 0, title: '首页', path: '/', icon: 'home' },
-        { id: 1, title: '归档', path: '/archives', icon: 'archives' },
-        { id: 2, title: '灵感', path: '/inspiration', icon: 'inspire' },
-        { id: 3, title: '友链', path: '/friend', icon: 'friends' },
-        { id: 4, title: '关于', path: '/about', icon: 'about' },
+        { id: 0, title: this.$t('home'), path: '/', icon: 'home' },
+        { id: 1, title: this.$t('archives'), path: '/archives', icon: 'archives' },
+        { id: 2, title: this.$t('inspiration'), path: '/inspiration', icon: 'inspire' },
+        { id: 3, title: this.$t('friends'), path: '/friend', icon: 'friends' },
+        { id: 4, title: this.$t('about'), path: '/about', icon: 'about' },
       ],
       routerChanged: true,
       theme: 'light',

src/components/search/index.vue

@@ -61,11 +61,11 @@ export default {
           v-model="searchValue"
           type="text"
           class="search-input"
-          placeholder="输入关键词进行搜索"
+          :placeholder="$t('enter_search')"
           @focus="showSearchWrap"
         >
         <button type="submit" class="search-btn">
-          搜索
+          {{ $t('search') }}
         </button>
       </form>
       <div v-if="showModal" class="search-res">

src/locale/index.js

@@ -0,0 +1,17 @@
+import VueI18n from "vue-i18n"
+import Vue from "vue"
+import enUS from "./lang/en-US"
+import zhCN from "./lang/zh-CN"
+import { getLocale } from "@/utils/i18n"
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: getLocale(),
+  messages: {
+    "en-US": enUS,
+    "zh-CN": zhCN
+  }
+})
+
+export default i18n

src/locale/lang/en-US.js

@@ -0,0 +1,29 @@
+export default {
+  home: 'Home',
+  archives: 'Archives',
+  inspiration: 'Inspiration',
+  friends: 'Friends',
+  about: 'About',
+  enter_search: 'Enter keywords to search...',
+  search: 'Search',
+  recent_posts: 'Recent Posts',
+  tags: 'Tags',
+  clear_selection: 'Clear Selection',
+  no_articles: 'There are no articles in this tag.',
+  you_have_written: 'You have already written',
+  keep_writing: 'articles, continue to persist!',
+  tag_articles: 'There are',
+  under_this_label: 'articles under this label.',
+  ideas: 'Ideas',
+  unblied_friends: 'Unblied friends',
+  cannot_visit: 'Friends who can\'t visit',
+  friend_info: 'My friend chain information',
+  my_friends: 'My friends',
+  exchange_link: 'Welcome everyone to exchange friend chain (づ￣ 3￣)づ',
+  this_is_my_friend: 'This is my friend chain information, everyone can follow this format to leave a message.',
+  randomly_sorted: 'The following links will be randomly sorted, and I will periodically update the sorting and filter the list of deceased members.',
+  own_storage_space: 'To ensure the visual experience of the page, the avatar will be saved to COS, if your avatar changed, please contact me to modify it.',
+  please_restore: 'Please restore normal access to the website as soon as possible for the missing friends mentioned above, and notify me.',
+  continue_include: 'If you need this blog to continue including your site, please add this site to your site and contact me.',
+  comments: 'Comments',
+}

src/locale/lang/zh-CN.js

@@ -0,0 +1,29 @@
+export default {
+  home: '首页',
+  archives: '归档',
+  inspiration: '灵感',
+  friends: '友链',
+  about: '关于',
+  enter_search: '输入关键词进行搜索',
+  search: '搜索',
+  recent_posts: '近期文章',
+  tags: '标签',
+  clear_selection: '清除选中',
+  no_articles: '该标签下暂时没有文章~',
+  you_have_written: '你已经写了',
+  keep_writing: '篇文章了，继续坚持哦~',
+  tag_articles: '该标签下有',
+  under_this_label: '篇文章~',
+  ideas: '絮絮叨叨',
+  unblied_friends: '未添加本站的小伙伴们',
+  cannot_visit: '失联的小伙伴们',
+  friend_info: '我的友链信息',
+  my_friends: '小伙伴们',
+  exchange_link: '欢迎各位大佬交换友链 (づ￣ 3￣)づ',
+  this_is_my_friend: '以下是我的友链信息，各位大佬可以在页面下按照这个格式留言',
+  randomly_sorted: '以下友链友链随机排序，博主将不定期更新排序并过滤阵亡名单',
+  own_storage_space: '为了页面视觉体验，头像将保存到博主自己的存储空间，如果有更新请即时联系博主修改',
+  please_restore: '请以上失联的小伙伴尽快恢复网站的正常访问，并且通知博主',
+  continue_include: '如果需要本博客继续收录您的站点，请于您的站点添加本站后联系博主',
+  comments: '评论',
+}

src/main.js

@@ -3,6 +3,7 @@ import AV from 'leancloud-storage'
 import config from './config.js'
 import store from './store'
 import router from './router'
+import i18n from './locale'
 import { handleError, setTheme } from '@/utils'
 import SvgIcon from '@/components/svg_icon/index.vue'
 import Message from '@/components/message/index.js'
@@ -53,5 +54,6 @@ if (clarity !== '') {
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App),
 }).$mount('#app')

src/utils/i18n.js

@@ -0,0 +1,25 @@
+/**
+ * 获取当前语言
+ * @returns {string} en-US | zh-CN
+ */
+export function getLocale() {
+  const checkForZh = (lang) => lang && lang.indexOf('zh') > -1
+
+  const localeFromStorage = localStorage.getItem('locale')
+  if (checkForZh(localeFromStorage)) {
+    document.documentElement.lang = 'zh-CN'
+    return 'zh-CN'
+  } else if (localeFromStorage) {
+    document.documentElement.lang = 'en-US'
+    return 'en-US'
+  }
+
+  if (navigator.language) {
+    const language = checkForZh(navigator.language) ? 'zh-CN' : 'en-US'
+    document.documentElement.lang = language
+    return language
+  }
+
+  document.documentElement.lang = 'en-US'
+  return 'en-US'
+}

src/views/archives/index.vue

@@ -29,7 +29,7 @@ export default {
       return link
     },
     filterText() {
-      return this.filterCount === 0 ? '该标签下暂时没有文章~' : `该标签下有 ${this.filterCount} 篇文章~`
+      return this.filterCount === 0 ? this.$t('no_articles') : `${this.$t('tag_articles')} ${this.filterCount} ${this.$t('under_this_label')}`
     },
   },
   created() {
@@ -123,9 +123,9 @@ export default {
     <div class="archives">
       <div class="tags">
         <div class="tags-header">
-          <h2><SvgIcon name="biaoqian" /> 标签</h2>
+          <h2><SvgIcon name="biaoqian" /> {{ $t('tags') }}</h2>
           <div v-if="isFilter" class="clear-all" @click="clearAll">
-            清除选中
+            {{ $t('clear_selection') }}
           </div>
         </div>
         <div class="tags-body">
@@ -139,7 +139,7 @@ export default {
       <div class="archives-list">
         <div class="archives-header">
           <h2 v-if="!isFilter">
-            <SvgIcon name="danju" /> 你已经写了 {{ totalCount }} 篇文章了，继续坚持哦~
+            <SvgIcon name="danju" /> {{ $t('you_have_written') }} {{ totalCount }} {{ $t('keep_writing') }}
             <a class="edit" :href="editLink" target="_blank">
               <SvgIcon name="shuru" />
             </a>

src/views/friend/index.vue

@@ -31,11 +31,6 @@ export default {
         + '```'
       return string
     },
-    friendLink() {
-      let link = 'https://github.com/'
-      link += `${this.$config.username}/${this.$config.friendsRepo}/issues`
-      return link
-    },
     showLoseContact() {
       return this.loseContact.length > 0
     },
@@ -132,17 +127,17 @@ export default {
   <div class="friend-wrap">
     <div class="friend">
       <section>
-        <h2><SvgIcon name="lianjie" /> 我的友链信息</h2>
+        <h2><SvgIcon name="lianjie" /> {{ $t('friend_info') }}</h2>
         <div class="info-wrap">
-          <p>欢迎各位大佬交换友链 (づ￣ 3￣)づ</p>
-          <p>以下是我的友链信息，各位大佬可以在页面下按照这个格式留言，或者前往 <a :href="friendLink">Friend</a> 自行创建</p>
+          <p>{{ $t('exchange_link') }}</p>
+          <p>{{ $t('this_is_my_friend') }}</p>
           <Markdown :content="friendInfo" :need-parsed="true" />
         </div>
       </section>
       <section>
-        <h2><SvgIcon name="zhinan" /> 小伙伴们</h2>
-        <p>※ 以下友链友链随机排序，博主将不定期更新排序并过滤阵亡名单</p>
-        <p>※ 为了页面视觉体验，头像将保存到博主自己的存储空间，如果有更新请即时联系博主修改</p>
+        <h2><SvgIcon name="zhinan" /> {{ $t('my_friends') }}</h2>
+        <p>※ {{ $t('randomly_sorted') }}</p>
+        <p>※ {{ $t('own_storage_space') }}</p>
         <ul v-loading="loading" class="content">
           <li v-for="friend in filterFriends" :key="friend.number">
             <a :href="friend.url" rel="noopener noreferrer" class="info" target="_blank">
@@ -159,7 +154,7 @@ export default {
       </section>
       <section v-if="showLoseContact">
         <p class="strong">
-          失联的小伙伴们
+          {{ $t('cannot_visit') }}
         </p>
         <ul class="content">
           <li v-for="friend in loseContact" :key="friend.number">
@@ -174,11 +169,11 @@ export default {
             </a>
           </li>
         </ul>
-        <p>请以上失联的小伙伴尽快恢复网站的正常访问，并且通知博主</p>
+        <p>{{ $t('please_restore') }}</p>
       </section>
       <section v-if="showNotAdded">
         <p class="strong">
-          未添加本站的小伙伴们
+          {{ $t('unblied_friends') }}
         </p>
         <ul class="not-added">
           <li v-for="friend in notAdded" :key="friend.number">
@@ -187,7 +182,7 @@ export default {
             </h3>
           </li>
         </ul>
-        <p>如果需要本博客继续收录您的站点，请于您的站点添加本站后联系博主</p>
+        <p>{{ $t('continue_include') }}</p>
       </section>
     </div>
     <Comment />

src/views/home/index.vue

@@ -41,7 +41,7 @@ export default {
     <div class="categories-bar">
       <div class="categories">
         <router-link to="/">
-          近期文章
+          {{ $t('recent_posts') }}
         </router-link>
         <router-link v-for="category in categories" :key="category.id" :to="{ name: 'Category', params: { number: category.number, category } }">
           {{ category.title }}

src/views/inspiration/index.vue

@@ -49,7 +49,7 @@ export default {
 <template>
   <div class="inspiration-wrap">
     <div class="inspiration">
-      <h2><SvgIcon name="tongzhi" /> 絮絮叨叨</h2>
+      <h2><SvgIcon name="tongzhi" /> {{ $t('ideas') }}</h2>
       <div v-loading="loading" class="ideas-wrap">
         <transition name="from-bottom">
           <div v-if="!loading">