feat(theme): remove navbarIcon and sidebarIcon and make them presets

vuepress-theme-hope · Apr 17, 2024 · 73f6eb2 · 73f6eb2
1 parent f3ee699
commit 73f6eb2
Show file tree

Hide file tree

Showing 19 changed files with 19 additions and 112 deletions.
diff --git a/docs/theme/src/config/theme/layout.md b/docs/theme/src/config/theme/layout.md
@@ -24,13 +24,6 @@ For related guide, please see [Layout → Navbar](../../guide/layout/navbar.md).
 
 Navbar config
 
-### navbarIcon
-
-- Type: `boolean`
-- Default: `true`
-
-Whether display icons in navbar.
-
 ### navbarLayout
 
 - Type: `NavbarLayoutOptions`
@@ -134,13 +127,6 @@ For guide, see [Layout → Sidebar](../../guide/layout/sidebar.md).
 
 Sidebar Config.
 
-### sidebarIcon
-
-- Type: `boolean`
-- Default: `true`
-
-Whether show icons in the sidebar
-
 ### sidebarSorter <Badge text="Root only" type="warning" />
 
 - Type: `SidebarSorter`

diff --git a/docs/theme/src/guide/customize/presets.md b/docs/theme/src/guide/customize/presets.md
@@ -186,6 +186,8 @@ You can create a [client config file](../../cookbook/vuepress/config.md#client-c
 ### Others
 
 - `"vuepress-theme-hope/presets/bounce-icon.scss"`: Add a mouseover bounce effect to the page icon.
+- `"vuepress-theme-hope/presets/hide-navbar-icon.scss"`: Hide navbar icon.
+- `"vuepress-theme-hope/presets/hide-sidebar-icon.scss"`: Hide sidebar icon.
 
 ## More
 

diff --git a/docs/theme/src/guide/layout/navbar.md b/docs/theme/src/guide/layout/navbar.md
@@ -191,20 +191,6 @@ navbar: false
 ---
 ```
 
-## Disable Navbar Icon
-
-To disable the navbar icon, set `navbarIcon: false` in theme options:
-
-```js{5} title=".vuepress/config.js"
-import { hopeTheme } from "vuepress-theme-hope";
-
-export default {
-  theme: hopeTheme({
-    navbarIcon: false,
-  }),
-};
-```
-
 ## Site Logo
 
 You can use `logo` options to set site logo displayed in navbar.

diff --git a/docs/theme/src/guide/layout/sidebar.md b/docs/theme/src/guide/layout/sidebar.md
@@ -459,10 +459,6 @@ export default {
 };
 ```
 
-## Icon Support
-
-Icon support is enabled in the sidebar by default, and the icon of the page will be displayed before the link in the sidebar (by reading `icon` field in frontmatter). It can be disabled by setting `sidebarIcon` to `false` in theme options.
-
 ## I18n Support
 
 The theme's navbar supports [I18n](https://vuejs.press/guide/i18n.html), so you can set sidebar individually in each language:

diff --git a/docs/theme/src/migration/config.md b/docs/theme/src/migration/config.md
@@ -96,8 +96,6 @@ tag:
 
 - rename `navAutoHide`to `navbarAutoHide`
 
-- added `navbarIcon` option to control navbar icon display
-
 - added `navbarLayout` option to control navbar layout
 
 ### Sidebar

diff --git a/docs/theme/src/zh/config/theme/layout.md b/docs/theme/src/zh/config/theme/layout.md
@@ -24,13 +24,6 @@ tag:
 
 导航栏配置，具体配置方式见上方详情。
 
-### navbarIcon
-
-- 类型: `boolean`
-- 默认值: `true`
-
-是否在导航栏显示图标。
-
 ### navbarLayout
 
 - 类型: `NavbarLayoutOptions`
@@ -134,13 +127,6 @@ tag:
 
 侧边栏配置。
 
-### sidebarIcon
-
-- 类型: `boolean`
-- 默认值: `true`
-
-是否在侧边栏显示图标。
-
 ### sidebarSorter <Badge text="仅限 Root" type="warning" />
 
 - 类型: `SidebarSorter`

diff --git a/docs/theme/src/zh/guide/customize/presets.md b/docs/theme/src/zh/guide/customize/presets.md
@@ -185,6 +185,8 @@ export default defineClientConfig({
 ### 其他
 
 - `"vuepress-theme-hope/presets/bounce-icon.scss"`: 为页面图标添加鼠标悬停的跳动效果。
+- `"vuepress-theme-hope/presets/hide-navbar-icon.scss"`: 隐藏导航栏图标。
+- `"vuepress-theme-hope/presets/hide-sidebar-icon.scss"`: 隐藏侧边栏图标。
 
 ## 更多
 

diff --git a/docs/theme/src/zh/guide/layout/navbar.md b/docs/theme/src/zh/guide/layout/navbar.md
@@ -191,20 +191,6 @@ navbar: false
 ---
 ```
 
-## 禁用导航栏图标
-
-你可以在主题选项中设置 `navbarIcon: false` 来禁用所有页面的导航栏图标:
-
-```js{5} title=".vuepress/config.js"
-import { hopeTheme } from "vuepress-theme-hope";
-
-export default {
-  theme: hopeTheme({
-    navbarIcon: false,
-  }),
-};
-```
-
 ## 网站图标
 
 你可以在主题选项中使用 `logo` 来配置站点的图标，请填入绝对路径。

diff --git a/docs/theme/src/zh/guide/layout/sidebar.md b/docs/theme/src/zh/guide/layout/sidebar.md
@@ -453,10 +453,6 @@ export default {
 };
 ```
 
-## 图标支持
-
-侧边栏默认启用图标支持，将在侧边栏的链接前显示页面的图标。你可以在主题选项中将 `sidebarIcon` 设置为 `false` 来禁用它。
-
 ## 多语言
 
 主题的侧边栏支持 [多语言](https://vuejs.press/zh/guide/i18n.html)，所以你可以为每个语言单独设置侧边栏:

diff --git a/docs/theme/src/zh/migration/config.md b/docs/theme/src/zh/migration/config.md
@@ -96,8 +96,6 @@ tag:
 
 - `navAutoHide` 重命名为 `navbarAutoHide`
 
-- 新增 `navbarIcon` 选项控制导航栏图标
-
 - 新增 `navbarLayout` 选项控制导航栏布局
 
 由于主题不再内置搜索:

diff --git a/packages/theme/src/client/modules/blog/styles/info-list.scss b/packages/theme/src/client/modules/blog/styles/info-list.scss
@@ -71,10 +71,6 @@
   .icon {
     width: 100%;
     height: 100%;
-
-    .vp-sidebar.hide-icon & {
-      display: block !important;
-    }
   }
 }
 

diff --git a/packages/theme/src/client/modules/navbar/components/Navbar.ts b/packages/theme/src/client/modules/navbar/components/Navbar.ts
@@ -97,13 +97,7 @@ export default defineComponent({
         {
           key: "navbar",
           id: "navbar",
-          class: [
-            "vp-navbar",
-            {
-              "auto-hide": autoHide.value,
-              "hide-icon": themeLocale.value.navbarIcon === false,
-            },
-          ],
+          class: ["vp-navbar", { "auto-hide": autoHide.value }],
         },
         [
           h("div", { class: "vp-navbar-start" }, [

diff --git a/packages/theme/src/client/modules/navbar/styles/navbar.scss b/packages/theme/src/client/modules/navbar/styles/navbar.scss
@@ -52,10 +52,6 @@
       height: 1em;
     }
   }
-
-  &.hide-icon .vp-nav-links .icon {
-    display: none !important;
-  }
 }
 
 .vp-navbar-start,

diff --git a/packages/theme/src/client/modules/sidebar/components/Sidebar.ts b/packages/theme/src/client/modules/sidebar/components/Sidebar.ts
@@ -2,7 +2,6 @@ import type { SlotsType, VNode } from "vue";
 import { defineComponent, h, onMounted, shallowRef, watch } from "vue";
 import { useRoute } from "vuepress/client";
 
-import { useThemeLocaleData } from "@theme-hope/composables/index";
 import SidebarLinks from "@theme-hope/modules/sidebar/components/SidebarLinks";
 import { useSidebarItems } from "@theme-hope/modules/sidebar/composables/index";
 
@@ -19,7 +18,6 @@ export default defineComponent({
 
   setup(_props, { slots }) {
     const route = useRoute();
-    const themeLocale = useThemeLocaleData();
     const sidebarItems = useSidebarItems();
 
     const sidebar = shallowRef<HTMLElement>();
@@ -64,12 +62,9 @@ export default defineComponent({
         "aside",
         {
           ref: sidebar,
-          id: "sidebar",
-          class: [
-            "vp-sidebar",
-            { "hide-icon": themeLocale.value.sidebarIcon === false },
-          ],
           key: "sidebar",
+          id: "sidebar",
+          class: "vp-sidebar",
         },
         [
           slots.top?.(),

diff --git a/packages/theme/src/client/modules/sidebar/styles/sidebar.scss b/packages/theme/src/client/modules/sidebar/styles/sidebar.scss
@@ -71,10 +71,6 @@
     vertical-align: -0.125em;
     height: 1em;
   }
-
-  &.hide-icon .icon {
-    display: none !important;
-  }
 }
 
 .vp-sidebar-mask {

diff --git a/packages/theme/src/presets/hide-navbar-icon.scss b/packages/theme/src/presets/hide-navbar-icon.scss
@@ -0,0 +1,3 @@
+.vp-navbar .vp-nav-links .icon {
+  display: none !important;
+}
diff --git a/packages/theme/src/presets/hide-sidebar-icon.scss b/packages/theme/src/presets/hide-sidebar-icon.scss
@@ -0,0 +1,9 @@
+.vp-sidebar {
+  .icon {
+    display: none !important;
+  }
+
+  .vp-blog-type-button .icon {
+    display: block !important;
+  }
+}
diff --git a/packages/theme/src/shared/options/layout/navbar.ts b/packages/theme/src/shared/options/layout/navbar.ts
@@ -110,15 +110,6 @@ export interface NavbarLocaleOptions {
    */
   repoLabel?: string;
 
-  /**
-   * Whether show icon in navbar
-   *
-   * 是否在导航栏中显示图标
-   *
-   * @default true
-   */
-  navbarIcon?: boolean;
-
   /**
    * Whether to hide navbar when scrolling down
    *

diff --git a/packages/theme/src/shared/options/layout/sidebar.ts b/packages/theme/src/shared/options/layout/sidebar.ts
@@ -67,15 +67,6 @@ export interface SidebarLocaleOptions {
    */
   sidebar?: SidebarOptions;
 
-  /**
-   * Whether show icons in the sidebar
-   *
-   * 是否在侧边栏显示图标
-   *
-   * @default true
-   */
-  sidebarIcon?: boolean;
-
   /**
    * Heading depth for sidebar and toc
    *