主页
产品
Red Hat Developer Hub
1.8
自定义 Red Hat Developer Hub
11.5. 在 Red Hat Developer Hub 主页上自定义 QuickAccessCard 卡图标

11.5. 在 Red Hat Developer Hub 主页上自定义 QuickAccessCard 卡图标

作为管理员，您可以自定义 Red Hat Developer Hub 主页上的 QuickAccessCard 卡图标，以增强其视觉应用程序和用户体验。您可以使用远程 JSON 配置文件集成自定义品牌或标准图标。

流程

添加 JSON 数据源。主页上的 QuickAccessCard 卡支持从 JSON 文件中加载数据。此 JSON 文件可以托管在您的 GitHub 存储库中或任何可访问的端点。

在 RHDH app-config.yaml 文件中配置代理。

要允许主页从托管 JSON 文件获取数据，请在 RHDH app-config.yaml 文件中添加以下代理配置：

proxy:
  endpoints:
  # customize your backstage instance
  '/developer-hub':
    target: https://raw.githubusercontent.com/ # For example, https://raw.githubusercontent.com/
    pathRewrite:
      '^/api/proxy/developer-hub$': <path-to-your>.json # For example, /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
    changeOrigin: true
    secure: true

proxy:
  endpoints:
  # customize your backstage instance
  '/developer-hub':
    target: https://raw.githubusercontent.com/ # For example, https://raw.githubusercontent.com/
    pathRewrite:
      '^/api/proxy/developer-hub$': <path-to-your>.json # For example, /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
    changeOrigin: true
    secure: true

Copy to Clipboard

Toggle word wrap

下表列出了支持的图标类型：

Expand

图标类型	Example	渲染为
Backstage system 图标	`"catalog"`	使用 Backstage system [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx)
SVG 字符串	`"<svg>…</svg>"`	呈现内联 SVG
镜像 URL	`"https://example.com/icon.png"`	呈现外部镜像。外部镜像可能仅限于内容安全策略(CSP)，可在 RHDH `app-config.yaml` 文件中配置。
相对路径	`"/homepage/icons/icon.png"`	从应用程序公共文件夹中加载图标（如果存在）

注意

当存储在 JSON 中时，SVG 必须是有效的字符串（在 < svg&gt; 中使用单引号）。

以下是 JSON 文件示例：

[
 {
 "title": "Community",
 "isExpanded": true,
 "links": [
 {
 "iconUrl": "https://img.icons8.com/ios/50/globe--v1.png",
 "label": "Website",
 "url": "https://developers.redhat.com/"
 },
 {
 "iconUrl": "https://img.icons8.com/ios/50/link--v1.png",
 "label": "Blog",
 "url": "https://developers.redhat.com/blog"
 },
 {
 "iconUrl": "github",
 "label": "GitHub",
 "url": "https://github.com/redhat-developer"
 },
 {
 "iconUrl": "https://img.icons8.com/color/48/slack.png",
 "label": "Slack",
 "url": "https://join.slack.com/xyz"
 },
 {
 "iconUrl": "https://img.icons8.com/color/48/youtube-squared.png",
 "label": "Videos for developers",
 "url": "https://developers.redhat.com/videos"
 },
 {
 "iconUrl": "<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='2048' height='2048' style='shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd'><defs><style>.fil0{fill:none}.fil4{fill:#bdbdbd;fill-rule:nonzero}</style></defs><g id='Layer_x0020_1'><path class='fil0' d='M0 0h2048v2048H0z'/><path class='fil0' d='M255.999 255.999h1536v1536h-1536z'/><path class='fil0' d='M256 256h1536v1536H256z'/><g id='_342647616'><path id='_342648000' style='fill:#e53935;fill-rule:nonzero' d='m273.04 666.226 737.28-367.843 13.68-6.824 13.68 6.824 737.28 367.843 17.04 8.503v234.834L993.281 1418.52 255.999 909.563V674.729z'/><path id='_342647880' style='fill:#fff' d='M609.28 711.961h829.439V1541.4H609.28z'/><path id='_342647808' style='fill:#c62828;fill-rule:nonzero' d='m1024 1279.73 723.6-361.079 44.4-22.156v859.945H255.999V896.495l44.402 22.156z'/><path id='_342647736' class='fil4' d='M1331.2 896.285H716.716v-61.442H1331.2z'/><path id='_342647688' class='fil4' d='M1203.22 1049.88H844.698v-61.439h358.522z'/></g></g></svg>",
 "label": "Mailing List",
 "url": "https://groups.google.com/g/xyz"
 },
 ]
}
]

[
 {
 "title": "Community",
 "isExpanded": true,
 "links": [
 {
 "iconUrl": "https://img.icons8.com/ios/50/globe--v1.png",
 "label": "Website",
 "url": "https://developers.redhat.com/"
 },
 {
 "iconUrl": "https://img.icons8.com/ios/50/link--v1.png",
 "label": "Blog",
 "url": "https://developers.redhat.com/blog"
 },
 {
 "iconUrl": "github",
 "label": "GitHub",
 "url": "https://github.com/redhat-developer"
 },
 {
 "iconUrl": "https://img.icons8.com/color/48/slack.png",
 "label": "Slack",
 "url": "https://join.slack.com/xyz"
 },
 {
 "iconUrl": "https://img.icons8.com/color/48/youtube-squared.png",
 "label": "Videos for developers",
 "url": "https://developers.redhat.com/videos"
 },
 {
 "iconUrl": "<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='2048' height='2048' style='shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd'><defs><style>.fil0{fill:none}.fil4{fill:#bdbdbd;fill-rule:nonzero}</style></defs><g id='Layer_x0020_1'><path class='fil0' d='M0 0h2048v2048H0z'/><path class='fil0' d='M255.999 255.999h1536v1536h-1536z'/><path class='fil0' d='M256 256h1536v1536H256z'/><g id='_342647616'><path id='_342648000' style='fill:#e53935;fill-rule:nonzero' d='m273.04 666.226 737.28-367.843 13.68-6.824 13.68 6.824 737.28 367.843 17.04 8.503v234.834L993.281 1418.52 255.999 909.563V674.729z'/><path id='_342647880' style='fill:#fff' d='M609.28 711.961h829.439V1541.4H609.28z'/><path id='_342647808' style='fill:#c62828;fill-rule:nonzero' d='m1024 1279.73 723.6-361.079 44.4-22.156v859.945H255.999V896.495l44.402 22.156z'/><path id='_342647736' class='fil4' d='M1331.2 896.285H716.716v-61.442H1331.2z'/><path id='_342647688' class='fil4' d='M1203.22 1049.88H844.698v-61.439h358.522z'/></g></g></svg>",
 "label": "Mailing List",
 "url": "https://groups.google.com/g/xyz"
 },
 ]
}
]

Copy to Clipboard

Toggle word wrap

11.5. 在 Red Hat Developer Hub 主页上自定义 QuickAccessCard 卡图标

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links