Obs154｜Obsidian交互式表格！超強表格控制：視覺美化、分頁、排序、過濾、搜尋

大家好，Obsidian在V1.5版的時候 添加了視覺化表格編輯的功能 它讓我們在Obsidian裏面製作表格的時候 有了更加直覺的操作的方法 今天要介紹的外掛叫做Enhanced Tables 它是讓我們能夠在閱讀模式下面 對於表格添加了更多的交互性的控制 比如說它能夠用更直覺的方法來呈現資料的內容 比如說等級上面 就可以用星號來呈現 表格它也做了一個分頁的控制 在這個地方我們就可以針對大量的表格資料 就有一個事先分頁的控制 就不必一直在捲動資料 只要點擊這個頁數就可以直接跳到某一頁 然後同時它也增加了欄位的排序的功能 我們可以指定任何的欄位 讓它用升冪或者是降冪的方法來做排列 同時它也增加了資料過濾的功能 這個過濾的功能是我們可以事先指定好過濾條件的 可以根據欄位的某些值 來做一些過濾的條件的篩選 也可以輸入搜尋的字串 有被列成是可以搜尋的欄位 只要有符合輸入的字串，它就會呈現在表格裏面 Enhanced Tables就是增加了這一些功能 讓我們在操作Obsidian的表格上面的時候 讓我們的便利性更上一層樓 Enhanced Tables是最近才推出的新的外掛 雖然它的功能已經可以使用 但是還是有一些美中不足的地方 但是對於它爲表格帶來的便利性 仍然可以期待它將來有更加成熟的一天 以下的影片就來介紹一下，如何來操作Enhanced Tables 來看一下Enhanced Tables的功能展示 首先只要寫好一段程式碼區塊 它就能夠協助我們強化整個表格的操作 現在在右邊的面板裏面 再開啓同樣的表格的筆記 現在在面板的左邊就是標準的一個表格 在右邊是它透過了Enhanced Tables渲染以後的結果 在右邊的表格裏面 它就會把等級變成了使用星號來表示 右邊的顏色 原來只是輸入一般的純文字 現在會把它加上了顏色來表示 也可以把表格裏面的某個欄位給整個隱藏起來 Formatted跟真假值中間本來有一個欄位 但是因爲我們設定了某個控制以後 它整個欄位就消失了 還有真假值：Y跟N 它會變成是打勾跟打叉的形式來呈現 接着再來看一下它的有關於排序的操作 在整個表格的上方 它會增加出一個控制的區域 在這個地方就可以來排序 目前預設是使用Rating這個欄位來做排序的 也就是這個星號的順序 我們可以把它改成... 比如說我要按照Id來排序 這邊就會按照Id的大小來排序了 目前這一個頁面是出現了3筆 是因爲我們現在限定它一頁最多就是3筆 可以從右下角的這個選單把它變更成其他的數字 比如說我把它改成10 它就出現了是4筆 爲什麼只有4筆？ 但是實際上在左邊這邊其實是有6筆 是因爲這一個過濾把它給過濾掉了 可以在過濾的清單裏面來變更它 比如說我現在要顯示小的數字 它就會出現有2筆 我再把它切換成是高的等級 超過Rating 4的就會顯示出來 我們也可以把過濾給關閉 它纔會出現完整的6筆 這個搜尋就是隻要輸入任何的字串 欄位有設定它是可以搜尋的 它就會被過濾出來 比如說我輸入一個5，數字有5的它就會出現 這一個沒有5也會出現 是因爲它的Rating也被設定成是可以搜尋的 它的Rating是5， 所以它也出現了 這一個就是基本上 Enhanced Tables能夠在閱讀模式下面 達成的交互式的操作的介面 在正式開始使用Enhanced Tables之前 要先增加一個Refresh的功能 因爲現在Obsidian裏面並沒有 對於當前的筆記做Refresh的命令 因爲Enhanced Tables在使用了以後 它有時候會有一些渲染的問題 會希望能夠直接重新載入當前的筆記 因此在正式開始講解這一個外掛之前 先來新增一下這個Refresh的功能 這個功能其實很簡單 還是透過Templater 它的Hotkey來完成這個功能 首先先進入Templater外掛的設定畫面 來確定一下模板檔存放的資料夾 進入Templater的設定畫面以後 它的第一個設定就是這個Template Folder Location 也就是說所有Templater要使用的模板 包括模板的腳本 都是放在右邊指定的這個資料夾裏面 要在這個資料夾裏面 就是這個010-Templates這個資料夾裏面 新增一個叫做Cmd-reload-page.md的檔案 它的內容是隻要輸入這樣子的一個指令 也就是要去執行rebuildView() 就能夠重新載入當前的筆記 有了這個腳本檔以後 我們就來新增Templater的Hotkey 也是一樣在Templater的設定畫面往下捲動 找到Template Hotkeys 在這個地方點擊Add new hotkey 然後接着在Add new hotkey這邊 去搜尋找到新加入的腳本檔 找到以後點擊一下 輸入完畢以後 它就已經加入到了Templater的Hotkeys裏面 除了它加入到這個清單以外 它也會把這個腳本加入命令面板裏面 因此它就變成了是一個命令了 有了這個命令，來指派一個熱鍵給這一個腳本檔 因此這個搜尋條件輸入 reload 現在就可以找到這個腳本檔了 有了這個腳本檔出現以後，你就可以點擊右邊的+號 來賦予它一個新的Hotkey 我在這邊是把它設成是[Ctrl+R] 同時也可以直接找到Reload app without saving 然後也是可以指派一個熱鍵給它 在這邊我設的Hotkey是[Ctrl+Alt+R] 到時候我們需要載入 整個Obsidian的所有內容的時候 就可以直接用這個[Ctrl+Alt+R] 而不必退出Obsidian 或者是從最左上角這一邊的功能表裏面 找到View 再找到這個Force Reload 而是可以直接按下[Ctrl+Alt+R] 就可以了 接着爲了方便我們來執行這個Reload的動作 因此再進入Commander 在Commander的Tab Bar裏面，把它給新加進來 也就是這一個 可以把剛剛的這個Cmd-reload-page.md 把它加到Commander裏面 同時指派一個圖示給它 到時候我們就可以在Tab Bar裏面 這邊就可以找到這個Reload了 只要點擊它，它就會重新載入當前的這個筆記的內容 有了這個以後，到時候在使用Enhanced Tables 如果發現它頁面的Rendering沒有很正常的時候 就可以直接點擊這個Reload 來重新載入帶有表格的筆記 以下我們就先來看一下 Enhanced Tables 它要怎麼來設定 Enhanced Tables的表格是一般的標準的表格 要進入外掛強化的外觀 必須在它的上面提供一個程式碼區塊 這一個程式碼區塊它的程式語言是YAML 但是後面必須再指明 它是使用enhanced-tables的格式 這樣子它纔有辦法來控制下方的表格 我們可以簡單的來看一下它的結構 先看一下整體的表格的結構 除了上面這個程式碼區塊這一行 是一定要使用的以外 它也可以指定不同的資料欄位的格式 比如說它如果是日期格式 它的日期格式是使用什麼樣的格式 這個時候就必須使用 YYYY-MM-DD等等 符合Moment.js的規格的格式都可以來使用 datetime格式也是一樣，只要符合Moment.js的格式就可以 還有yes-format跟no-format 這個就是在指明你欄位在輸入資料的時候 怎麼知道它是"是"，跟怎麼知道它是真假值的"否" 在這邊是設定成是Y跟N 你也可以把它改成是Yes或者是No 或者是中文的真或者是假都可以 還有這個表格是不是可以編輯 如果是可以編輯的話，就把editable改成true就可以了 接着下面就是所有欄位的表格的定義 我等下在後面會整個來完整的說明 接着表格還有一個filter 就是可以設定預設的過濾條件 這個filter是預設的過濾條件 可以使用>=這些邏輯符號來表示 filters就是設定不同的過濾的條件 它會變成是一個選單 到時候在操作的時候可以讓我們來選擇 sort是預設的排序的欄位 在這邊只要輸入用來做排序的欄位就可以了 要descending的話就是在欄名的左邊加一個減號 它就會變成是降冪的一個排列 pagination就是設定分頁的做法 如果在page-size這邊 就可以指定預設的每一頁的筆數 像範例裏面 這個地方就是設定成是3 所以它就會一頁就是3筆 page-sizes就是筆數切換的選單 接着如果你有一些樣式 需要自己來做控制的話 要指定一些CSS的內容 就可以在style這一邊來做 它後面是有一個 | 的符號 表示下面是多行的內容 所以你可以一次性的新增多個不同的CSS的類別 hide-control，true跟false是說 你要不要把控制的那個區域給隱藏起來 也就是排序過濾的那個控制區域 預設當然就是false 這樣子我們在閱讀模式纔可以去做控制 hide-configuration意思是 在它呈現的時候 這一個程式碼區塊的內容 是不是也要顯示出來 以上就是有關於表格整體內容的結構 接着再來看一下，裏面的這個欄位的結構 欄位的結構也一樣 就是隻要指定自己需要的欄名 這一個欄名就是你寫在表格第一行的標題的名稱 這兩個要對應起來 你的表格纔有辦法正確的顯示這一個欄位 因爲這個欄名有可能比較長，或者是中文 因此在指定filter這一些邏輯比較條件的時候 比較不方便去使用 這個時候就可以指定另外一個代名給它 如果這個欄位裏面有指定了alias 你那一些邏輯判斷 就要使用這個代名 接着是這個欄位的型別 它的型別有字串、數字、日期、日期時間、時間跟列舉式 還有真假值 這幾個都可以分別來使用 如果你是字串型式的 type這個欄位就可以不用指定 hidden是說這個欄位需不需要隱藏 如果是true的話，它就會從渲染後的表格消失 nowrap是說這一行裏面的內容需不需要自動做折行的處理 還有editable這個欄位是不是可以做編輯 它可以覆寫掉表格結構裏面的editable設定 也就是說 雖然我的表格設定成不能編輯 但是某一個欄位要編輯的話 就可以把這個欄位的editable改成true searchable是這個欄位可不可以做搜尋 後面就是不同的format，它的一個額外指定的方法 數值的話可以指定一個number-format給它 在這一邊就是指定了使用的style是貨幣的格式 然後貨幣是使用新臺幣，它的小數位數是0 也就是表示顯示出來的數字不會是有小數點的數字 date-format就可以根據你自己的需要 把它變更成是要呈現的樣子 表格上面設定的表格輸入的欄位是YYYY-MM-DD 但是顯示的時候，它會使用date-format來顯示 所以我就會顯示出它的年月日 yes-format也是一樣，輸入的時候是用Y跟N 但是呈現的時候，會使用Unicode的這個打勾跟叉叉的這個符號 另外這些format如果你都不想使用的話 你可以使用formatter 這個formatter 它是一個格式化的字串 它是JavaScript的運算式 通常我們會把它使用成是JavaScript裏面的樣板字面值 也就是Template literal strings 然後searchable也是可以覆寫整個表格的searchable的設定 這些就是欄位的基本的結構 在filter或是formatter裏面 當我們需要存取到欄位的內容的話 可以使用下面這兩個變數 $row就會取出當前的這一筆 $cell就會取出當前的這一個儲存格 如果要取出某一個欄位的內容的話 就可以用$row.欄名 這樣子的方法就可以把它取出來了 這個是比較常用的運算式 接着我們就來看一下實際的範例 首先這個程式碼區塊就是必須使用```yaml enhanced-tables 開頭 然後接着指定了它的日期的格式 這邊指定的會是你的輸入的格式 所以在表格裏面就要用YYYY-MM-DD的方法來輸入日期 是跟否是使用Y跟N這兩個大寫的字母來輸入 第一個欄位它的欄名叫做Amount 然後我們也給它一個alias是小寫的amount 它的型別是數值 所以在下面指定了它的number-format 是一個貨幣的格式 然後它是可以被搜尋的 所以就設定了一個searchable: true 接着我們來看第二個欄位 第二個欄位是單價 UnitPrice， 它的alias就是price 然後它的type是number 然後接着是數量，Quantity 它的alias是qty，type是number 接着我們就來做一個小計了 這個小計就是單價乘上數量得出來的結果 我們給它一個alias是小寫的subtotal，type是number 然後它的number-format 在這邊雖然指定了它是貨幣 但是因爲又額外指定了formatter 因此這個number-format是沒有辦法生效的 希望外掛的作者可以考慮 是不是這兩個設定可以讓它同時成立 這個formatter就是額外的格式化的字串 首先先用literal的方法 找出目前這一列的單價跟數量 然後把這兩個數字給乘在一起 它就會變成是字串的"單價 * 數量" 然後我們後面再用JavaScript的eval()對它來做解析 把它轉換成實際的後面的這個運算 它就會變成是實際小計的一個數字 比如說500 * 10， 它就會變成是500 這個就是我測試使用formatter來做計算欄位的做法 後面是date欄位 這個date欄位， 就只要指定它的type是date 然後它的date-format是 "YYYY年MM月DD日" 它就會使用這個格式來呈現 所以大家就可以很明確的知道了 在表格最上面指定的date-format是輸入的欄位 在欄位裏面指定的date-format是顯示的欄位 後面這邊我示範了一個欄位叫做Color 透過formatter對它來做顏色的處理 在這邊一樣是使用JavaScript的literal string 在這個裏面就設定了一個HTML的span標籤 指定了一個style，color: 就是我輸入的內容 這一個儲存格的內容，就是用$cell給取出來 另外因爲我放在literal裏面 要取出literal裏面變數的值就是使用${ }的方法 所以這個是literal取變數的寫法 呈現出來的字串當然就是這個literal的內容 這樣子就可以在欄位裏面呈現出 我輸入的字串它對應的顏色了 接着這個Formatted它就是使用了$row.Id 取出了Id這個欄位的內容 然後再取出它後面的這個儲存格的值 所以這個formatter就可以顯示出一個 Id 然後括號，後面就是12345的內容 這邊也指定了nowrap，表示它不做折行處理 這一個Color也是不做折行處理 後面這個Hidden就是這個欄位不顯示出來 雖然我在輸入的時候有這個欄位 可是在呈現出來的時候不會有這個欄位 接着就是Rating這個欄位的呈現 它的type是enum，表示它是個enumeration的格式 也就是列舉式的格式 在下面就要特別再去寫一個enum: 來指定：如果我的值是1的話，要用什麼方法來呈現 如果輸入的內容是1，它就用一個星號來呈現 如果是2就用兩個星號來呈現，以此類推 這個就是enum的操作，就可以用這樣的方法來做控制 真假值type是用bool yes-format是用打勾的符號 no-format是打叉的符號 後面我們來看一下filter的寫法 預設的過濾條件就是寫在這個地方 每一列的amount如果大於1200的話 它預設就會被呈現出來 所以一開始會呈現出來的3筆 就是因爲它符合了這一個條件 也可以另外預設多個條件 到時候可以透過選單來選用 第一個Small numbers 它就是$row.amount這個欄位的值 小於1200的會被列成是Small numbers 還有High rating 是$row.Rating 也就是Rating這一個內容 再用Number()把它轉換成數值以後 如果大於3的話，它就會被過濾出來 這個就是過濾的預先設定好的條件 基本上必須是JavaScript的運算式 就可以寫在這一個條件裏面 後面這個sort就表示是 預設要排序的欄位 我們是使用Rating這個欄位 後面這個pagination 就是來設定分頁的控制 預設的每一頁的筆數是3筆 然後筆數的選單是有3跟10這兩個選項 你這個當然可以根據自己的需要來設很多個 後面這個style就是來設定對錶格額外的CSS的控制 在這邊我們就變更了 th 它的背景顏色 還有它預設的顯示的文字的顏色 都可以透過style來做額外的控制 接着後面這兩個就是來控制我的控制區域要不要顯示 還有這一個程式碼區塊要不要顯示 後面接着就是實際上這一個表格的內容 以上就是今天爲大家介紹 這一個表格到時候在呈現上，就可以用這個美觀的方法 而且有很多的控制的條件可以來做控制 對於表格的操作可以達到一個比較強的互動性 如果各位覺得我今天介紹的這個外掛 對於你在使用Markdown的表格有更好的控制的話 請各位記得訂閱、按贊、分享 也可以考慮透過【超級感謝】來資助我拍好以後的影片 今天就介紹到這邊 謝謝各位！