feat(theme): support breadcrumbExclude, close #3971

vuepress-theme-hope · Mar 25, 2024 · 7bd344b · 7bd344b
1 parent fb29e94
commit 7bd344b
Show file tree

Hide file tree

Showing 36 changed files with 269 additions and 217 deletions.
diff --git a/docs/md-enhance/src/config.md b/docs/md-enhance/src/config.md
@@ -602,28 +602,28 @@ The above two options are only used by third-party code demo service, you need t
 #### demo.jsfiddle
 
 - Type: `boolean`
-- Default value: `true`
+- Default: `true`
 
 Whether to display the JSFiddle button
 
 #### demo.codepen
 
 - Type: `boolean`
-- Default value: `true`
+- Default: `true`
 
 Whether to display the CodePen button
 
 #### demo.codepenLayout
 
 - Type: `"top" | "left" | "correct"`
-- Default value: `"left"`
+- Default: `"left"`
 
 CodePen editor layout
 
 #### demo.codepenEditors
 
 - Type: `string`
-- Default value: `"101"`
+- Default: `"101"`
 
 CodePen editor status
 

diff --git a/docs/theme/src/config/frontmatter/info.md b/docs/theme/src/config/frontmatter/info.md
@@ -110,7 +110,7 @@ Set the label of the current page.
 ## license
 
 - Type: `string`
-- Default value: value in theme options
+- Default: value in theme options
 
 The license information. A license text will be displayed on footer with the license when it's set.
 

diff --git a/docs/theme/src/config/frontmatter/layout.md b/docs/theme/src/config/frontmatter/layout.md
@@ -14,7 +14,7 @@ You can configure page layout by setting the following frontmatter options.
 ## pageInfo
 
 - Type: `PageInfo[] | false`
-- Default value: value in theme options
+- Default: value in theme options
 
 | Item            | Corresponding Content | Page frontmatter Value                  |
 | --------------- | --------------------- | --------------------------------------- |
@@ -31,7 +31,7 @@ Set whether to show page details on the current page
 ## pageview
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether display page views.
 
@@ -44,17 +44,24 @@ The pageview feature requires you to have a valid Waline Comment Service config.
 ## breadcrumb
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether path navigation is enabled on the current page.
 
 ## breadcrumbIcon
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether path navigation icon is enabled on the current page.
 
+## breadcrumbExclude
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to exclude the current page from the breadcrumb.
+
 ## navbar
 
 - Type: `boolean`
@@ -147,28 +154,28 @@ Group order in sidebar.
 ## comment
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether to enable comments on the current page.
 
 ## lastUpdated
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether display lastUpdated time.
 
 ## editLink
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether to show edit link.
 
 ## contributors
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether to show contributors.
 
@@ -203,7 +210,7 @@ Next article link.
 ## footer
 
 - Type: `boolean | string | HTMLString`
-- Default value: the value configured globally
+- Default: the value configured globally
 
 Footer content.
 
