[Obs＃91] 用Dashboard++ CSS片段建立Obsidian儲存庫首頁

使用Dashbvoard++ CSS片段快速建立美觀、豐富資訊的儲存庫首頁（Homepage）。

(使用Bubble Space主題)

除了CSS片段，還使用到了下列外掛：

外掛名稱	功能	安裝方式
Homepage	指定特定筆記為首頁，進入Obsidian時自動開啟	第三方外掛
Banners	筆記頂端顯示圖片	第三方外掛
Buttons	以按鈕形式提供各種功能	第三方外掛
Dataview	標籤統計	第三方外掛
Tasks	待辦事項清單	第三方外掛

1. 安裝步驟

到Dashboard.css點擊Copy raw contents將內容複製到剪貼簿，再將剪貼簿內容存入儲存庫資料夾/.obsidian/snippets/
設定→外觀，找到CSS片段後重新整理，啟用dashboard.css

2. 使用方法

---
cssclass: dashboard
---

以無序列表的格式即可形成水平式的兩階層選單，用較少的空間顯示更多的資訊。

3. 美化頁面

使用Banners外掛加上封面。可以用下列方式動態取得隨機圖片：

---
banner: "![[https://source.unsplash.com/1600x900?sky]]"
---

2. 用button美化功能鏈接

3. 用Admonitions或Callouts包住列表

4. 用Dataview或Tasks做資訊的動態查詢

5. 相關鏈接

6. 教學影片

4. 範例

---
number headings: first-level 1, max 6, contents ^toc, _.1.1.
banner: "![[https://source.unsplash.com/1600x900?sky/]]"
banner_x: 0.29896
banner_y: 1
cssclass: dashboard
disabled rules: [ all ]
---
<div class="title" style="color:lightBlue">HOME</div>

```ad-ref
title: # 📅 每日待辦事項
collapse: open
- ⛅ 一日之計在於晨
	- [ ] 檢查Email
	- [ ] 檢查即時通訊 (QQ)
	- [ ] 檢查即時通訊 (Discord)
	- [ ] 檢查公告
	- [ ] 檢查待辦事項
- 🌄 今日事今日畢
	- [ ] 返家前檢查Email
	- [ ] 返家前更新待辦事項狀態 
	- [ ] 檢查明天待辦事項 
- 📖 每日閱讀
	- [ ] Obsidian論壇
	- [ ] YouTube
	- [ ] ITHome
	- [ ] 開源中國
- 🥛 臨時備忘
	- [ ] 檢查聯絡簿
	- [ ] 買牛奶
```
## 💎 Obsidian相關
- 🔖 Obsidian參考網頁
	- [Dataview](https://blacksmithgu.github.io/obsidian-dataview/)
	- [Admonition](https://github.com/valentine195/obsidian-admonition)
	- [Advanced URI](https://vinzent03.github.io/obsidian-advanced-uri/)
- ⚙️ Obsidian快速設定
	- [Apperance](obsidian://advanced-uri?settingid=appearance)
	- [Hotkeys](obsidian://advanced-uri?settingid=hotkeys)
	- [Plugins](obsidian://advanced-uri?settingid=community_plugins)
	- [QuickAdd](obsidian://advanced-uri?settingid=quickadd)
	- [Style Settings](obsidian://advanced-uri?settingid=obsidian-style-settings)
- ⚙️ Obsidian快速設定
> [!REF]+ 　
> `button-settings-appearance`  `button-settings-hotkeys` `button-settings-plugins` `button-settings-quickadd` `button-settings-style-settings`
- 📝 Obsidian常用筆記 
	- [[Obsidian Notes]]
	- [[Obsidian Plugins Notes]]
	- [[Obsidian CSS Notes]] 
	- [[Obsidian FAQ]]
	- [[Obsidian Dataview Notes]]
##  📃常用網頁
> [!REF]+ 瀏覽器開啟
> `button-browser-google-translate` `button-browser-google-sheet` `button-browser-cdict` `button-browser-cns11643` `button-browser-terms` `button-browser-random` `button-browser-emoji` `button-browser-table-converter` `button-browser-table-to-markdown` `button-browser-fontawesome`
```ad-info
title: ### ✍️ 查詢
collapse: open
`button-daily-new` `button-daily-changed` `button-weekly-changed` `button-monthly-changed`   `button-3months-changed`
```

  ## ✅ 任務清單
  - 🗓️本日待辦
```tasks
path does not include 000-Index
path does not include 010-Templates
tags do not include #todo_long 
not done
due before next week
```

## 📊儲存庫資訊
- 🗄️ Recent file updates
 `$=dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").limit(10).file.link)`
- 🔖 Tagged:  obsidian
`$=dv.list(dv.pages('#obsidian').sort(f=>f.file.mtime,"desc").limit(10).file.link)`
- 🔖 Tagged:  autohotkey
`$=dv.list(dv.pages('#autohotkey').sort(f=>f.file.mtime,"desc").limit(10).file.link)`
- 📈 Stats
	-  File Count: `$=dv.pages().length`
	-  Obsidian: `$=dv.pages('#obsidian').length`
	-  AutoHotkey: `$=dv.pages('#autohotkey').length`
	-  Tool: `$=dv.pages('#tool').length`