YAML 基本使用筆記

/

本篇要解決的問題

最近想學一些東西,或是之前在看一些教學時,發現都會要寫 YAML 的檔案,像是 Docker、GitHub Actions,與其一邊看一邊猜是什麼,或是需要的時候才快速看一下網路教學,不如好好的看過一次說明文件,然後整理成筆記,方便以後忘記時可以回頭來查找。

本篇主要是看了 Youtube 上的教學影片後,整理覺得以後會常用到的部份。

本篇參考資源:

線上 YAML 轉 JSON:https://onlineyamltools.com/convert-yaml-to-json


YAML 重點觀念

W3Schools :

  • It is case sensitive(區分大小寫)
  • file extension is .yaml(副檔名是 .yaml)
  • Tabs are not allowed(不能用 Tab)
  • Some editors allow spaces(一些編輯器可以用空格)

副檔名除了用 .yaml,也可以用 .yml。

縮排的部份,同層的空格要空幾格都行,但要靠左對齊。


註解

# 符號代表註解。

# 以下是站長名字
name: August

Key-Value Pairs

name: August

轉成 JSON:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

{ "name": "August" }

value 可加單引號、雙引號,也可不加。但如果有寫 \n,就要加上引號。


Objects

person:
  name: August
  website: Let's Write

轉成 JSON:

{
  "person": {
    "name": "August",
    "website": "Let's Write"
  }
}

Array Lists

- 符號代表陣列。

物件值為陣列

# 用 - 分每個值
social:
  - FB
  - IG
  - Twitter
# 也可以直接用 [] 包
social: [FB, IG, Twitter]

轉成 JSON:

{
  "social": [ "FB", "IG", "Twitter"]
}

陣列裡包物件

- name: FB
  uri: https://www.facebook.com/letswrite.tw/
- name: IG
  uri: https://www.instagram.com/letswrite.tw/

轉成 JSON:

[
  { "name": "FB", "uri": "https://www.facebook.com/letswrite.tw/" },
  { "name": "IG", "uri": "https://www.instagram.com/letswrite.tw/" }
]

物件裡包陣列

social:
  - name: FB
    uri: https://www.facebook.com/letswrite.tw/
  - name: IG
    uri: https://www.instagram.com/letswrite.tw/

轉成 JSON:

{
  "social": [
    { "name": "FB", "uri": "https://www.facebook.com/letswrite.tw/" },
    { "name": "IG", "uri": "https://www.instagram.com/letswrite.tw/" }
  ]
}

陣列裡包陣列

例 1

- social:
  - FB: https://www.facebook.com/letswrite.tw/
  - IG: https://www.instagram.com/letswrite.tw/

轉成 JSON:

[
  {
    "social": [
      { "FB": "https://www.facebook.com/letswrite.tw/" },
      { "IG": "https://www.instagram.com/letswrite.tw/" }
    ]
  }
]

例 2

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

pserson:
  - name: August
    website: Let's Write
    social:
      - name: FB
        uri: https://www.facebook.com/letswrite.tw/
      - name: IG
        uri: https://www.instagram.com/letswrite.tw/

轉成 JSON:

{
  "pserson": [
    {
      "name": "August",
      "website": "Let's Write",
      "social": [
        { "name": "FB", "uri": "https://www.facebook.com/letswrite.tw/" },
        { "name": "IG", "uri": "https://www.instagram.com/letswrite.tw/" }
      ]
    }
  ]
}

Multi Line Strings

|> 這二個符號表示後面會接多行文字,差別在於會不會保留折行。

letsWrite1: |
  前端工程師 August
  的學習筆記
  solving problems,
  in simple ways.
letsWrite2: >
  前端工程師 August
  的學習筆記
  solving problems,
  in simple ways.

轉成 JSON:

{
  "letsWrite1": "前端工程師 August\n的學習筆記\nsolving problems,\nin simple ways.\n",
  "letsWrite2": "前端工程師 August 的學習筆記 solving problems, in simple ways.\n"
}

Environment Variables、Placeholder

$ 代表使用 environment 的變數。

{{ }} 代表使用佔位符。

在看 GitHub Actions 的快速入門範例中,有寫到:

The ${{ github.repository }} repository has been cloned to the runner.

August 理解為這二項可以合併著使用,抓 environment 裡的變數當最後會輸出的值。

Summary
YAML 基本使用筆記
Article Name
YAML 基本使用筆記
Description
本篇大綱:本篇要解決的問題。YAML 重點觀念。註解。Key-Value Pairs。Objects。Array Lists。Multi Line Strings、Environment Variables、Placeholder。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

一些有趣的 CSS 選擇器

Front-End

GitLab Pages:3 + 2 個步驟讓 GitLab 專案產生靜態頁

API

Video.js 使用筆記:中文介面、取值、事件、改樣式

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Google Others

用 Google Cloud Platform / GCP 建 Node.js 網站

Google Others

用 reCAPTCHA v2 來做非機器人驗證

Vue

D3.js、Vue 畫一個台灣地圖

API

GitHub API:建立 Issue、Comment – GitHub App

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。