feat: add description and keywords config support

yuntijs · Aug 13, 2024 · 54764a9 · 54764a9
1 parent 8473555
commit 54764a9
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 19 deletions.
diff --git 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<string, HeroConfig>;
   hideHomeNav?: boolean;
-  logo?: string;
-  logoType?: LogoProps['type'];
+  // logo?: string;
+  // logoType?: LogoProps['type'];
   name?: string;
   siteToken?: SiteConfigToken;
+  socialLinks?: {
+    [key in SocialTypes | 'discord']?: string;
+  };
   title?: string;
+  /** 默认描述，未设置描述的页面，该值会用于生成 <meta> 标签 */
+  description?: string;
+  /** 默认关键词，未设置关键词的页面，该值会用于生成 <meta> 标签 */
+  keywords?: string[];
   /** sidebar group 模式路由 */
   sidebarGroupModePath?: true | SidebarGroupModePathItem[];
   /** 自定义页面，可以通过配置去掉页面的头部、侧边栏和页脚 */
@@ -106,6 +112,12 @@ interface SiteThemeConfig {
 interface CustomPageConfigItem {
   /** 页面路径 */
   path: string;
+  /** 页面标题 */
+  title?: string;
+  /** 页面描述，该值会用于生成 <meta> 标签 */
+  description?: string;
+  /** 页面关键词，该值会用于生成 <meta> 标签 */
+  keywords?: string[];
   /** 是否展示头部 */
   header?: boolean;
   /** 是否展示侧边栏 */

diff --git 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
@@ -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 (
       <Helmet>
         <html lang={intl.locale.replace(/-.+$/, '')} />
-        {fm.title && <meta content={fm.title} property="og:title" />}
-        {fm.description && <meta content={fm.description} name="description" />}
-        {fm.description && <meta content={fm.description} property="og:description" />}
-        {fm.keywords && <meta content={fm.keywords.join(',')} name="keywords" />}
-        {fm.keywords && <meta content={fm.keywords.join(',')} property="og:keywords" />}
-        {!fm.title || page === 'home' ? (
+        {title && <meta content={title} property="og:title" />}
+        {description && <meta content={description} name="description" />}
+        {description && <meta content={description} property="og:description" />}
+        {keywords && <meta content={keywords.join(',')} name="keywords" />}
+        {keywords && <meta content={keywords.join(',')} property="og:keywords" />}
+        {!title || page === 'home' ? (
           <title>{siteTitle}</title>
         ) : (
           <title>
-            {fm.title} - {siteTitle}
+            {title} - {siteTitle}
           </title>
         )}
       </Helmet>
-    ),
-    [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
@@ -56,6 +56,12 @@ export interface FooterConfig {
 export interface CustomPageConfigItem {
   /** 页面路径 */
   path: string;
+  /** 页面标题 */
+  title?: string;
+  /** 页面描述，该值会用于生成 <meta> 标签 */
+  description?: string;
+  /** 页面关键词，该值会用于生成 <meta> 标签 */
+  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;
+  /** 默认描述，未设置描述的页面，该值会用于生成 <meta> 标签 */
+  description?: string;
+  /** 默认关键词，未设置关键词的页面，该值会用于生成 <meta> 标签 */
+  keywords?: string[];
   /** sidebar group 模式路由 */
   sidebarGroupModePath?: true | SidebarGroupModePathItem[];
   /** 自定义页面，可以通过配置去掉页面的头部、侧边栏和页脚 */