2020年11月25日 星期三

Ubuntu 安裝 web server Caddy 2


安裝

按照指令安裝 Caddy 2

echo "deb [trusted=yes] https://apt.fury.io/caddy/ /" \ | sudo tee -a /etc/apt/sources.list.d/caddy-fury.list
sudo apt update
sudo apt install caddy

安裝完成後,執行 caddy 應該會跑出相關的指令提示

caddy



常用指令

執行 caddy

caddy run

等同於 caddy run,在背景程式運作

caddy start

將 Caddyfile 轉成 json config

caddy adapt
caddy adapt --config [PATH_TO_FILE]

重新載入 caddy,可使新的設定生效

caddy reload

關閉 caddy

caddy stop


2020年11月2日 星期一

[Vue.js] vue-i18n 實現多語系


快速使用

假設你已經安裝 Vue cli 3.x,你可以直接到專案裡執行:

vue add i18n

接著會詢問你預設的語言、備用語系(fallbackLocale)及字典檔的目錄,所謂的備用語系指的是當使用者選擇語言的字典檔有缺時,會採用哪個語言的資料替代。

若按照預設值執行的話,可以確認一下專案是否出現目錄 /[Your Project]/src/locales/ ,裡面有個 en.json 英文的字典檔。

這個方法相關的設定已經自動完成,可以直接在 template 上使用:

{{ $t('message') }}


安裝及設定

Step 1: 安裝套件

npm install vue-i18n

Step 2: 新建目錄及字典檔

mkdir locales
新增目錄 /[Your Project]/src/locales/ ,加入第一個字典檔 en.json
{
  "hello": "Hello!"
}
接著 index.js
import en from './en';

export const messages = {
    en,
};
你也可以在 locales/ 下繼續新增其他語系

Step 3: 設定

新增 i18n.js 設定 locale 預設語言及 fallbackLocale 備用語言等,messages 是所有語系的字典檔。
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import {messages} from './locales';

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  messages, // set locale messages
});
將設定加入 main.js
import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')
試著在 template 上使用:

{{ $t('hello') }}

上述的檔案完成後,專案的架構如下列所示:

./src/
├── App.vue
├── i18n.js
├── locales
│   ├── en.json
│   └── index.js
└── main.js

更多的安裝資訊可以參考[文件]



進階使用

切換語系
在 root 更改設定值
$i18n.locale

備用語系
可依據各語言設定,可接受傳入字串、陣列、物件等
fallbackLocale