feat: 🚀 对 vitepress 修改的样式改为按需引入

Author: Kele-Bingtang

demo/docs-base/.vitepress/theme/index.ts

@@ -1,5 +1,12 @@
 import Teeker from "vitepress-theme-teeker";
 // import "vitepress-theme-teeker/index.css";
+import "vitepress-theme-teeker/vp-plus/code-block.scss";
+import "vitepress-theme-teeker/vp-plus/sidebar.scss";
+import "vitepress-theme-teeker/vp-plus/nav.scss";
+import "vitepress-theme-teeker/vp-plus/aside.scss";
+// import "vitepress-theme-teeker/vp-plus/container.scss";
+// import "vitepress-theme-teeker/vp-plus/blockquote.scss";
+// import "vitepress-theme-teeker/vp-plus/rainbow.scss";
 
 export default {
   extends: Teeker,

demo/docs-locales-root/.vitepress/theme/index.ts

@@ -1,5 +1,12 @@
 import Teeker from "vitepress-theme-teeker";
 // import "vitepress-theme-teeker/index.css";
+import "vitepress-theme-teeker/vp-plus/code-block.scss";
+import "vitepress-theme-teeker/vp-plus/sidebar.scss";
+import "vitepress-theme-teeker/vp-plus/nav.scss";
+import "vitepress-theme-teeker/vp-plus/aside.scss";
+// import "vitepress-theme-teeker/vp-plus/container.scss";
+// import "vitepress-theme-teeker/vp-plus/blockquote.scss";
+// import "vitepress-theme-teeker/vp-plus/rainbow.scss";
 
 export default {
   extends: Teeker,

demo/docs-locales/.vitepress/theme/index.ts

@@ -1,5 +1,12 @@
 import Teeker from "vitepress-theme-teeker";
 // import "vitepress-theme-teeker/index.css";
+import "vitepress-theme-teeker/vp-plus/code-block.scss";
+import "vitepress-theme-teeker/vp-plus/sidebar.scss";
+import "vitepress-theme-teeker/vp-plus/nav.scss";
+import "vitepress-theme-teeker/vp-plus/aside.scss";
+// import "vitepress-theme-teeker/vp-plus/container.scss";
+// import "vitepress-theme-teeker/vp-plus/blockquote.scss";
+// import "vitepress-theme-teeker/vp-plus/rainbow.scss";
 
 export default {
   extends: Teeker,

docs/.vitepress/theme/index.ts

@@ -1,8 +1,12 @@
 import Teeker from "vitepress-theme-teeker";
 // import "vitepress-theme-teeker/index.css";
+import "vitepress-theme-teeker/vp-plus/code-block.scss";
+import "vitepress-theme-teeker/vp-plus/sidebar.scss";
+import "vitepress-theme-teeker/vp-plus/nav.scss";
+import "vitepress-theme-teeker/vp-plus/aside.scss";
 // import "vitepress-theme-teeker/vp-plus/container.scss";
-import "vitepress-theme-teeker/vp-plus/blockquote.scss";
-import "vitepress-theme-teeker/vp-plus/rainbow.scss";
+// import "vitepress-theme-teeker/vp-plus/blockquote.scss";
+// import "vitepress-theme-teeker/vp-plus/rainbow.scss";
 
 export default {
   extends: Teeker,

vitepress-theme-teeker/src/styles/base.scss

@@ -1,5 +1,4 @@
 @use "./common/tk";
-@use "./common/vp";
 @use "./common/transition-dark";
 @use "./var/var";
 

vitepress-theme-teeker/src/styles/common/tk.scss

@@ -1,11 +1,6 @@
 @use "../mixins/config" as *;
 @use "../mixins/function" as *;
 
-a.hover-color:hover {
-  color: getCssVar("theme-color") !important;
-  cursor: pointer !important;
-}
-
 /* 自定义页面样式 */
 .#{$namespace}-page {
   max-width: getCssVar("page-width");
@@ -42,6 +37,16 @@ a.hover-color:hover {
   font-weight: 500;
 }
 
+/* 文章内容宽度加大 */
+.VPContent .VPDoc.has-aside .content-container {
+  max-width: var(--vp-content-container, 688px);
+}
+
+a.hover-color:hover {
+  color: getCssVar("theme-color") !important;
+  cursor: pointer !important;
+}
+
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;

vitepress-theme-teeker/src/styles/common/vp.scss

@@ -0,0 +1,13 @@
+@use "../mixins/function" as *;
+
+.VPDoc {
+  /* 右侧目栏录文字悬停和激活样式 */
+  .aside .aside-content .outline-link {
+    &:hover {
+      font-weight: 700;
+    }
+    &.active {
+      color: getCssVar("theme-color");
+    }
+  }
+}

vitepress-theme-teeker/src/styles/vp-plus/aside.scss

@@ -0,0 +1,13 @@
+.vp-code {
+  /* shift + 鼠标点击代码块，会出现黑色边框，这里禁掉 */
+  outline: none;
+}
+
+@media (max-width: 640px) {
+  // 移动端代码块与文档宽度保持一致
+  .vp-doc div[class*="language-"],
+  .vp-block {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

vitepress-theme-teeker/src/styles/vp-plus/code-block.scss

@@ -0,0 +1,4 @@
+/* 搜索框透明 */
+.DocSearch-Button {
+  background-color: transparent;
+}

vitepress-theme-teeker/src/styles/vp-plus/nav-search-button.scss

@@ -0,0 +1,7 @@
+/* 导航栏切换暗黑模式按钮样式调整 */
+.Layout .VPNavBar .VPSwitchAppearance {
+  width: 22px !important;
+  .check {
+    transform: none;
+  }
+}

vitepress-theme-teeker/src/styles/vp-plus/nav-switch-button.scss

@@ -0,0 +1,8 @@
+@use "../mixins/function" as *;
+
+/* 国际化下拉中，激活的语言颜色修改 */
+.VPNav .VPNavBarTranslations .VPMenu {
+  .title {
+    color: getCssVar("theme-color");
+  }
+}

vitepress-theme-teeker/src/styles/vp-plus/nav-translation.scss

@@ -0,0 +1,3 @@
+@use "./nav-search-button";
+@use "./nav-switch-button";
+@use "./nav-translation";

vitepress-theme-teeker/src/styles/vp-plus/nav.scss

@@ -0,0 +1,19 @@
+.VPSidebar {
+  .nav {
+    .item {
+      h2.text {
+        /* 一级菜单字体加大 */
+        font-size: 18px;
+      }
+
+      p.text {
+        font-size: 15px;
+      }
+    }
+
+    .items {
+      /* 二级菜单添加间距 */
+      padding-left: 10px;
+    }
+  }
+}