@@ -216,7 +223,7 @@ For more details, please see [Page → Footer Support](../../guide/layout/footer
 ## copyright
 
 - Type: `string | false`
-- Default value: value in theme options
+- Default: value in theme options
 
 Copyright information
 
@@ -225,14 +232,14 @@ For more details, please see [Page → Footer Support](../../guide/layout/footer
 ## backToTop
 
 - Type: `boolean`
-- Default value: `true`
+- Default: `true`
 
 Whether display the back to top button.
 
 ## toc {#toc-heading}
 
 - Type: `boolean`
-- Default value: value in theme options
+- Default: value in theme options
 
 Whether display toc
 

diff --git a/docs/theme/src/guide/layout/breadcrumb.md b/docs/theme/src/guide/layout/breadcrumb.md
@@ -17,6 +17,8 @@ Without any config, a Breadcrumb that matches the theme color is displayed at th
 
 You can also control the icon display of the path navigation using `breadcrumbIcon` field <Badge text="Support page config" />, the default value is `true`.
 
+If you don't want a page to be added to the breadcrumb (e.g.: home page), you can set `breadcrumbExclude: true` in the Front Matter of the page.
+
 [^support-page-config]: **Page config support**
 
     **Support local configuration**<Badge text="Support page config" /> means that the theme allows the configuration of the page to override the global configuration.

diff --git a/docs/theme/src/zh/config/frontmatter/layout.md b/docs/theme/src/zh/config/frontmatter/layout.md
@@ -58,6 +58,13 @@ tag:
 
 是否开启路径导航图标。
 
+## breadcrumbExclude
+
+- 类型: `boolean`
+- 默认值: `false`
+
+当前页面是否被路径导航排除。
+
 ## navbar
 
 - 类型: `boolean`

diff --git a/docs/theme/src/zh/guide/layout/breadcrumb.md b/docs/theme/src/zh/guide/layout/breadcrumb.md
@@ -15,6 +15,8 @@ tag:
 
 你也可以通过 `breadcrumbIcon` 字段 <Badge text="支持页面配置" /> 控制路径导航的图标显示，默认值为 `true`。
 
+如果你不希望某个页面被添加到路径导航中（例如：首页），你可以在页面的 frontmatter 中设置 `breadcrumbExclude: true`。
+
 <!-- more -->
 
 [^support-page-config]: **支持页面配置** <Badge text="支持页面配置" />

diff --git a/packages/theme/src/client/components/BreadCrumb.ts b/packages/theme/src/client/components/BreadCrumb.ts
@@ -20,10 +20,10 @@ import { useThemeLocaleData } from "@theme-hope/composables/index";
 import { getAncestorLinks } from "@theme-hope/utils/index";
 
 import type {
-  ArticleInfo,
+  PageInfoData,
   ThemeNormalPageFrontmatter,
 } from "../../shared/index.js";
-import { ArticleInfoType } from "../../shared/index.js";
+import { PageInfo } from "../../shared/index.js";
 
 import "../styles/breadcrumb.scss";
 
@@ -65,16 +65,13 @@ export default defineComponent({
         routeLocale.value,
       )
         .map<BreadCrumbConfig | null>(({ link, name }) => {
-          const { path, meta, notFound } = resolveRoute<ArticleInfo>(link);
+          const { path, meta, notFound } = resolveRoute<PageInfoData>(link);
 
-          if (notFound) return null;
+          if (notFound || meta[PageInfo.breadcrumbExclude]) return null;
 
           return {
-            title:
-              meta[ArticleInfoType.shortTitle] ||
-              meta[ArticleInfoType.title] ||
-              name,
-            icon: meta[ArticleInfoType.icon],
+            title: meta[PageInfo.shortTitle] || meta[PageInfo.title] || name,
+            icon: meta[PageInfo.icon],
             path,
           };
         })

diff --git a/packages/theme/src/client/composables/pageInfo.ts b/packages/theme/src/client/composables/pageInfo.ts
@@ -23,7 +23,7 @@ import type {
 
 import { useThemeLocaleData } from "./themeData.js";
 import type {
-  PageInfo,
+  PageInfoType,
   ThemeNormalPageFrontmatter,
 } from "../../shared/index.js";
 
@@ -90,7 +90,7 @@ export const usePageDate = (): ComputedRef<Date | null> => {
 
 export const usePageInfo = (): {
   info: ComputedRef<PageInfoProps>;
-  items: ComputedRef<PageInfo[] | false | null>;
+  items: ComputedRef<PageInfoType[] | false | null>;
 } => {
   const themeLocale = useThemeLocaleData();
   const page = usePageData<{

diff --git a/packages/theme/src/client/modules/blog/components/ArticleItem.ts b/packages/theme/src/client/modules/blog/components/ArticleItem.ts
@@ -11,8 +11,15 @@ import { LockIcon } from "@theme-hope/modules/encrypt/components/icons";
 import type { PageInfoProps } from "@theme-hope/modules/info/components/PageInfo";
 import PageInfo from "@theme-hope/modules/info/components/PageInfo";
 
-import type { ArticleInfo } from "../../../../shared/index.js";
-import { ArticleInfoType, PageType } from "../../../../shared/index.js";
+import type {
+  ArticleInfoData,
+  PageInfoData,
+} from "../../../../shared/index.js";
+import {
+  ArticleInfo,
+  PageInfo as PageInfoEnum,
+  PageType,
+} from "../../../../shared/index.js";
 
 import "../styles/article-item.scss";
 
@@ -26,7 +33,7 @@ export default defineComponent({
      * 文章信息
      */
     info: {
-      type: Object as PropType<ArticleInfo>,
+      type: Object as PropType<PageInfoData & ArticleInfoData>,
       required: true,
     },
 
@@ -57,12 +64,12 @@ export default defineComponent({
 
     return (): VNode => {
       const {
-        [ArticleInfoType.title]: title,
-        [ArticleInfoType.type]: type,
-        [ArticleInfoType.isEncrypted]: isEncrypted = false,
-        [ArticleInfoType.cover]: cover,
-        [ArticleInfoType.excerpt]: excerpt,
-        [ArticleInfoType.sticky]: sticky,
+        [PageInfoEnum.title]: title,
+        [ArticleInfo.type]: type,
+        [ArticleInfo.isEncrypted]: isEncrypted = false,
+        [ArticleInfo.cover]: cover,
+        [ArticleInfo.excerpt]: excerpt,
+        [ArticleInfo.sticky]: sticky,
       } = articleInfo.value;
       const info = pageInfo.value;
 

diff --git a/packages/theme/src/client/modules/blog/components/ArticleList.ts b/packages/theme/src/client/modules/blog/components/ArticleList.ts
@@ -16,7 +16,10 @@ import Pagination from "@theme-hope/modules/blog/components/Pagination";
 import { EmptyIcon } from "@theme-hope/modules/blog/components/icons/index";
 import { useBlogOptions } from "@theme-hope/modules/blog/composables/index";
 
-import type { ArticleInfo } from "../../../../shared/index.js";
+import type {
+  ArticleInfoData,
+  PageInfoData,
+} from "../../../../shared/index.js";
 
 import "../styles/article-list.scss";
 
@@ -32,7 +35,10 @@ export default defineComponent({
      * 文章项目
      */
     items: {
-      type: Array as PropType<{ path: string; info: ArticleInfo }[]>,
+      type: Array as PropType<
+        { path: string; info: PageInfoData & ArticleInfoData }[]
+      >,
+
       default: () => [],
     },
   },

diff --git a/packages/theme/src/client/modules/blog/components/InfoList.ts b/packages/theme/src/client/modules/blog/components/InfoList.ts
@@ -21,7 +21,7 @@ import {
   useTagMap,
 } from "@theme-hope/modules/blog/composables/index";
 
-import { ArticleInfoType } from "../../../../shared/index.js";
+import { PageInfo } from "../../../../shared/index.js";
 
 import "../styles/info-list.scss";
 
@@ -115,7 +115,7 @@ export default defineComponent({
                               h(
                                 RouteLink,
                                 { to: path },
-                                () => info[ArticleInfoType.title],
+                                () => info[PageInfo.title],
                               ),
                             ),
                         ),

diff --git a/packages/theme/src/client/modules/blog/components/TimelineItems.ts b/packages/theme/src/client/modules/blog/components/TimelineItems.ts
@@ -11,7 +11,7 @@ import {
 } from "@theme-hope/modules/blog/composables/index";
 import TOC from "@theme-hope/modules/info/components/TOC";
 
-import { ArticleInfoType } from "../../../../shared/index.js";
+import { PageInfo } from "../../../../shared/index.js";
 
 import "../styles/timeline-items.scss";
 
@@ -68,7 +68,7 @@ export default defineComponent({
                             class: "timeline-title",
                             to: path,
                           },
-                          () => info[ArticleInfoType.title],
+                          () => info[PageInfo.title],
                         ),
                       ]),
                     ),

diff --git a/packages/theme/src/client/modules/blog/components/TimelineList.ts b/packages/theme/src/client/modules/blog/components/TimelineList.ts
@@ -7,7 +7,7 @@ import { useNavigate, useThemeLocaleData } from "@theme-hope/composables/index";
 import { TimelineIcon } from "@theme-hope/modules/blog/components/icons/index";
 import { useTimelines } from "@theme-hope/modules/blog/composables/index";
 
-import { ArticleInfoType } from "../../../../shared/index.js";
+import { PageInfo } from "../../../../shared/index.js";
 
 import "../styles/timeline-list.scss";
 
@@ -58,7 +58,7 @@ export default defineComponent({
                           h(
                             RouteLink,
                             { class: "timeline-title", to: path },
-                            () => info[ArticleInfoType.title],
+                            () => info[PageInfo.title],
                           ),
                         ]),
                       ),