From 54764a994beb90d5b8c389f545c98be0cf37355c Mon Sep 17 00:00:00 2001 From: Carrotzpc Date: Tue, 13 Aug 2024 11:48:22 +0800 Subject: [PATCH] feat: add description and keywords config support --- README.md | 18 +++++++++-- example/.dumirc.ts | 7 ++-- src/layouts/DocLayout/DocumentLayout.tsx | 41 ++++++++++++++++-------- src/types/config.ts | 11 ++++++- 4 files changed, 58 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 757a054..b5b171e 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,6 @@ Usage After installation, start the site with `dumi`, and the theme will be auto interface SiteThemeConfig { actions?: HeroProps['actions']; apiHeader?: ApiHeaderConfig | false; - description?: string; docStyle?: 'block' | 'pure'; features?: FeaturesProps['items']; footer?: string | false; @@ -92,11 +91,18 @@ interface SiteThemeConfig { }; hero?: HeroConfig | Record; hideHomeNav?: boolean; - logo?: string; - logoType?: LogoProps['type']; + // logo?: string; + // logoType?: LogoProps['type']; name?: string; siteToken?: SiteConfigToken; + socialLinks?: { + [key in SocialTypes | 'discord']?: string; + }; title?: string; + /** 默认描述，未设置描述的页面，该值会用于生成 标签 */ + description?: string; + /** 默认关键词，未设置关键词的页面，该值会用于生成 标签 */ + keywords?: string[]; /** sidebar group 模式路由 */ sidebarGroupModePath?: true | SidebarGroupModePathItem[]; /** 自定义页面，可以通过配置去掉页面的头部、侧边栏和页脚 */ @@ -106,6 +112,12 @@ interface SiteThemeConfig { interface CustomPageConfigItem { /** 页面路径 */ path: string; + /** 页面标题 */ + title?: string; + /** 页面描述，该值会用于生成 标签 */ + description?: string; + /** 页面关键词，该值会用于生成 标签 */ + keywords?: string[]; /** 是否展示头部 */ header?: boolean; /** 是否展示侧边栏 */ diff --git a/example/.dumirc.ts b/example/.dumirc.ts index 10aed6f..8a31c76 100644 --- a/example/.dumirc.ts +++ b/example/.dumirc.ts @@ -30,7 +30,6 @@ const themeConfig = defineThemeConfig({ sourceUrl: `{github}/tree/master/src/{atomId}/index.tsx`, type: 'doc', }, - description: 'Yunti UI is an open-source UI component library for building chatbot web apps', footer: 'Made with ☁️ by YuntiJS', giscus: { category: 'Q&A', @@ -43,6 +42,8 @@ const themeConfig = defineThemeConfig({ github: homepage, }, title: 'Dumi Theme YuntiJS', + description: 'Yunti documentation site theme package designed for Dumi 2', + keywords: ['theme', 'antd', 'dumi', 'dumi-theme'], sidebarGroupModePath: ['/config', '/components'], nav: { 'zh-CN': [ @@ -61,6 +62,9 @@ const themeConfig = defineThemeConfig({ customPages: [ { path: '/custom', + title: '自定义页面', + description: '自定义页面的描述', + keywords: ['自定义页面', 'dumi', 'dumi-theme', 'yunti-ui'], sider: false, header: false, footer: false, @@ -105,5 +109,4 @@ export default defineConfig({ }`, ], themeConfig, - title: 'Dumi Theme YuntiJS', }); diff --git a/src/layouts/DocLayout/DocumentLayout.tsx b/src/layouts/DocLayout/DocumentLayout.tsx index 6b5b77c..34db3ed 100644 --- a/src/layouts/DocLayout/DocumentLayout.tsx +++ b/src/layouts/DocLayout/DocumentLayout.tsx @@ -26,7 +26,7 @@ const DocumentLayout = memo(() => { const theme = useTheme(); const { mobile, laptop } = useResponsive(); - const { loading, page, siteTitle, noToc } = useSiteStore(s => { + const { loading, page, siteTitle, noToc, themeConfig } = useSiteStore(s => { const isChanlogPage = s.location.pathname === '/changelog'; const isHomePage = isHeroPageSel(s); let page; @@ -44,6 +44,7 @@ const DocumentLayout = memo(() => { noToc: tocAnchorItemSel(s).length === 0, page: page, siteTitle: siteTitleSel(s), + themeConfig: s.siteData.themeConfig, }; }, shallow); @@ -56,26 +57,40 @@ const DocumentLayout = memo(() => { const shouldHideToc = fm.toc === false || noToc; const hideToc = mobile ? shouldHideToc : !laptop || shouldHideToc; - const HelmetBlock = useCallback( - () => ( + const HelmetBlock = useCallback(() => { + const title = customConfig?.title || fm.title; + const description = customConfig?.description || fm.description || themeConfig.description; + const keywords = customConfig?.keywords || fm.keywords || themeConfig.keywords; + return ( - {fm.title && } - {fm.description && } - {fm.description && } - {fm.keywords && } - {fm.keywords && } - {!fm.title || page === 'home' ? ( + {title && } + {description && } + {description && } + {keywords && } + {keywords && } + {!title || page === 'home' ? ( {siteTitle} ) : ( - {fm.title} - {siteTitle} + {title} - {siteTitle} )} - ), - [intl, fm, siteTitle, page] - ); + ); + }, [ + customConfig?.description, + customConfig?.keywords, + customConfig?.title, + fm.description, + fm.keywords, + fm.title, + intl.locale, + page, + siteTitle, + themeConfig.description, + themeConfig.keywords, + ]); // handle hash change or visit page hash after async chunk loaded useEffect(() => { diff --git a/src/types/config.ts b/src/types/config.ts index 8eceda9..e8e9a64 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -56,6 +56,12 @@ export interface FooterConfig { export interface CustomPageConfigItem { /** 页面路径 */ path: string; + /** 页面标题 */ + title?: string; + /** 页面描述，该值会用于生成 标签 */ + description?: string; + /** 页面关键词，该值会用于生成 标签 */ + keywords?: string[]; /** 是否展示头部 */ header?: boolean; /** 是否展示侧边栏 */ @@ -67,7 +73,6 @@ export interface CustomPageConfigItem { export interface SiteThemeConfig { actions?: HeroProps['actions']; apiHeader?: ApiHeaderConfig | false; - description?: string; docStyle?: 'block' | 'pure'; features?: FeaturesProps['items']; footer?: string | false; @@ -88,6 +93,10 @@ export interface SiteThemeConfig { [key in SocialTypes | 'discord']?: string; }; title?: string; + /** 默认描述，未设置描述的页面，该值会用于生成 标签 */ + description?: string; + /** 默认关键词，未设置关键词的页面，该值会用于生成 标签 */ + keywords?: string[]; /** sidebar group 模式路由 */ sidebarGroupModePath?: true | SidebarGroupModePathItem[]; /** 自定义页面，可以通过配置去掉页面的头部、侧边栏和页脚 */