[Obs＃43] 美化內部連結外觀：使用Supercharged Links外掛，並增加連結的功能選項

功能

1. 內部連結增加樣式設定
2. 內部連結增加直接修改YAML區欄位的右鍵功能表選項

設定

• 在Supercharged Links的外掛選項裡將要樣式化的YAML欄名加入【Target Attributes for styling】
• 下列範例是針對 tags 欄位顯示樣式

範例

啟用Superchared Links外掛後，Obsidian的內部連結就能透過預先設定好的CSS樣式以呈現不同的更顯著外觀，例如為連結加上圖示或底色等，同時也添加了連結的右鍵功能表選項，讓我們直接編輯YAML區裡的欄位：

CSS樣式範例

• 外掛會將YAML裡的欄位組成超連結的 data-link-欄名 屬性
• content可使用表情符號或url(圖片)，圖片可以是網址或資料

/* supercharged links */
a.internal-link[data-link-tags*="autohotkey"]::before{
  content: "⌨ ";
}

a.internal-link[data-link-tags*="autohotkey"] {
  color: green;
  background-color: yellowgreen;
  border-radius: 5px;
}

/* svg encode: https://yoksel.github.io/url-encoder/ */
a.internal-link[data-link-tags*="obsidian"]::before{
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='30' height='30'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='82.85' y1='30.41' x2='51.26' y2='105.9' gradientTransform='matrix(1, 0, 0, -1, -22.41, 110.97)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%236c56cc'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%239785e5'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='44.61 0 12.91 17.52 0 45.45 19.57 90.47 47.35 100 52.44 89.8 63 26.39 44.61 0' fill='%2334208c'%3E%3C/polygon%3E%3Cpolygon points='63 26.39 43.44 14.41 16.43 35.7 47.35 100 52.44 89.8 63 26.39' fill='url(%23a)'%3E%3C/polygon%3E%3Cpolygon points='63 26.39 63 26.39 44.61 0 43.44 14.41 63 26.39' fill='%23af9ff4'%3E%3C/polygon%3E%3Cpolygon points='43.44 14.41 44.61 0 12.91 17.52 16.43 35.7 43.44 14.41' fill='%234a37a0'%3E%3C/polygon%3E%3Cpolygon points='16.43 35.7 19.57 90.47 47.35 100 16.43 35.7' fill='%234a37a0'%3E%3C/polygon%3E%3C/svg%3E");
  con-tent: url('https://lh3.googleusercontent.com/pw/ACtC-3eDgxdjBh3bs2bCHZtwqeW2zIJQ1n7z9b1mTbMNy7DHauxrPbhe2uE3dV8-Er8BcwDwLnO5OoRA0Eym2zxdAdg6lypvcpa3smbJsRvgMo2UOhTSSQbiS0_n8H9nVJfzWm8BlV9HOWN8kOyJdbZJ3Ab-tQ=s30-no?authuser=0');
}

a.internal-link[data-link-tags*="notes" i]::before{
  content: "📝 ";
}

相關連結

• mdelobelle/obsidian_supercharged_links: obsidian plugin to add attributes and context menu options to internal links
• CSS屬性選擇器參考

教學影片

＃＃

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

• [Obs＃92] Obsidian彙編文章的簡單方法：2個外掛＋1個CSS片段 (0則留言, 2022/07/16)
• [Obs#12] Obsidian v0.8.4~v0.8.9的新增功能 (0則留言, 2020/09/06)
• Obsidian 1.0新手教學—打造個人知識管理利器，專屬的第二大腦 (2022年) (4則留言, 2022/10/22)
• Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
• [Obs＃66] 自動維護Markdown相容性的外掛：Consistent Attachments and Links (0則留言, 2022/01/21)
• Obs126｜Obsidian 2023/04 7個新外掛介紹與評析 (0則留言, 2023/04/29)
• Obs139｜5個方便維護Properties的外掛：Linter、TagMany、File Cooker、Tag Wrangler、Templater Hotkeys (0則留言, 2023/09/10)
• [OBS＃32] templater: 無限擴充可能的第三方樣板外掛 (0則留言, 2021/04/10)
• Obs135｜解鎖簡易Dataview查詢：驚人的SQL技巧，使用Query All The Things(QATT)外掛 (0則留言, 2023/08/19)
• [Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便 (0則留言, 2022/09/10)
• [Obs＃57] YAML區tags標籤自動補全的3種方法 (2則留言, 2021/10/23)
• [Obs＃25] 美化筆記的兩個外掛：Emoji Toolbar與Icons與自訂CSS樣式 (0則留言, 2021/01/30)
• Obs130｜用Dataviewjs將Dataview表格產生成Markdown格式，並複製到剪貼簿的技巧 (2則留言, 2023/05/20)
• [Obs＃35] Buttons外掛開啟筆記自動化操作契機⁉️ (0則留言, 2021/04/23)
• [Obs＃45] 軟體工程師必備的6個Obsidian外掛 (0則留言, 2021/08/13)