11.4. 自定义动态主页以优化您的工作流

• 拖放 ：移动卡围绕布局
• 调整大小 ：调整卡维度
• 添加小部件 ：从可用卡中选择以添加到主页
• 删除卡 ：从主页中删除卡
• 恢复默认 ：重置为原始卡配置
• 用户持久性 ：设置会根据您使用 Backstage Storage API 的方式保存

• DynamicHomePage ：显示没有自定义配置的卡的只读主页。
• DynamicCustomizableHomePage ：允许用户移动、调整大小和管理卡的交互式主页。

流程

• 您可以使用拖放和调整其尺寸功能来安排卡并调整其尺寸。以下是您可以添加、删除、移动和调整大小卡的交互式主页示例：

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        dynamicRoutes:
          - path: /
            importName: DynamicCustomizableHomePage
        mountPoints:
           - mountPoint: home.page/cards
             importName: OnboardingSection
             config:
              layouts:
                xl: { w: 12, h: 6 }
                lg: { w: 12, h: 6 }
                md: { w: 12, h: 7 }
                sm: { w: 12, h: 8 }
                xs: { w: 12, h: 9 }
                xxs: { w: 12, h: 14 }
          - mountPoint: home.page/cards
            importName: EntitySection
            config:
              layouts:
                xl: { w: 12, h: 7 }
                lg: { w: 12, h: 7 }
                md: { w: 12, h: 8 }
                sm: { w: 12, h: 9 }
                xs: { w: 12, h: 11 }
                xxs: { w: 12, h: 15 }
          - mountPoint: home.page/cards
            importName: TemplateSection
            config:
              layouts:
                xl: { w: 12, h: 5 }
                lg: { w: 12, h: 5 }
                md: { w: 12, h: 5 }
                sm: { w: 12, h: 5 }
                xs: { w: 12, h: 7.5 }
                xxs: { w: 12, h: 13.5 }
          # Additional cards available in "Add widget" dialog
          - mountPoint: home.page/cards
            importName: RecentlyVisitedCard
          - mountPoint: home.page/cards
            importName: TopVisitedCard

  Copy to Clipboard Toggle word wrap

• 您可以通过覆盖动态主页插件的 title 属性来更改标题，如下例所示：

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        dynamicRoutes:
          - path: /
            importName: DynamicHomePage # or DynamicCustomizableHomePage for customizable homepage
            config:
              props:
                title: 'Howdy {{firstName}} or {{displayName}}'

  Copy to Clipboard Toggle word wrap

  title 属性支持两个变量：

• {{displayName}} ：包含目录实体的完整 displayName。
• {{firstname}} ：这包含 displayName 的第一个部分（以空格分开）。

• 您可以使用默认不使用的子 标题 属性，如下例所示：

  dynamicPlugins:
    frontend:
      red-hat-developer-hub.backstage-plugin-dynamic-home-page:
        dynamicRoutes:
          - path: /
            importName: DynamicHomePage # or DynamicCustomizableHomePage
            config:
              props:
                title: Our custom RHDH instance
                 subtitle: 'Hello {{displayName}}'

  Copy to Clipboard Toggle word wrap