[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#12] Obsidian v0.8.4~v0.8.9的新增功能 (0則留言, 2020/09/06)
• [OBS＃32] templater: 無限擴充可能的第三方樣板外掛 (0則留言, 2021/04/10)
• [Obs＃27] Timelines：時間軸外掛 (0則留言, 2021/03/12)
• [Obs＃18] v0.9.16 YAML增強功能: tags與aliases (0則留言, 2020/11/20)
• [Obs＃31] 美化提示方塊的外掛：Admonitions和方便選用的AutoHotkey腳本 (0則留言, 2021/04/05)
• [Obs＃35] Buttons外掛開啟筆記自動化操作契機 (0則留言, 2021/04/23)
• [Obs＃25] 美化筆記的兩個外掛：Emoji Toolbar與Icons與自訂CSS樣式 (0則留言, 2021/01/30)
• Obsidian(黑曜石) 高亮度顯示或變更文字顏色的3種方法 (0則留言, 2020/07/01)
• [Obs＃42] Buttons外掛 0.4.5 新功能 (0則留言, 2021/05/19)
• Obsidian (黑曜石)筆記軟體的基本操作指引 (0則留言, 2020/06/23)
• [OBS＃20] templater: 無限擴充可能的第三方樣板外掛 (1則留言, 2020/11/26)
• [Obs＃22] 讓有效學習更簡單！Markdown匯出到Anki | 使用Flashcards外掛 (0則留言, 2020/12/12)
• 超強筆記軟體Obsidian (黑曜石)介紹與Zettelkasten筆記系統簡述 (0則留言, 2020/06/21)
• Obsidian(黑曜石) 水平捲動面板的設定方法 (11則留言, 2020/06/27)
• [Obs＃33] Media-Extended：嵌入多媒體檔案的簡單方法 (0則留言, 2021/04/17)