nav international

Author: LogCreative

index.html

@@ -14,9 +14,7 @@
     <div id="app">
         <div class="nav" @mouseenter="animbck" @mouseleave="animfwd">
             <div id="extlinks">
-                <a id="title" href="https://logcreative.github.io/LaTeXSparkle/" target="_blank" >
-                    <embed src="res/logo/cnflogo.svg" class="flogo">
-                </a>
+                <div id="title" v-html="$t('nav.flogoadd')"></div>
                 <div id="poweredby" class="accordion">
                     <a class="acckey" @click="changelang" target="_blank" style="cursor: pointer;" :title="$t('nav.lang_title')"><div class="icon" style="display: inline; font-weight: bold;">{{$t('nav.lang_icon')}} </div><div class="value">{{$t('nav.lang')}}</div></a>
                     <!-- darkmode -->
@@ -32,16 +30,16 @@
                 <a href="https://github.com/LogCreative/PGFPlotsEdt" target="_blank">{{ $t('nav.title') }}</a><br>
                 <div style="display: inline-block; color: rgba(128, 128, 128, 0.5);">{{ $t('nav.subtitle') }} <div id="version" style="display: inline-block;"></div></div>
                 <div id="template" class="accordion">
-                    <tplbutton tplname="折线图" :tplid="1"></tplbutton>
-                    <tplbutton tplname="折点图" :tplid="2"></tplbutton>
-                    <tplbutton tplname="散点图" :tplid="3"></tplbutton>
-                    <tplbutton tplname="柱形图" :tplid="4"></tplbutton>
-                    <tplbutton tplname="面积图" :tplid="5"></tplbutton>
-                    <tplbutton tplname="曲面图" :tplid="6"></tplbutton>
-                    <tplbutton tplname="等高图" :tplid="7"></tplbutton>
-                    <tplbutton tplname="直方图" :tplid="8"></tplbutton>
-                    <tplbutton tplname="箱式图" :tplid="9"></tplbutton>
-                    <tplbutton tplname="极坐标" :tplid="10"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl1')" :tplid="1"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl2')" :tplid="2"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl3')" :tplid="3"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl4')" :tplid="4"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl5')" :tplid="5"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl6')" :tplid="6"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl7')" :tplid="7"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl8')" :tplid="8"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl9')" :tplid="9"></tplbutton>
+                    <tplbutton :tplname="$t('nav.tpl10')" :tplid="10"></tplbutton>
                 </div>
             </div>
     </div>

lang/cn.json

@@ -1,10 +1,21 @@
 {
-    "nav":{ 
-        "title": "PGFPlots 统计绘图编辑器",
-        "subtitle": "PGFPlotsEdt",
-        "lang": "简体中文",
-        "lang_icon": "CN",
-        "lang_title": "切换语言",
-        "doc": "宏包文档"
-    }
-}
+  "nav": {
+    "title": "PGFPlots 统计绘图编辑器",
+    "subtitle": "PGFPlotsEdt",
+    "lang": "简体中文",
+    "lang_icon": "CN",
+    "lang_title": "切换语言",
+    "doc": "宏包文档",
+    "flogoadd": "<embed src=\"res/logo/cnflogo.svg\" height=\"35px\">",
+    "tpl1": "折线图",
+    "tpl2": "折点图",
+    "tpl3": "散点图",
+    "tpl4": "柱形图",
+    "tpl5": "面积图",
+    "tpl6": "曲面图",
+    "tpl7": "等高图",
+    "tpl8": "直方图",
+    "tpl9": "箱式图",
+    "tpl10": "极坐标"
+  }
+}

lang/en.json

@@ -5,6 +5,17 @@
     "lang": "English",
     "lang_icon": "EN",
     "lang_title": "Change language",
-    "doc": "Package Documentation"
+    "doc": "Package Documentation",
+    "flogoadd": "<embed src=\"res/logo/enflogo.svg\" height=\"35px\">",
+    "tpl1": "Line",
+    "tpl10": "Polar",
+    "tpl2": "Mark",
+    "tpl3": "Scatter",
+    "tpl4": "Bar",
+    "tpl5": "Area",
+    "tpl6": "Surf",
+    "tpl7": "Contour",
+    "tpl8": "Histogram",
+    "tpl9": "Boxplot"
   }
 }

main.js

@@ -7,6 +7,13 @@ var i18n = new VueI18n({
     }
 });
 
+i18n.cn = fetch('lang/cn.json').then(res=>res.json()).then(data=>{
+    i18n.setLocaleMessage('cn',Object.assign(data));
+});
+i18n.en = fetch('lang/en.json').then(res=>res.json()).then(data=>{
+    i18n.setLocaleMessage('en',Object.assign(data));
+});
+
 // 更新库列表
 var updatePkg = function(){
     var pkgstr = "";
@@ -1219,14 +1226,6 @@ const tp_premable = "\\begin{tikzpicture}\n\\tikzset{\n every pin/.style={fill=y
 var app = new Vue({
     el: '#app',
     i18n,
-    created: function (){
-        i18n.cn = fetch('lang/cn.json').then(res=>res.json()).then(data=>{
-            i18n.setLocaleMessage('cn',Object.assign(data));
-        });
-        i18n.en = fetch('lang/en.json').then(res=>res.json()).then(data=>{
-            i18n.setLocaleMessage('en',Object.assign(data));
-        });
-    },
     data:{
         td: false,
         enableLegend: false,