sideBar.ts 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import { computed } from 'vue'
  2. import { useRoute, useSiteDataByRoute } from 'vitepress'
  3. import { Header } from '/@types/shared'
  4. import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
  5. import { getSideBarConfig } from '../support/sideBar'
  6. import { DefaultTheme } from '../config'
  7. export function useSideBar() {
  8. const route = useRoute()
  9. const site = useSiteDataByRoute()
  10. useActiveSidebarLinks()
  11. return computed(() => {
  12. // at first, we'll check if we can find the sidebar setting in frontmatter.
  13. const headers = route.data.headers
  14. const frontSidebar = route.data.frontmatter.sidebar
  15. const sidebarDepth = route.data.frontmatter.sidebarDepth
  16. // if it's `false`, we'll just return an empty array here.
  17. if (frontSidebar === false) {
  18. return []
  19. }
  20. // if it's `atuo`, render headers of the current page
  21. if (frontSidebar === 'auto') {
  22. return resolveAutoSidebar(headers, sidebarDepth)
  23. }
  24. // now, there's no sidebar setting at frontmatter; let's see the configs
  25. const themeSidebar = getSideBarConfig(
  26. site.value.themeConfig.sidebar,
  27. route.data.relativePath
  28. )
  29. if (themeSidebar === false) {
  30. return []
  31. }
  32. if (themeSidebar === 'auto') {
  33. return resolveAutoSidebar(headers, sidebarDepth)
  34. }
  35. return themeSidebar
  36. })
  37. }
  38. function resolveAutoSidebar(
  39. headers: Header[],
  40. depth: number
  41. ): DefaultTheme.SideBarItem[] {
  42. const ret: DefaultTheme.SideBarItem[] = []
  43. if (headers === undefined) {
  44. return []
  45. }
  46. let lastH2: DefaultTheme.SideBarItem | undefined = undefined
  47. headers.forEach(({ level, title, slug }) => {
  48. if (level - 1 > depth) {
  49. return
  50. }
  51. const item: DefaultTheme.SideBarItem = {
  52. text: title,
  53. link: `#${slug}`
  54. }
  55. if (level === 2) {
  56. lastH2 = item
  57. ret.push(item)
  58. } else if (lastH2) {
  59. ;((lastH2 as any).children || ((lastH2 as any).children = [])).push(item)
  60. }
  61. })
  62. return ret
  63. }