按照指令安裝 Caddy 2
安裝完成後，執行 caddy 應該會跑出相關的指令提示
執行 caddy
等同於 caddy run，在背景程式運作
將 Caddyfile 轉成 json config
重新載入 caddy，可使新的設定生效
關閉 caddy
假設你已經安裝 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
更多的安裝資訊可以參考[文件]
$i18n.locale
fallbackLocale
sudo apt update sudo apt install build-essential libssl-dev curl https://raw.githubusercontent.com/creationix/nvm/v0.36.0/install.sh | sh source ~/.profile nvm install v12.19.0
npm install -g @angular/cli
ng new my-app執行需要一點時間，完成後會在目前的目錄中出現一個 my-app/ 的資料夾。
cd my-app ng serve
script:
- bundle exec rake book:build
- mkdir public
- cp progit.html public/index.html
- cp progit.{pdf,epub} public/
- cp -r images/ public/
接著是部屬的部分，目錄 /publc 就是我們要放在網頁上的資料，develop 則是我們目前的分支名稱：
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_API_TOKEN
local_dir: ./public
on:
branch: develop
.travis.yml 完整程式碼請參考[這裡]，或到官網參考更多的設定參數。
<template>
<input
v-model.number="heightModel"
type="number">
<div
ref="myBlock"
class="border border-danger">
Block
</div>
</template>
<script>
export default {
data() {
return {
height: 50,
};
},
computed: {
heightModel: {
get() {
return this.height;
},
set(height) {
this.height = height;
this.changeHeight(height);
},
},
},
mounted() {
if (this.height) {
this.changeHeight(this.height);
}
},
methods: {
changeHeight(height) {
this.$refs.myBlock.style.height = `${height}px`;
},
}
}
</script>
// Register a global custom directive called `v-focus`
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
}
})<template>
<input
v-model.number="height"
type="number">
<div
v-height="height"
class="border border-danger">
Block
</div>
</template>
<script>
export default {
directives: {
height: (el, binding) => {
el.style.height = `${binding.value}px`;
},
},
data() {
return {
height: 50,
};
},
}
</script>See the Pen Vue.js Reference ID VS Custom Directives by chenuin (@chenuin) on CodePen.
mkdir script vim script/cibuildscript/cibuild 內容如下(參考檔案):
#!/usr/bin/env bash set -e # halt script on error JEKYLL_ENV=production bundle exec jekyll build # bundle exec htmlproofer ./_site
language: ruby
rvm:
- 2.6
script: ./script/cibuild
before_script:
- chmod +x ./script/cibuild
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN
repo: chenuin/chenuin.github.io
local_dir: ./_site
target_branch: master
on:
branch: master
TOKEN 設定(參考)
git add . git commit -m 'init commit' git push origin master
git clone https://github.com/[github-account]/jekyll-asciidoc-quickstart
# .travis.yml rvm: - 2.6完整檔案請看: .travis.yml
git add .travis.yml git commit -m 'update rvm version'
git push -u origin master可以到 Travis CI 上確認執行結果，若正確設定的話，將自動把 master 的內容編譯後，自動上傳到分支 gh-pages 。
sudo apt update sudo apt install ruby-full build-essential zlib1g-dev設定用戶的環境變數，應避免用root安裝Ruby Gems。
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc source ~/.bashrc
gem install jekyll bundler
jekyll new myblog在目錄下應該會發現新的資料夾 /myblog，大致的內容可以參考一下。
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│ └── 2020-05-27-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
├── assets
├── feed.xml
├── index.html
└── jekyll
cd myblog bundle exec jekyll serve // or you can ... bundle exec jekyll serve --host=[ip address] --port=[port number]瀏覽器開啟 http://localhost:4000 ，就可以看到預設的首頁，安裝就告一段落，可以開始進行開發。
ext install joaompinto.asciidoctor-vscode(3) 按 [Enter] 送出
sudo apt-get install -y asciidoctor
asciidoctor --version asciidoctor -V
.Sample document ==== Here's a sample AsciiDoc document: [listing] .... = Title of Document Doc Writer :toc: This guide provides... .... The document header is useful, but not required. ====
asciidoctor sample.adoc在同一個目錄下會產生同檔名的HTML檔案 sample.html
// for *.xml asciidoctor -b docbook sample.adoc
git clone https://github.com/darshandsoni/asciidoctor-skins.git
asciidoctor -a stylesheet=./asciidoctor-skins/css/notebook.css sample.adoc // or asciidoctor -a stylesheet=notebook.css -a stylesdir=./asciidoctor-skins/css sample.adoc
// -o, --out-file asciidoctor sample.adoc -o mypage.html
// -D, --destination-dir asciidoctor sample.adoc -D pages輸出檔案會在資料夾 /pages 內。
// -s, --no-header-footer asciidoctor sample.adoc -o mypage.html只會輸出html中 <body> 標籤裡的內容，方便用於嵌入式頁面。
cd /bin git clone https://github.com/asciidoc/asciidoc asciidoc-8.6.9 cd asciidoc-8.6.9 git checkout 8.6.9
ln -s /bin/asciidoc-8.6.9/asciidoc.py /bin/asciidoc ln -s /bin/asciidoc-8.6.9/a2x.py /bin/a2x
autoconf ./configure make sudo make install
apt install asciidoc
sudo apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \ libz-dev libssl-dev
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.26.0.tar.gz tar zxvf git-2.26.0.tar.gz git-2.26.0※如果需要其他 git 版本 [https://mirrors.edge.kernel.org/pub/software/scm/git/]
./configure --prefix=/usr \
--with-gitconfig=/etc/gitconfig \
--with-python=python3 && make安裝sudo make install
git --version git version 2.26.0
git sparse-checkout init開啟設定之後，在目錄會自動新增檔案 sparse-checkout ，預設內容是：
/* !/*/代表根目錄內第一層內所有的檔案都列入追蹤；換句話說，根目錄裡任何資料夾內的檔案(包含資料夾)都會被忽略。
git sparse-checkout list
git sparse-checkout add [folderPath/filePath]
git sparse-checkout set [folderPath/filePath]
git sparse-checkout disable
git clone [URL]有時候你只需要專案部分資料，git clone 無法只下載其中一個資料夾或檔案，但是 sparse checkout 可以達到！當專案非常龐大時，既能節省硬碟容量，也能提升工作效率。
mkdir myproject cd myproject git init
git remote add origin [URL]
git config core.sparseCheckout true
echo "path/to/your/folder/" >> .git/info/sparse-checkout echo "myFile.example" >> .git/info/sparse-checkout方法二
vim .git/info/sparse-checkout
# .git/info/sparse-checkout # Please list your directory and file path here path/to/your/folder/ myFile.example
git pull origin origin master
chmod +x [filePath]
npm install --save-dev jestnpm的安裝教學可以參考「教學」。
// combineArray.js
const combineArray = (array, separator = ',') => {
if (!Array.isArray(array)) {
return new Error('Invalid input array');
}
if (typeof separator !== 'string') {
return new Error('Invalid input separator');
}
return array.join(separator)
};
module.exports = combineArray;
測試的副檔名 *.test.js// combineArray.test.js
const combineArray = require('./combineArray');
test('Combine array: [1, 2]', () => {
expect(combineArray([1,2])).toBe('1,2');
});{
"scripts": {
"test": "jest"
}
}npm run test所有的*.test.js都會跑過一次，並顯示結果，包含有多少測試項目以及成功和失敗的數量。
const combineArray = require('./combineArray');
describe('Combine array', () => {
const inputArray = [1, 2];
test('Default', () => {
expect(combineArray([])).toBe('');
expect(combineArray(inputArray)).toBe('1,2');
expect(combineArray(inputArray, undefined)).toBe('1,2');
});
test('With custom separator', () => {
expect(combineArray(inputArray, ' ')).toBe('1 2');
expect(combineArray(inputArray, '*')).toBe('1*2');
expect(combineArray(inputArray, '-')).toBe('1-2');
});
describe('With invalid input', () => {
test.each(
[undefined, null, 1, 'string', {}]
)('Input array: %s', (item) => {
expect(() => {
combineArray(item);
}).toThrow(new Error('Invalid input array'));
});
test.each(
[null, 1, [], {}]
)('Input separator: %s', (item) => {
expect(() => {
combineArray(inputArray, item);
}).toThrow(new Error('Invalid input separator'));
});
});
});
執行結果
<template>
<div v-text="colorList.join(',')" />
</template>
<script>
export default {
data() {
return {
colorList: ['blue', 'green', 'red'],
};
},
};
</script>
// Recommend
<template>
<div v-text="displayColorList" />
</template>
<script>
export default {
data() {
return {
colorList: ['blue', 'green', 'red'],
};
},
computed: {
displayColorList() {
return this.colorList.join(',');
},
},
};
</script>
預設的情況下computed只有 get() ，必須要有一個return值，會根據相依的值動態計算。computed跟data很像，但如果要直接修改值，必須加上 set() 。<template>
<div>
<input v-model="firstName">
<input v-model="lastName">
<input v-text="fullName" />
</div>
</template>
<script>
export default {
data() {
return {
fullName: '',
};
},
computed: {
firstName: {
get() {
return this.fullName.split(' ')[0] || '';
},
set(firstName) {
this.fullName = `${firstName} ${this.lastName}`;
},
},
lastName: {
get() {
return this.fullName.split(' ')[1] || '';
},
set(lastName) {
this.fullName = `${this.firstName} ${lastName}`;
},
},
},
};
</script>