iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Vue.js

用 Nuxt Content 搭配 Obsidian 建立自己的 Digital Garden系列 第 11

透過 frontmatter 建立屬性,搭配模板更便利

  • 分享至 

  • xImage
  •  

接下來,要來製作文章的頁面,為此我們會需要一些文章的 metadata,比如說是:

  • 文章標題
  • 建立時間
  • 發表時間(用來判斷是否為草稿)
  • 標籤

為了取得這些資料,就需要透過在 Makrdown 檔案最上方使用 frontmatter,以 YAML 的形是建立相關的鍵值對,如下方的 --- 之間的資料:

---
title: "透過 frontmatter 建立屬性"
created_at: 2023-09-26T22:44:46.777+08:00
published_at: 2023-09-26T23:00:00.000+08:00
tags:
  - ironman
  - obsidian
  - nuxt-content
---

接下來,要來製作文章的頁面,為此我們會需要一些文章的 metadata,比如說是:
....
....

但若是每次編寫文章都得去建立這樣的樣式,說實在還是挺麻煩的,尤其是那個建立時間與發表時間。這時候就可以借用 Obsidian 的模板功能(Template)。

可以先到偏好設定(Preference)的核心外掛程式(Core plugins)去啟用模板(Templates)。

再到左側邊欄的模板設定(Templates)去設定模板資料夾位置(Template folder location),這裡是以 _obsidian/templates 為設定值。

接著到 Hotkey(快速鍵)的頁面,透過在篩選功能輸入 template(模板)去尋找 Templates: Insert template (模板: 插入模板),並設定你期望的快捷鍵,像我就是設定 command + shift + escape(但是我的 CapsLock 其實已經綁定為 Escape,所以我在實體按鍵上是按 command + shift + capslock)。

設定好後,就到主畫面新增剛剛填寫的目錄 @content/_obsidian/templates,並新增 Article 填入下方的文字:

這個文字比較特別的是有日期的格式,只要透過 {{date:XXXXXXXX}} 並在 date: 後面填寫 Moment.js format token 即可。

---
title: '...'
created_at: {{date:YYYY-MM-DDTHH:mm:ss.SSSZ}}
published_at: 
tags: []
---

接著新增一個名為 articles 的目錄,並在其中隨意新增一篇文章,比如說 demo,並在文章編寫頁面中按下剛剛設定的快捷鍵,就會跳出一個模板清單的彈跳視窗去選擇要套用的模板。

按下 Enter 套用後,就出現了我們預期的 frontmatter 模板了!

寫好後,想要有個發布的時間戳,讓程式之後可以判斷是否為草稿,那這時候又該怎麼辦呢?

其實只要依樣畫葫蘆,在 @/content/_obsidian/templates 下,新增一個名為 Timestamp 的檔案,輸入下面的文字即可。

{{date:YYYY-MM-DDTHH:mm:ss.SSSZ}}

回到剛剛的文章,將由游標停在 published_at: 後面,並點擊快捷鍵,並選擇 Timestamp。

就會看到成功新增了發佈的時間戳啦!


上一篇
在頁面中指定不同的 Layout
下一篇
建立文章渲染頁面
系列文
用 Nuxt Content 搭配 Obsidian 建立自己的 Digital Garden30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言