From c9defafe390eddc85be5e8ae5681a337d08e7947 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 12 Apr 2022 14:35:22 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20sidebar=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vuepress/config.ts                      | 26 +++++++++++++++++++
 docs/notes/面试题/CSS/盒模型.md               | 13 ++++++++++
 docs/notes/面试题/README.md                   | 22 ++++++++++++++++
 .../src/client/components/SidebarItems.vue    |  5 ++++
 .../theme/src/node/prepared/sidebarIndex.ts   |  6 ++---
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 docs/notes/面试题/CSS/盒模型.md
 create mode 100644 docs/notes/面试题/README.md

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index e8ec592a..d9d3bb95 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -44,6 +44,28 @@ export default defineUserConfig<PlumeThemeOptions>({
             },
           ],
         },
+        {
+          link: '/interview-question',
+          text: '面试题解析',
+          dir: '面试题',
+          sidebar: [
+            {
+              text: 'HTML',
+              dir: 'HTML',
+              children: [],
+            },
+            {
+              text: 'CSS',
+              dir: 'CSS',
+              children: ['盒模型'],
+            },
+            {
+              text: 'JavaScript',
+              dir: 'JavaScript',
+              children: [],
+            },
+          ],
+        },
       ],
     },
     darkMode: true,
@@ -55,6 +77,10 @@ export default defineUserConfig<PlumeThemeOptions>({
             text: 'typescript',
             link: '/note/typescript/',
           },
+          {
+            text: '面试题',
+            link: '/note/interview-question',
+          },
         ],
       },
     ],
diff --git a/docs/notes/面试题/CSS/盒模型.md b/docs/notes/面试题/CSS/盒模型.md
new file mode 100644
index 00000000..5fb1951b
--- /dev/null
+++ b/docs/notes/面试题/CSS/盒模型.md
@@ -0,0 +1,13 @@
+---
+title: 盒模型
+createTime: 2022/04/12 11:27:38
+author: pengzhanbo
+permalink: /note/interview-question/sfnusib9/
+---
+
+`CSS盒模型` 问题是 面试中比较常见的基础题型。提问的方式，可能包括以下：
+
+- 请简述 CSS 盒模型
+- 什么是 标准模式和 怪异模式 ？
+
+
diff --git a/docs/notes/面试题/README.md b/docs/notes/面试题/README.md
new file mode 100644
index 00000000..6068b41c
--- /dev/null
+++ b/docs/notes/面试题/README.md
@@ -0,0 +1,22 @@
+---
+title: 面试题
+createTime: 2022/04/12 10:16:26
+author: pengzhanbo
+permalink: /note/interview-question/
+---
+
+### 说明
+
+本笔记主要用于整理、记录，从个人角度尝试回答 可能会遇到的、跟其他人讨论过的 面试题目。
+
+但本笔记 所收集的面试题， 主要是在 前端的范畴中，不涉及其他。
+
+如果你准备找工作，想刷刷面试题，可以 以此作为参考，
+但请不要作为标准答案，因为这些仅仅是我个人的理解，
+并不一定百分百正确。
+
+::: tip
+如果这篇笔记对你有帮助，你有遇到不错的面试题，希望可以在本笔记的评论区提交你遇到的面试题与我分享，我不胜感激！
+
+如果你发现本笔记中有哪些错误，欢迎指出，我将虚心受教！
+:::
diff --git a/packages/theme/src/client/components/SidebarItems.vue b/packages/theme/src/client/components/SidebarItems.vue
index 1b9aef4b..7bb5940f 100644
--- a/packages/theme/src/client/components/SidebarItems.vue
+++ b/packages/theme/src/client/components/SidebarItems.vue
@@ -36,6 +36,10 @@ defineProps({
         &:hover {
           color: var(--c-text-accent);
         }
+
+        &.router-link-active {
+          color: var(--c-text-accent);
+        }
       }
       p {
         font-weight: 600;
@@ -45,6 +49,7 @@ defineProps({
     .sidebar-items {
       font-size: 16px;
       padding-left: 1.25rem;
+      font-weight: 300;
     }
   }
 }
diff --git a/packages/theme/src/node/prepared/sidebarIndex.ts b/packages/theme/src/node/prepared/sidebarIndex.ts
index d74d39cb..5deb42e5 100644
--- a/packages/theme/src/node/prepared/sidebarIndex.ts
+++ b/packages/theme/src/node/prepared/sidebarIndex.ts
@@ -114,18 +114,17 @@ function sidebarByConfig(
         children: [],
       } as SidebarItem
     } else {
-      dir = path.join(dir, sidebar.dir || '')
       link = path.join(link || '', sidebar.link || '')
       const current = sidebar.link
         ? findNotePage(sidebar.link, dir, notePageList)
         : undefined
       return {
         text: sidebar.text || sidebar.dir || '',
-        link: current?.link || link,
+        link: current?.link,
         children: sidebarByConfig(
           sidebar.text,
           sidebar.link,
-          dir,
+          path.join(dir, sidebar.dir || ''),
           sidebar.children,
           notePageList
         ),
@@ -150,6 +149,7 @@ function findNotePage(
   } else {
     return notePageList.find((page) => {
       const relative = page.relativePath.join('/')
+      console.log(relative, dir, sidebar)
       return (
         relative === path.join(dir, sidebar) ||
         relative === path.join(dir, sidebar + '.md') ||