SideBar.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { useRoute, useSiteDataByRoute } from 'vitepress';
  2. import { computed } from 'vue';
  3. import { getPathDirName } from '../utils';
  4. import { useActiveSidebarLinks } from '../composables/activeSidebarLink';
  5. import NavBarLinks from './NavBarLinks.vue';
  6. import { SideBarItem } from './SideBarItem';
  7. export default {
  8. components: {
  9. NavBarLinks,
  10. SideBarItem
  11. },
  12. setup() {
  13. const route = useRoute();
  14. const siteData = useSiteDataByRoute();
  15. useActiveSidebarLinks();
  16. return {
  17. items: computed(() => {
  18. const { headers, frontmatter: { sidebar, sidebarDepth = 2 } } = route.data;
  19. if (sidebar === 'auto') {
  20. // auto, render headers of current page
  21. return resolveAutoSidebar(headers, sidebarDepth);
  22. }
  23. else if (Array.isArray(sidebar)) {
  24. // in-page array config
  25. return resolveArraySidebar(sidebar, sidebarDepth);
  26. }
  27. else if (sidebar === false) {
  28. return [];
  29. }
  30. else {
  31. // no explicit page sidebar config
  32. // check global theme config
  33. const { sidebar: themeSidebar } = siteData.value.themeConfig;
  34. if (themeSidebar === 'auto') {
  35. return resolveAutoSidebar(headers, sidebarDepth);
  36. }
  37. else if (Array.isArray(themeSidebar)) {
  38. return resolveArraySidebar(themeSidebar, sidebarDepth);
  39. }
  40. else if (themeSidebar === false) {
  41. return [];
  42. }
  43. else if (typeof themeSidebar === 'object') {
  44. return resolveMultiSidebar(themeSidebar, route.path, headers, sidebarDepth);
  45. }
  46. }
  47. })
  48. };
  49. }
  50. };
  51. function resolveAutoSidebar(headers, depth) {
  52. const ret = [];
  53. if (headers === undefined) {
  54. return [];
  55. }
  56. let lastH2 = undefined;
  57. headers.forEach(({ level, title, slug }) => {
  58. if (level - 1 > depth) {
  59. return;
  60. }
  61. const item = {
  62. text: title,
  63. link: `#${slug}`
  64. };
  65. if (level === 2) {
  66. lastH2 = item;
  67. ret.push(item);
  68. }
  69. else if (lastH2) {
  70. ;
  71. (lastH2.children || (lastH2.children = [])).push(item);
  72. }
  73. });
  74. return ret;
  75. }
  76. function resolveArraySidebar(config, depth) {
  77. return config;
  78. }
  79. function resolveMultiSidebar(config, path, headers, depth) {
  80. const paths = [path, Object.keys(config)[0]];
  81. const item = paths.map((x) => config[getPathDirName(x)]).find(Boolean);
  82. if (Array.isArray(item)) {
  83. return resolveArraySidebar(item, depth);
  84. }
  85. if (item === 'auto') {
  86. return resolveAutoSidebar(headers, depth);
  87. }
  88. return [];
  89. }