Obs131｜Obsidian使用Dataviewjs動態查詢的嘗試

[!WARNING]+ 建議
建議有程式設計經驗的朋友們試用，本次介紹的是概念性的嘗試，不見得會增進你的筆記流程的完整性。

1. 插入訊息區域

為了顯示更醒目的執行訊息，在筆記開頭處插入HTML標籤。

![gh|400](https://raw.githubusercontent.com/emisjerry/upgit/master/2023/1684643871000ycb31l.png)

![gh|400](https://raw.githubusercontent.com/emisjerry/upgit/master/2023/1684643933000pv6sau.png)

程式裡用 document.getElementById("ID") 取到HTML元素物件。

let MSG = document.getElementById("MSG");

eleDate.onfocus = function() {
  MSG.innerText = "";
}

2. 日期與標籤輸入元素

使用下列程式碼插入日期與標籤的輸入欄位，最後再加上查詢按鈕。

// Date input 
dv.span("Date: ");
let today = dv.date("today");
let eleDate = dv.el("input");
eleDate.value = dv.date("today").toString().substring(0, 10);
eleDate.style.width = "120px";

// Tag input
dv.span("  ");
dv.span("Tag: ");
let eleTag = dv.el("input");
eleTag.style.width = "120px";

// Query button
dv.span("  ");
let eleBtn = dv.el("button", "Query");

3. Dataviewjs查詢

• 取出標籤元素的輸入值，形成井號標籤字串
• 筆記過濾條件：略過 010-Templates與050-Scripts，若有輸入標籤則加入標籤條件(AND)
• 顯示鏈接、標籤字串、建檔日、修改日、檔案大小(加入千位點)

  let data = [];
  try {
    let sTag = "";
    if (eleTag.value != "") {
      sTag = " and #" + eleTag.value;
    }
    data = dv.pages('-"010-Templates" and -"050-Scripts"'+sTag)
      .where(p=> p.file.mday.toString().substring(0,10)==sDate)
      .map(p => [ p.file.link, /*p.tags*/ "#"+p.tags.join(" #"), 
      p.created.substring(0,10), p.modified.substring(0,10), 
      p.file.size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")]);
  } catch (e) {
    MSG.innerText = e.message;
  }
  // ...
  dv.header(2, sDate);
  dv.table(["File("+data.length+")", "Tags", "Created", "Modified", "Size"], 
    data);

4. 腳本原始碼

```dataviewjs
// Date input 
dv.span("Date: ");
let today = dv.date("today");
let eleDate = dv.el("input");
eleDate.value = dv.date("today").toString().substring(0, 10);
eleDate.style.width = "120px";

// Tag input
dv.span("  ");
dv.span("Tag: ");
let eleTag = dv.el("input");
eleTag.style.width = "120px";

// Query button
dv.span("  ");
let eleBtn = dv.el("button", "Query");
let MSG = document.getElementById("MSG");

function msg(sMsg) {
  new Notice(sMsg);
  MSG.innerText = sMsg;
}

eleDate.onfocus = function() {
  MSG.innerText = "";
}

eleBtn.onclick = function() {
  const sDate = eleDate.value;
  if (!dv.date(sDate)) {
    new Notice("Invalid date format!");
    MSG.innerText = "Invalid date format! Please try again.";
    return;
  }
  let data = [];
  try {
    let sTag = "";
    if (eleTag.value != "") {
      sTag = " and #" + eleTag.value;
    }
    data = dv.pages('-"010-Templates" and -"050-Scripts"'+sTag)
      .where(p=> p.file.mday.toString().substring(0,10)==sDate)
      .map(p => [ p.file.link, /*p.tags*/ "#"+p.tags.join(" #"), 
      p.created.substring(0,10), p.modified.substring(0,10), 
      p.file.size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")]);
  } catch (e) {
    MSG.innerText = e.message;
  }
  msg("Matched items: " + data.length);
  let md_table = dv.markdownTable(["File("+data.length+")", "Tags", 
    "Created", "Modified", "Size"], data);
  if (data.length > 0) {
    dv.header(2, sDate);
    //dv.span(table);
    dv.table(["File", "Tags", 
      "Created", "Modified", "Size"], data);
    navigator.clipboard.writeText(md_table);
  }
}

5. 相關鏈接

• Dataviewjs參考: 玩转 Obsidian 08：利用 Dataview 打造自动化 HomePage - 少数派
• Obsidian カテゴリーの記事一覧 - Jazzと読書の日々
• 影片 Obs130｜用Dataviewjs將Dataview表格產生成Markdown格式並複製到剪貼簿的技巧

6. 教學影片

https://youtu.be/JDPMHoZbjow

＃＃

您可能也會有興趣的類似文章

• Obsidian裡產生YouTube影片iframe的作法：使用Dataviewjs (0則留言, 2024/03/28)
• Obs138｜以標籤為基底，用Dataview形成索引筆記的嘗試 (0則留言, 2023/09/03)
• Obs152｜終於能產生書籤與頁碼了！與PDF相關的外掛：Better Export PDF＆PDF++ | 修訂 (0則留言, 2024/02/18)
• Obs135｜解鎖簡易Dataview查詢：驚人的SQL技巧，使用Query All The Things(QATT)外掛 (0則留言, 2023/08/19)
• Obs130｜用Dataviewjs將Dataview表格產生成Markdown格式，並複製到剪貼簿的技巧 (2則留言, 2023/05/20)
• Obs134｜用Dataviewjs製作簡單的建檔統計圖－使用Charts外掛 (0則留言, 2023/08/13)
• Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
• [Obs＃27] Timelines：時間軸外掛 (0則留言, 2021/03/12)
• Obs140｜Obsidian進階全文檢索與複製結果的外掛－Query Control、Better Search View、Float Search、Text Expand、File Cooker (0則留言, 2023/09/15)
• Obs154｜Obsidian交互式表格！超強表格控制：視覺美化、分頁、排序、過濾、搜尋 (0則留言, 2024/03/02)
• Obs153｜快速開啟外掛設定的方法；使用Open Plugin Settings與Advanced URI，透過Templater Hotkeys綁定快捷鍵 (0則留言, 2024/02/28)
• Obs139｜5個方便維護Properties的外掛：Linter、TagMany、File Cooker、Tag Wrangler、Templater Hotkeys (0則留言, 2023/09/10)
• Obs126｜Obsidian 2023/04 7個新外掛介紹與評析 (0則留言, 2023/04/29)
• Obs150｜多重筆記標籤操作－新增與移除：Multi Tag、TagMany、Notepad++、EmEditor、VS Code (0則留言, 2024/02/04)
• Obs136｜3 個方法讓你用Obsidian QATT外掛讀取外部檔案 (0則留言, 2023/08/27)