feat(theme): add sidebar icon supported

plugins/plugin-notes-data/src/node/prepareNotesData.ts

@@ -30,6 +30,7 @@ interface NotePage {
   relativePath: string
   title: string
   link: string
+  frontmatter: Record<string, any>
 }
 
 function resolvedNotesData(app: App, options: NotesDataOptions, result: NotesData) {
@@ -52,6 +53,7 @@ function resolvedNotesData(app: App, options: NotesDataOptions, result: NotesDat
       relativePath: page.filePathRelative?.replace(DIR_PATTERN, '') || '',
       title: page.title,
       link: page.path,
+      frontmatter: page.frontmatter,
     }))
   notes.forEach((note) => {
     result[normalizePath(path.join('/', link, note.link))] = initSidebar(
@@ -141,7 +143,7 @@ function initSidebarByAuto(
   const RE_INDEX = ['index.md', 'README.md', 'readme.md']
   const result: NotesSidebarItem[] = []
   for (const page of pages) {
-    const { relativePath, title, link } = page
+    const { relativePath, title, link, frontmatter } = page
     const paths = relativePath
       .slice(note.dir.replace(/^\/|\/$/g, '').length + 1)
       .split('/')
@@ -160,6 +162,9 @@ function initSidebarByAuto(
         current.link = link
         current.text = title
       }
+      if (frontmatter.icon)
+        current.icon = frontmatter.icon
+
       items = current.items as NotesSidebarItem[]
       index++
     }
@@ -177,6 +182,7 @@ function initSidebarByConfig(
       return {
         text: current?.title || text,
         link: current?.link,
+        icon: current?.frontmatter.icon,
         items: [],
       }
     }
@@ -185,6 +191,7 @@ function initSidebarByConfig(
       return {
         text: item.text || item.dir || current?.title,
         collapsed: item.collapsed,
+        icon: item.icon || current?.frontmatter.icon,
         link: item.link,
         items: initSidebarByConfig(
           {

plugins/plugin-notes-data/src/shared/index.ts

@@ -1,28 +1,76 @@
 export interface NotesDataOptions {
+  /**
+   * 保存所有笔记的目录
+   * @default '/notes'
+   */
   dir: string
+  /**
+   * 所有笔记的默认链接前缀
+   * @default '/'
+   */
   link: string
+  /**
+   * global include，只加载需要加载到笔记中的文件
+   */
   include?: string | string[]
+  /**
+   * global exclude，排除不需要加载到笔记中的文件
+   */
   exclude?: string | string[]
+  /**
+   * 笔记配置
+   */
   notes: NotesItemOptions[]
 }
 
 export type NotesItemOptions = (Omit<NotesItem, 'text'> & { text?: string })
 
 export interface NotesItem {
+  /**
+   * 保存笔记的目录
+   */
   dir: string
+  /**
+   * 当前笔记的链接前缀，将会与 `notes.link` 合并
+   */
   link: string
+  /**
+   * 当前笔记名称
+   */
   text: string
+  /**
+   * 当前笔记的侧边栏配置
+   */
   sidebar?: NotesSidebar | 'auto'
 }
 
 export type NotesSidebar = (NotesSidebarItem | string)[]
 
 export interface NotesSidebarItem {
+  /**
+   * 侧边栏文本，如果为空，则使用 `dir`
+   */
   text?: string
+  /**
+   * 侧边栏链接
+   */
   link?: string
+  /**
+   * 次级侧边栏所在目录
+   */
   dir?: string
+  /**
+   * 是否折叠, 未定义时不可折叠
+   * @default undefined
+   */
   collapsed?: boolean
+  /**
+   * 次级侧边栏
+   */
   items?: NotesSidebar
+  /**
+   * 侧边栏图标
+   */
   icon?: string
 }
 

theme/src/client/components/SidebarItem.vue

@@ -69,6 +69,8 @@ function onCaretClick() {
     >
       <div class="indicator" />
 
+      <Icon v-if="item.icon" :name="item.icon" />
+
       <AutoLink
         v-if="item.link"
         :tag="linkTag"
@@ -118,6 +120,7 @@ function onCaretClick() {
 .item {
   position: relative;
   display: flex;
+  align-items: center;
   width: 100%;
 }
 
@@ -207,6 +210,13 @@ function onCaretClick() {
   transition: color var(--t-color);
 }
 
+.item :deep(.vp-iconify) {
+  margin: 0 0.25rem 0 0;
+  font-size: 0.9em;
+  color: var(--vp-c-text-2);
+  transition: color var(--t-color);
+}
+
 .item:hover .caret {
   color: var(--vp-c-text-2);
 }
@@ -215,6 +225,11 @@ function onCaretClick() {
   color: var(--vp-c-text-1);
 }
 
+.sidebar-item:not(.collapsible) > .item:hover :deep(.vp-iconify),
+.sidebar-item:not(.collapsible).has-active > .item > :deep(.vp-iconify) {
+  color: var(--vp-c-brand-1);
+}
+
 .caret-icon {
   width: 18px;
   height: 18px;

theme/src/shared/frontmatter.ts

@@ -109,6 +109,7 @@ export interface PlumeThemePageFrontmatter {
   next?: string | NavItemWithLink
   backToTop?: boolean
   externalLink?: boolean
+  readingTime?: boolean
 }
 
 export interface PlumeThemePostFrontmatter extends PlumeThemePageFrontmatter {