[home] hertzbeat home website revision (#271)

[manager] bugfix alert tags is null when tags map key is normal but value is null. (#270) 网站改版调整了首页菜单和帮助文档中的帮助入门布局 [web-app] update layout ui - help button, nav menu (#272) [web-app] update layout ui [web-app] update layout ui - help button, nav menu [alert,webapp] support delete all alerts at once. (#273) [web-app] support switch button config in table list (#274) [alert] bugfix: the alert global preset config do not take effect (#275) [web-app] update home background image (#276) [monitor] release hertzbeat version v1.1.3 (#277) merge dev分支代码更新轮播图图片更改为‘实时监控系统’ 网站改版调整了首页菜单和帮助文档中的帮助入门布局 merge dev分支代码更新轮播图图片更改为‘实时监控系统’
2026-09-17 09:40:58 +00:00 · 2022-09-11 15:24:36 +08:00
parent 661b809997
commit e400bc8a20
21 changed files with 786 additions and 554 deletions
@@ -1,5 +1,5 @@
 ---
-title: HertzBeat入GVP啦，并 v1.0.beta.7 发布，易用友好的云监控系统     
+title: HertzBeat入GVP啦，并 v1.0.beta.7 发布，易用友好的实时监控系统     
 author: tom  
 author_title: tom   
 author_url: https://github.com/tomsun28  
@@ -14,19 +14,30 @@ sidebar_label: 帮助入门

 ### 应用服务监控  

-[网站监测](website)  &emsp;&emsp;&emsp;&emsp;  [HTTP API](api) &emsp;&emsp;&emsp;&emsp; [PING连通性](ping) &emsp;&emsp;&emsp;&emsp; [端口可用性](port) &emsp;&emsp;&emsp;&emsp; [全站监控](fullsite)
+  &emsp;&#x1F449;&emsp;[网站监测](website) <br />
+  &emsp;&#x1F449;&emsp;[HTTP API](api) <br /> 
+  &emsp;&#x1F449;&emsp;[PING连通性](ping) <br />
+  &emsp;&#x1F449;&emsp;[端口可用性](port) <br />
+  &emsp;&#x1F449;&emsp;[全站监控](fullsite) <br />

 ### 数据库监控  

-[MYSQL数据库监控](mysql) &emsp;&emsp;&emsp;&emsp; [MariaDB数据库监控](mariadb)  &emsp;&emsp;&emsp;&emsp; [PostgreSQL数据库监控](postgresql)  &emsp;&emsp;&emsp;&emsp; [SqlServer数据库监控](sqlserver) &emsp;&emsp;&emsp;&emsp; [Oracle数据库监控](oracle)         
+  &emsp;&#x1F449;&emsp;[MYSQL数据库监控](mysql) <br />
+  &emsp;&#x1F449;&emsp;[MariaDB数据库监控](mariadb) <br /> 
+  &emsp;&#x1F449;&emsp;[PostgreSQL数据库监控](postgresql) <br /> 
+  &emsp;&#x1F449;&emsp;[SqlServer数据库监控](sqlserver) <br />
+  &emsp;&#x1F449;&emsp;[Oracle数据库监控](oracle) <br />        

 ### 操作系统监控     

-[Linux操作系统监控](linux) &emsp;&emsp;&emsp;&emsp; [Windows操作系统监控](windows) &emsp;&emsp;&emsp;&emsp; [Ubuntu操作系统监控](ubuntu) &emsp;&emsp;&emsp;&emsp; [Centos操作系统监控](centos) &emsp;&emsp;&emsp;&emsp;
+  &emsp;&#x1F449;&emsp;[Linux操作系统监控](linux) <br />
+  &emsp;&#x1F449;&emsp;[Windows操作系统监控](windows) <br />
+  &emsp;&#x1F449;&emsp;[Ubuntu操作系统监控](ubuntu) <br /> 
+  &emsp;&#x1F449;&emsp;[Centos操作系统监控](centos) <br />

 ### 中间件监控

-[Zookeeper](zookeeper) &emsp;&emsp;&emsp;&emsp;  
+  &emsp;&#x1F449;&emsp;[Zookeeper](zookeeper) <br />

 ## 💡 告警服务  

@@ -41,7 +52,8 @@ sidebar_label: 帮助入门

 > 指标阈值配置，提供表达式形式的指标阈值配置，可设置告警级别，触发次数，告警通知模版和是否启用，关联监控等功能。

-详见 [阈值告警](alert_threshold) &emsp;&emsp;&emsp;&emsp; [阈值表达式](alert_threshold_expr)   
+详见&emsp;&#x1F449;&emsp;[阈值告警](alert_threshold) <br />
+&emsp;&emsp;&emsp;&#x1F449;&emsp;[阈值表达式](alert_threshold_expr)   

 ### 告警通知  

@@ -50,5 +62,8 @@ sidebar_label: 帮助入门
 > 接收人设置后需要设置关联的告警通知策略，来配置哪些告警信息发给哪些接收人。   


-[配置邮箱通知](alert_email)  &emsp;&emsp;&emsp;&emsp;  [配置WebHook通知](alert_webhook) &emsp;&emsp;&emsp;&emsp; [配置企业微信机器人通知](alert_wework)    
-[配置钉钉机器人通知](alert_dingtalk) &emsp;&emsp;&emsp;&emsp; [配置飞书机器人通知](alert_feishu)   
+&emsp;&#x1F449;&emsp;[配置邮箱通知](alert_email) <br />
+&emsp;&#x1F449;&emsp;[配置WebHook通知](alert_webhook) <br />
+&emsp;&#x1F449;&emsp;[配置企业微信机器人通知](alert_wework) <br />
+&emsp;&#x1F449;&emsp;[配置钉钉机器人通知](alert_dingtalk) <br />
+&emsp;&#x1F449;&emsp;[配置飞书机器人通知](alert_feishu) <br />  
@@ -7,318 +7,323 @@ const repoUrl = `https://github.com/dromara/${projectName}`
 const cdnUrl = 'https://cdn.jsdelivr.net/gh/dromara/hertzbeat@gh-pages/'

 module.exports = {
-    title: 'HertzBeat',
-    tagline: '易用友好的云监控系统',
-    url: 'https://hertzbeat.com',
-    baseUrl: '/',
-    onBrokenLinks: 'throw',
-    onBrokenMarkdownLinks: 'throw',
-    favicon: cdnUrl + 'img/tancloud-logo.svg',
-    organizationName,
-    projectName,
-    customFields: {
-        repoUrl,
-        cdnUrl
+  title: 'HertzBeat',
+  tagline: '易用友好的实时监控系统',
+  url: 'https://hertzbeat.com',
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'throw',
+  favicon: cdnUrl + 'img/tancloud-logo.svg',
+  organizationName,
+  projectName,
+  customFields: {
+    repoUrl,
+    cdnUrl,
+  },
+  i18n: {
+    defaultLocale: 'zh-cn',
+    locales: ['zh-cn', 'en'],
+  },
+  themeConfig: {
+    image: cdnUrl + 'img/tancloud-logo.svg',
+    liveCodeBlock: {
+      playgroundPosition: 'bottom',
    },
-    i18n: {
-        defaultLocale: 'zh-cn',
-        locales: ['zh-cn', 'en'],
-    },
-    themeConfig: {
-        image: cdnUrl + 'img/tancloud-logo.svg',
-        liveCodeBlock: {
-            playgroundPosition: 'bottom',
-        },
-        metadata: [{name: 'keywords', content: 'monitor, apm, 监控, 开源, uptime, opensource'}],
-        colorMode: {
-            defaultMode: 'light',
-            disableSwitch: false,
-            respectPrefersColorScheme: true
-        },
-        prism: {
-            theme: require('prism-react-renderer/themes/github'),
-            darkTheme: require('prism-react-renderer/themes/dracula'),
-            additionalLanguages: ['java'],
-        },
-        algolia: {
-            apiKey: 'c7c84bfcc1495156f5730309d821ba8c',
-            indexName: 'sureness',
-            appId: 'GNVT7Z0UI2',
-            contextualSearch: true,
-        },
-        announcementBar: {
-            id: "github-star",
-            content:
-                '<font style="font-size: medium; font-weight: bolder">If you like TANCLOUD-HertzBeat,</font> <a target="_blank" style="font-size: medium; font-weight: bolder" rel="noopener noreferrer" href="https://github.com/dromara/hertzbeat">give us a star on GitHub </a> <font style="font-size: medium; font-weight: bolder"> or </font><a target="_blank" style="font-size: medium; font-weight: bolder" rel="noopener noreferrer" href="https://gitee.com/dromara/hertzbeat">Gitee please! </a>⭐️⭐️',
-            backgroundColor: '#7228B5',
-            textColor: '#fafbfc',
-            isCloseable: true,
-        },
-        navbar: {
-            title: 'HertzBeat',
-            logo: {
-                alt: '易用友好的高性能监控云',
-                src: cdnUrl + 'img/tancloud-logo.svg',
-            },
-            items: [
-                {
-                    label: '首页',
-                    position: 'left',
-                    to: '/',
-                },
-                {
-                    label: '文档',
-                    position: 'left',
-                    to: 'docs/',
-                },
-                {
-                    label: '博客',
-                    position: 'left',
-                    to: 'blog/',
-                },
-                {
-                    label: '讨论交流',
-                    position: 'left',
-                    to: 'docs/others/contact',
-                },
-                {
-                    label: '私有化部署',
-                    position: 'left',
-                    to: 'docs/others/private',
-                },
-                {
-                    label: '贡献者指南',
-                    position: 'left',
-                    to: 'docs/others/contributing',
-                },
-                {
-                    label: '项目看板',
-                    position: 'left',
-                    href: 'https://github.com/dromara/hertzbeat/projects/1',
-                },
-                {
-                    label: '其它',
-                    position: 'left',
-                    items: [
-                        {
-                            label: '设计文档',
-                            to: 'docs/others/design',
-                        },
-                        {
-                            label: '赞助我们',
-                            to: 'docs/others/sponsor',
-                        },
-                        {
-                            label: '相关资源',
-                            to: 'docs/others/resource',
-                        },
-                    ],
-                },
-                {
-                    type: 'docsVersionDropdown',
-                    position: 'right',
-                    // dropdownItemsAfter: [{to: '/versions', label: '所有版本'}],
-                    dropdownActiveClassDisabled: true,
-                },
-                {
-                    type: 'localeDropdown',
-                    position: 'right',
-                },
-                {
-                    label: '登录/注册',
-                    href: 'https://console.tancloud.cn',
-                    position: 'right',
-                    className: 'header-console-link'
-                },
-            ],
-        },
-        footer: {
-            style: 'light',
-            links: [
-                {
-                    title: '产品介绍',
-                    items: [
-                        {
-                            label: '使用介绍',
-                            to: 'docs/',
-                        },
-                        {
-                            label: '安装文档',
-                            to: 'docs/start/quickstart',
-                        },
-                        {
-                            label: '自定义监控',
-                            to: 'docs/advanced/extend-point'
-                        },
-                        {
-                            label: '帮助文档',
-                            to: 'docs/help/guide'
-                        },
-                    ],
-                },
-                {
-                    title: '社区交流',
-                    items: [
-                        {
-                            label: 'Dromara开源社区',
-                            href: 'https://dromara.org/',
-                        },
-                        {
-                            label: '交流联系',
-                            to: 'docs/others/contact',
-                        },
-                        {
-                            label: '我们的故事',
-                            href: 'https://support.qq.com/products/379369/team',
-                        },
-                        {
-                            label: 'TanCloud探云',
-                            href: 'https://tancloud.cn',
-                        }
-                    ],
-                },
-                {
-                    title: '相关资源',
-                    items: [
-                        {
-                            label: 'Github仓库',
-                            href: 'https://github.com/dromara/hertzbeat',
-                        },
-                        {
-                            label: 'Gitee仓库',
-                            href: 'https://gitee.com/dromara/hertzbeat',
-                        },
-                        {
-                            label: '相关资源',
-                            to: 'docs/others/resource',
-                        },
-                    ],
-                },
-            ],
-            logo: {
-                alt: 'TANCLOUD探云-易用友好的高性能监控云',
-                src: 'https://cdn.jsdelivr.net/gh/dromara/hertzbeat@gh-pages/img/planet.jpg',
-                href: 'https://github.com/dromara/hertzbeat',
-            },
-            copyright: '<a target="_blank" href="https://beian.miit.gov.cn/">蜀ICP备2022002218号</a>' + ` | Copyright TANCLOUD© ${new Date().getFullYear()}`,
-        },
-    },
-    presets: [
-        [
-            '@docusaurus/preset-classic',
-            {
-                docs: {
-                    sidebarPath: require.resolve('./sidebars.json'),
-                    // Please change this to your repo.
-                    editUrl: `${repoUrl}/edit/${branch}/home/`,
-                    editLocalizedFiles: true,
-                    remarkPlugins: [
-                        [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
-                    ],
-                    lastVersion: 'current',
-                    versions: {
-                        current: {
-                            label: 'v1.1.x',
-                            path: '',
-                        }
-                    }
-                },
-                blog: {
-                    showReadingTime: true,
-                    postsPerPage: 3,
-                    feedOptions: {
-                        type: 'all',
-                        copyright: `Copyright © ${new Date().getFullYear()} TANCLOUD, Inc.`,
-                    },
-                    // Please change this to your repo.
-                    editUrl: `${repoUrl}/edit/${branch}/home/`,
-                    editLocalizedFiles: true,
-                },
-                theme: {
-                    customCss: require.resolve('./src/css/custom.css'),
-                },
-                sitemap: {
-                    changefreq: 'weekly',
-                    priority: 0.5,
-                }
-            },
-        ],
+    metadata: [
+      {
+        name: 'keywords',
+        content: 'monitor, apm, 监控, 开源, uptime, opensource',
+      },
    ],
-    plugins: [
-        [
-            '@docusaurus/plugin-client-redirects',
-            {
-                fromExtensions: ['html'],
-            }
-        ],
-        '@docusaurus/plugin-ideal-image',
-        [
-            '@docusaurus/plugin-pwa',
-            {
-                debug: false,
-                offlineModeActivationStrategies: ['appInstalled', 'queryString'],
-                // swRegister: false,
-                swCustom: path.resolve(__dirname, 'src/sw.js'),
-                pwaHead: [
-                    {
-                        tagName: 'link',
-                        rel: 'icon',
-                        href: 'img/tancloud-logo.svg',
-                    },
-                    {
-                        tagName: 'link',
-                        rel: 'manifest',
-                        href: 'manifest.json',
-                    },
-                    {
-                        tagName: 'meta',
-                        name: 'theme-color',
-                        content: 'rgb(234, 90, 7)',
-                    },
-                    {
-                        tagName: 'meta',
-                        name: 'apple-mobile-web-app-capable',
-                        content: 'yes',
-                    },
-                    {
-                        tagName: 'meta',
-                        name: 'apple-mobile-web-app-status-bar-style',
-                        content: '#000',
-                    },
-                    {
-                        tagName: 'link',
-                        rel: 'apple-touch-icon',
-                        href: 'img/tancloud-logo.svg',
-                    },
-                    {
-                        tagName: 'link',
-                        rel: 'mask-icon',
-                        href: 'img/tancloud-logo.svg',
-                        color: 'rgb(234, 90, 7)',
-                    },
-                    {
-                        tagName: 'meta',
-                        name: 'msapplication-TileImage',
-                        content: 'img/tancloud-logo.svg',
-                    },
-                    {
-                        tagName: 'meta',
-                        name: 'msapplication-TileColor',
-                        content: '#000',
-                    },
-                ],
-            },
-        ],
-    ],
-    themes: ['@docusaurus/theme-live-codeblock'],
-    scripts: [
+    colorMode: {
+      defaultMode: 'light',
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
+    prism: {
+      theme: require('prism-react-renderer/themes/github'),
+      darkTheme: require('prism-react-renderer/themes/dracula'),
+      additionalLanguages: ['java'],
+    },
+    algolia: {
+      apiKey: 'c7c84bfcc1495156f5730309d821ba8c',
+      indexName: 'sureness',
+      appId: 'GNVT7Z0UI2',
+      contextualSearch: true,
+    },
+    announcementBar: {
+      id: 'github-star',
+      content:
+        '<font style="font-size: medium; font-weight: bolder">If you like TANCLOUD-HertzBeat,</font> <a target="_blank" style="font-size: medium; font-weight: bolder" rel="noopener noreferrer" href="https://github.com/dromara/hertzbeat">give us a star on GitHub </a> <font style="font-size: medium; font-weight: bolder"> or </font><a target="_blank" style="font-size: medium; font-weight: bolder" rel="noopener noreferrer" href="https://gitee.com/dromara/hertzbeat">Gitee please! </a>⭐️⭐️',
+      backgroundColor: '#7228B5',
+      textColor: '#fafbfc',
+      isCloseable: true,
+    },
+    navbar: {
+      title: 'HertzBeat',
+      logo: {
+        alt: '易用友好的高性能监控云',
+        src: cdnUrl + 'img/tancloud-logo.svg',
+      },
+      items: [
        {
-            src: 'https://cdn.jsdelivr.net/gh/buttons/buttons.github.io/buttons.js',
-            async: true
+          label: '首页',
+          position: 'left',
+          to: '/',
        },
        {
-            src: 'https://hm.baidu.com/hm.js?77fb03ed1c6c1267119fec6d84dd88f3',
-            async: true
-        }
-    ]
+          label: '文档',
+          position: 'left',
+          to: 'docs/',
+        },
+        {
+          label: '博客',
+          position: 'left',
+          to: 'blog/',
+        },
+        {
+          label: '讨论交流',
+          position: 'left',
+          to: 'docs/others/contact',
+        },
+        {
+          label: '私有化部署',
+          position: 'left',
+          to: 'docs/others/private',
+        },
+        {
+          label: '关于',
+          position: 'left',
+          items: [
+            {
+              label: '贡献者指南',
+              to: 'docs/others/contributing',
+            },
+            {
+              label: '项目看板',
+              href: 'https://github.com/dromara/hertzbeat/projects/1',
+            },
+            {
+              label: '设计文档',
+              to: 'docs/others/design',
+            },
+            {
+              label: '赞助我们',
+              to: 'docs/others/sponsor',
+            },
+            {
+              label: '相关资源',
+              to: 'docs/others/resource',
+            },
+          ],
+        },
+        {
+          type: 'docsVersionDropdown',
+          position: 'right',
+          // dropdownItemsAfter: [{to: '/versions', label: '所有版本'}],
+          dropdownActiveClassDisabled: true,
+        },
+        {
+          type: 'localeDropdown',
+          position: 'right',
+        },
+        {
+          label: '登录/注册',
+          href: 'https://console.tancloud.cn',
+          position: 'right',
+          className: 'header-console-link',
+        },
+      ],
+    },
+    footer: {
+      style: 'light',
+      links: [
+        {
+          title: '产品介绍',
+          items: [
+            {
+              label: '使用介绍',
+              to: 'docs/',
+            },
+            {
+              label: '安装文档',
+              to: 'docs/start/quickstart',
+            },
+            {
+              label: '自定义监控',
+              to: 'docs/advanced/extend-point',
+            },
+            {
+              label: '帮助文档',
+              to: 'docs/help/guide',
+            },
+          ],
+        },
+        {
+          title: '社区交流',
+          items: [
+            {
+              label: 'Dromara开源社区',
+              href: 'https://dromara.org/',
+            },
+            {
+              label: '交流联系',
+              to: 'docs/others/contact',
+            },
+            {
+              label: '我们的故事',
+              href: 'https://support.qq.com/products/379369/team',
+            },
+            {
+              label: 'TanCloud探云',
+              href: 'https://tancloud.cn',
+            },
+          ],
+        },
+        {
+          title: '相关资源',
+          items: [
+            {
+              label: 'Github仓库',
+              href: 'https://github.com/dromara/hertzbeat',
+            },
+            {
+              label: 'Gitee仓库',
+              href: 'https://gitee.com/dromara/hertzbeat',
+            },
+            {
+              label: '相关资源',
+              to: 'docs/others/resource',
+            },
+          ],
+        },
+      ],
+      logo: {
+        alt: 'TANCLOUD探云-易用友好的高性能监控云',
+        src: 'https://cdn.jsdelivr.net/gh/dromara/hertzbeat@gh-pages/img/planet.jpg',
+        href: 'https://github.com/dromara/hertzbeat',
+      },
+      copyright:
+        '<a target="_blank" href="https://beian.miit.gov.cn/">蜀ICP备2022002218号</a>' +
+        ` | Copyright TANCLOUD© ${new Date().getFullYear()}`,
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.json'),
+          // Please change this to your repo.
+          editUrl: `${repoUrl}/edit/${branch}/home/`,
+          editLocalizedFiles: true,
+          remarkPlugins: [
+            [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
+          ],
+          lastVersion: 'current',
+          versions: {
+            current: {
+              label: 'v1.1.x',
+              path: '',
+            },
+          },
+        },
+        blog: {
+          showReadingTime: true,
+          postsPerPage: 3,
+          feedOptions: {
+            type: 'all',
+            copyright: `Copyright © ${new Date().getFullYear()} TANCLOUD, Inc.`,
+          },
+          // Please change this to your repo.
+          editUrl: `${repoUrl}/edit/${branch}/home/`,
+          editLocalizedFiles: true,
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+        sitemap: {
+          changefreq: 'weekly',
+          priority: 0.5,
+        },
+      },
+    ],
+  ],
+  plugins: [
+    [
+      '@docusaurus/plugin-client-redirects',
+      {
+        fromExtensions: ['html'],
+      },
+    ],
+    '@docusaurus/plugin-ideal-image',
+    [
+      '@docusaurus/plugin-pwa',
+      {
+        debug: false,
+        offlineModeActivationStrategies: ['appInstalled', 'queryString'],
+        // swRegister: false,
+        swCustom: path.resolve(__dirname, 'src/sw.js'),
+        pwaHead: [
+          {
+            tagName: 'link',
+            rel: 'icon',
+            href: 'img/tancloud-logo.svg',
+          },
+          {
+            tagName: 'link',
+            rel: 'manifest',
+            href: 'manifest.json',
+          },
+          {
+            tagName: 'meta',
+            name: 'theme-color',
+            content: 'rgb(234, 90, 7)',
+          },
+          {
+            tagName: 'meta',
+            name: 'apple-mobile-web-app-capable',
+            content: 'yes',
+          },
+          {
+            tagName: 'meta',
+            name: 'apple-mobile-web-app-status-bar-style',
+            content: '#000',
+          },
+          {
+            tagName: 'link',
+            rel: 'apple-touch-icon',
+            href: 'img/tancloud-logo.svg',
+          },
+          {
+            tagName: 'link',
+            rel: 'mask-icon',
+            href: 'img/tancloud-logo.svg',
+            color: 'rgb(234, 90, 7)',
+          },
+          {
+            tagName: 'meta',
+            name: 'msapplication-TileImage',
+            content: 'img/tancloud-logo.svg',
+          },
+          {
+            tagName: 'meta',
+            name: 'msapplication-TileColor',
+            content: '#000',
+          },
+        ],
+      },
+    ],
+  ],
+  themes: ['@docusaurus/theme-live-codeblock'],
+  scripts: [
+    {
+      src: 'https://cdn.jsdelivr.net/gh/buttons/buttons.github.io/buttons.js',
+      async: true,
+    },
+    {
+      src: 'https://hm.baidu.com/hm.js?77fb03ed1c6c1267119fec6d84dd88f3',
+      async: true,
+    },
+  ],
 }
@@ -232,7 +232,7 @@
  "HertzBeat监控系统代码开源，非常欢迎任何对此有兴趣的同学参与中来，我们一起进步，丰富的资源文档正在完善中。{br}中二的我们相信开源改变世界！{br}{github} {br}{gitee}": {
    "message": "The HertzBeat code is open source, and anyone who are interested in it are very welcome to participate. We will make progress together, and the rich resource documents are being improved. {br}We believe that open source can change the world! {br}{github} {br}{gitee}."
  },
-  "易用友好的云监控系统": {
+  "易用友好的实时监控系统": {
    "message": "Friendly Real-Time Monitor System"
  },
  "即刻登录免费使用": {
@@ -1,5 +1,5 @@
 ---
-title: HertzBeat入GVP啦，并 v1.0.beta.7 发布，易用友好的云监控系统     
+title: HertzBeat入GVP啦，并 v1.0.beta.7 发布，易用友好的实时监控系统     
 author: tom  
 author_title: tom   
 author_url: https://github.com/tomsun28  
@@ -7,7 +7,7 @@ author_image_url: https://avatars.githubusercontent.com/u/24788200?s=400&v=4
 tags: [opensource]  
 ---

-> Friendly Cloud Monitoring System. | 易用友好的云监控系统, 无需Agent, 强大自定义监控能力.
+> Friendly Cloud Monitoring System. | 易用友好的实时监控系统, 无需Agent, 强大自定义监控能力.

 **Home: [hertzbeat.com](https://hertzbeat.com)**  

@@ -14,15 +14,31 @@ sidebar_label: Help center

 ### Application service monitoring 

-[Website monitoring](website)  &emsp;&emsp;&emsp;&emsp;  [HTTP API](api) &emsp;&emsp;&emsp;&emsp; [PING Connectivity](ping) &emsp;&emsp;&emsp;&emsp; [Port availability](port) &emsp;&emsp;&emsp;&emsp; [Full site monitoring](fullsite)
+&emsp;&#x1F449;&emsp;[Website monitoring](website) <br /> 
+&emsp;&#x1F449;&emsp;[HTTP API](api) <br /> 
+&emsp;&#x1F449;&emsp;[PING Connectivity](ping) <br /> 
+&emsp;&#x1F449;&emsp;[Port availability](port) <br /> 
+&emsp;&#x1F449;&emsp;[Full site monitoring](fullsite) <br />

 ### Database monitoring  

-[MYSQL database monitoring](mysql) &emsp;&emsp;&emsp;&emsp; [MariaDB database monitoring](mariadb)  &emsp;&emsp;&emsp;&emsp; [PostgreSQL database monitoring](postgresql)  &emsp;&emsp;&emsp;&emsp; [SqlServer database monitoring](sqlserver) &emsp;&emsp;&emsp;&emsp; [Oracle database monitoring](oracle)         
+&emsp;&#x1F449;&emsp;[MYSQL database monitoring](mysql) <br />
+&emsp;&#x1F449;&emsp;[MariaDB database monitoring](mariadb) <br />
+&emsp;&#x1F449;&emsp;[PostgreSQL database monitoring](postgresql) <br />
+&emsp;&#x1F449;&emsp;[SqlServer database monitoring](sqlserver) <br />
+&emsp;&#x1F449;&emsp;[Oracle database monitoring](oracle) <br />        

 ### Operating system monitoring     

-[Linux operating system monitoring](linux) &emsp;&emsp;&emsp;&emsp; [Windows operating system monitoring](windows) &emsp;&emsp;&emsp;&emsp; [Ubuntu operating system monitoring](ubuntu) &emsp;&emsp;&emsp;&emsp; [Centos operating system monitoring](centos) &emsp;&emsp;&emsp;&emsp;
+&emsp;&#x1F449;&emsp;[Linux operating system monitoring](linux) <br />
+&emsp;&#x1F449;&emsp;[Windows operating system monitoring](windows) <br />
+&emsp;&#x1F449;&emsp;[Ubuntu operating system monitoring](ubuntu) <br />
+&emsp;&#x1F449;&emsp;[Centos operating system monitoring](centos) <br />
+
+### Middleware monitoring
+&emsp;&#x1F449;&emsp;[Zookeeper](zookeeper) <br />
+
+***

 ## 💡 Alarm service  

@@ -37,7 +53,8 @@ sidebar_label: Help center

 > The Metric threshold configuration provides the Metric threshold configuration in the form of expression, which can set the alarm level, trigger times, alarm notification template and whether it is enabled, correlation monitoring and other functions.

-More details see [threshold alarm](alert_threshold) &emsp;&emsp;&emsp;&emsp; [Threshold expression](alert_threshold_expr)   
+More details see&emsp;&#x1F449;&emsp;[threshold alarm](alert_threshold) <br /> 
+&emsp;&emsp;&emsp;&#x1F449;&emsp;[Threshold expression](alert_threshold_expr)   

 ### Alarm notification  

@@ -46,5 +63,8 @@ More details see [threshold alarm](alert_threshold) &emsp;&emsp;&emsp;&emsp; [Th
 > After setting the receiver, you need to set the associated alarm notification strategy to configure which alarm information is sent to which receiver.   


-[Configure email notification](alert_email)  &emsp;&emsp;&emsp;&emsp;  [Configure WebHook notification](alert_webhook) &emsp;&emsp;&emsp;&emsp; [Configure enterprise wechat robot notification](alert_wework)    
-[Configure DingDing robot notification](alert_dingtalk) &emsp;&emsp;&emsp;&emsp; [Configure FeiShu robot notification](alert_feishu)   
+&emsp;&#x1F449;&emsp;[Configure email notification](alert_email) <br /> 
+&emsp;&#x1F449;&emsp;[Configure WebHook notification](alert_webhook) <br /> 
+&emsp;&#x1F449;&emsp;[Configure enterprise wechat robot notification](alert_wework) <br />    
+&emsp;&#x1F449;&emsp;[Configure DingDing robot notification](alert_dingtalk) <br /> 
+&emsp;&#x1F449;&emsp;[Configure FeiShu robot notification](alert_feishu) <br />   
@@ -27,8 +27,8 @@
    "message": "Dashboard",
    "description": "Navbar item with label 项目看板"
  },
-  "item.label.其它": {
-    "message": "Others",
+  "item.label.关于": {
+    "message": "About",
    "description": "Navbar item with label 其它"
  },
  "item.label.登录/注册": {
@@ -17,7 +17,7 @@
  "HertzBeat监控系统代码开源，非常欢迎任何对此有兴趣的同学参与中来，我们一起进步，丰富的资源文档正在完善中。{br}中二的我们相信开源改变世界！{br}{github} {br}{gitee}": {
    "message": "HertzBeat监控系统代码开源，非常欢迎任何对此有兴趣的同学参与中来，我们一起进步，丰富的资源文档正在完善中。{br}中二的我们相信开源改变世界！{br}{github} {br}{gitee}"
  },
-  "易用友好的云监控系统": {
+  "易用友好的实时监控系统": {
    "message": "易用友好的实时监控系统"
  },
  "即刻登录免费使用": {
@@ -34,7 +34,8 @@
    "slick-carousel": "^1.8.1",
    "url-loader": "^4.1.1",
    "workbox-routing": "^6.1.0",
-    "workbox-strategies": "^6.1.0"
+    "workbox-strategies": "^6.1.0",
+    "swiper": "^7.0.1"
  },
  "browserslist": {
    "production": [
@@ -1,169 +1,208 @@
 import React from 'react'

-import Translate, {translate} from '@docusaurus/Translate'
+import Translate, { translate } from '@docusaurus/Translate'

-
-export const features = [{
+export const features = [
+  {
    title: translate({
-        message: '开箱即用'
+      message: '开箱即用',
    }),
    description: (
-        <>
-            <Translate values={{
-                TANCLOUD: <strong>TANCLOUD</strong>,
-                SAAS: <strong>SAAS</strong>,
-                console: <a href={'https://www.console.tancloud.cn'}><strong>Login Now</strong></a>,
-                br: <br/>
-            }}>
-                {'中小团队和个人无需再为了监控自己的网站资源，而去部署一套繁琐的监控系统。往往有时候，那套监控系统比自身网站消耗的资源还大。' +
-                '{TANCLOUD} 提供{SAAS}云版本，{console}即可开始您的服务监控。{br}' +
-                '安全是最重要的，我们对账户密钥和监控密钥全链路加密。'
-                }
-            </Translate>
-        </>
+      <>
+        <Translate
+          values={{
+            TANCLOUD: <strong>TANCLOUD</strong>,
+            SAAS: <strong>SAAS</strong>,
+            console: (
+              <a href={'https://www.console.tancloud.cn'}>
+                <strong>Login Now</strong>
+              </a>
+            ),
+            br: <br />,
+          }}
+        >
+          {'中小团队和个人无需再为了监控自己的网站资源，而去部署一套繁琐的监控系统。往往有时候，那套监控系统比自身网站消耗的资源还大。' +
+            '{TANCLOUD} 提供{SAAS}云版本，{console}即可开始您的服务监控。{br}' +
+            '安全是最重要的，我们对账户密钥和监控密钥全链路加密。'}
+        </Translate>
+      </>
    ),
-}, {
+  },
+  {
    title: translate({
-        message: '多支持与自定义'
+      message: '多支持与自定义',
    }),
    description: (
-        <>
-            <Translate values={{
-                custom: <a href={'/docs/advanced/extend-point'}><strong>Custom-Monitoring 自定义监控</strong></a>,
-                br: <br/>
-            }}>
-                {'HertzBeat目前支持对网站，API，PING连通性，端口可用性，SiteMap全站，数据库，操作系统等的监控，快速迭代提供更多的监控类型和性能指标。{br}' +
-                '我们提供了更自由化的阈值告警配置，支持邮箱，短信，webhook，钉钉，企业微信，飞书机器人等告警通知。{br}' +
-                '不同团队的监控需求千变万化，我们提供{custom}，仅需配置YML就能快速接入监控系统。'
-                }
-            </Translate>
-        </>
+      <>
+        <Translate
+          values={{
+            custom: (
+              <a href={'/docs/advanced/extend-point'}>
+                <strong>Custom-Monitoring</strong>
+              </a>
+            ),
+            br: <br />,
+          }}
+        >
+          {'HertzBeat目前支持对网站，API，PING连通性，端口可用性，SiteMap全站，数据库，操作系统等的监控，快速迭代提供更多的监控类型和性能指标。{br}' +
+            '我们提供了更自由化的阈值告警配置，支持邮箱，短信，webhook，钉钉，企业微信，飞书机器人等告警通知。{br}' +
+            '不同团队的监控需求千变万化，我们提供{custom}，仅需配置YML就能快速接入监控系统。'}
+        </Translate>
+      </>
    ),
-},
-    {
-        title: translate({
-            message: '拥抱开源'
-        }),
-        description: (
-            <>
-                <Translate values={{
-                    github: <a href={'https://github.com/dromara/hertzbeat'}><strong>HertzBeat Code Github</strong></a>,
-                    gitee: <a href={'https://gitee.com/dromara/hertzbeat'}><strong>HertzBeat Code Gitee</strong></a>,
-                    br: <br/>
-                }}>
-                    {'HertzBeat监控系统代码开源，非常欢迎任何对此有兴趣的同学参与中来，我们一起进步，丰富的资源文档正在完善中。{br}' +
-                    '中二的我们相信开源改变世界！{br}' +
-                    '{github} {br}' +
-                    '{gitee}'
-                    }
-                </Translate>
-            </>
-        ),
-    }]
+  },
+  {
+    title: translate({
+      message: '拥抱开源',
+    }),
+    description: (
+      <>
+        <Translate
+          values={{
+            github: (
+              <a href={'https://github.com/dromara/hertzbeat'}>
+                <strong>HertzBeat Code Github</strong>
+              </a>
+            ),
+            gitee: (
+              <a href={'https://gitee.com/dromara/hertzbeat'}>
+                <strong>HertzBeat Code Gitee</strong>
+              </a>
+            ),
+            br: <br />,
+          }}
+        >
+          {'HertzBeat监控系统代码开源，非常欢迎任何对此有兴趣的同学参与中来，我们一起进步，丰富的资源文档正在完善中。{br}' +
+            '中二的我们相信开源改变世界！{br}' +
+            '{github} {br}' +
+            '{gitee}'}
+        </Translate>
+      </>
+    ),
+  },
+]

 export const dromaraFriends = [
-    {
-        img: 'maxkey_logo.png',
-        alt: 'MaxKey',
-        url: 'https://maxkey.top/'
-    }, {
-        img: 'jpom_logo.png',
-        alt: 'jpom',
-        url: 'https://jpom.io/'
-    },
-    {
-        img: 'fast_request_logo.png',
-        alt: 'fast-request',
-        url: 'https://plugins.sheng90.wang/fast-request/'
-    },
-    {
-        img: 'tlog_logo.png',
-        alt: 'TLog',
-        url: 'https://yomahub.com/tlog/'
-    }, {
-        img: 'hutool_logo.jpg',
-        alt: 'Hutool',
-        url: 'https://hutool.cn/'
-    }, {
-        img: 'satoken_logo.png',
-        alt: 'Sa-Token',
-        url: 'http://sa-token.dev33.cn/'
-    }, {
-        img: 'koalas_rpc_logo.png',
-        alt: 'koalas_rpc',
-        url: 'https://gitee.com/dromara/koalas-rpc'
-    }, {
-        img: 'liteflow_logo.png',
-        alt: 'LiteFlow',
-        url: 'https://yomahub.com/liteflow/'
-    }, {
-        img: 'hmily_logo.png',
-        alt: 'hmily',
-        url: 'https://dromara.org/'
-    }, {
-        img: 'forest_logo.png',
-        alt: 'Forest',
-        url: 'https://forest.dtflyx.com/'
-    }, {
-        img: 'cubic_logo.png',
-        alt: 'cubic',
-        url: 'https://cubic.jiagoujishu.com/'
-    }, {
-        img: 'raincat_logo.png',
-        alt: 'Raincat',
-        url: 'https://dromara.org/'
-    }, {
-        img: 'sureness_logo.png',
-        alt: 'Sureness',
-        url: 'https://su.usthe.com/'
-    }, {
-        img: 'easy_es_logo.png',
-        alt: 'easy-es',
-        url: 'https://www.easy-es.cn/'
-    }, {
-        img: 'dynamic_tp_logo.png',
-        alt: 'dynamic-tp',
-        url: 'https://dynamictp.cn/'
-    }, {
-        img: 'northstar_logo.png',
-        alt: 'northstar',
-        url: 'https://gitee.com/dromara/northstar'
-    }, {
-        img: 'mendmix_logo.png',
-        alt: 'mendmix',
-        url: 'https://www.jeesuite.com/'
-    }, {
-        img: 'gobrs_logo.png',
-        alt: 'Gobrs-Async',
-        url: 'https://async.sizegang.cn/'
-    }, {
-        img: 'easypdf_logo.png',
-        alt: 'easypdf',
-        url: 'https://dromara.gitee.io/x-easypdf/'
-    }, {
-        img: 'dante-cloud_logo.png',
-        alt: 'dante-cloud',
-        url: 'https://www.herodotus.cn/'
-    }, {
-        img: 'image-combiner_logo.png',
-        alt: 'image-combiner',
-        url: 'https://gitee.com/dromara/image-combiner'
-    }, {
-        img: 'dromara.png',
-        alt: 'dromara',
-        url: 'https://dromara.org/'
-    }
+  {
+    img: 'maxkey_logo.png',
+    alt: 'MaxKey',
+    url: 'https://maxkey.top/',
+  },
+  {
+    img: 'jpom_logo.png',
+    alt: 'jpom',
+    url: 'https://jpom.io/',
+  },
+  {
+    img: 'fast_request_logo.png',
+    alt: 'fast-request',
+    url: 'https://plugins.sheng90.wang/fast-request/',
+  },
+  {
+    img: 'tlog_logo.png',
+    alt: 'TLog',
+    url: 'https://yomahub.com/tlog/',
+  },
+  {
+    img: 'hutool_logo.jpg',
+    alt: 'Hutool',
+    url: 'https://hutool.cn/',
+  },
+  {
+    img: 'satoken_logo.png',
+    alt: 'Sa-Token',
+    url: 'http://sa-token.dev33.cn/',
+  },
+  {
+    img: 'koalas_rpc_logo.png',
+    alt: 'koalas_rpc',
+    url: 'https://gitee.com/dromara/koalas-rpc',
+  },
+  {
+    img: 'liteflow_logo.png',
+    alt: 'LiteFlow',
+    url: 'https://yomahub.com/liteflow/',
+  },
+  {
+    img: 'hmily_logo.png',
+    alt: 'hmily',
+    url: 'https://dromara.org/',
+  },
+  {
+    img: 'forest_logo.png',
+    alt: 'Forest',
+    url: 'https://forest.dtflyx.com/',
+  },
+  {
+    img: 'cubic_logo.png',
+    alt: 'cubic',
+    url: 'https://cubic.jiagoujishu.com/',
+  },
+  {
+    img: 'raincat_logo.png',
+    alt: 'Raincat',
+    url: 'https://dromara.org/',
+  },
+  {
+    img: 'sureness_logo.png',
+    alt: 'Sureness',
+    url: 'https://su.usthe.com/',
+  },
+  {
+    img: 'easy_es_logo.png',
+    alt: 'easy-es',
+    url: 'https://www.easy-es.cn/',
+  },
+  {
+    img: 'dynamic_tp_logo.png',
+    alt: 'dynamic-tp',
+    url: 'https://dynamictp.cn/',
+  },
+  {
+    img: 'northstar_logo.png',
+    alt: 'northstar',
+    url: 'https://gitee.com/dromara/northstar',
+  },
+  {
+    img: 'mendmix_logo.png',
+    alt: 'mendmix',
+    url: 'https://www.jeesuite.com/',
+  },
+  {
+    img: 'gobrs_logo.png',
+    alt: 'Gobrs-Async',
+    url: 'https://async.sizegang.cn/',
+  },
+  {
+    img: 'easypdf_logo.png',
+    alt: 'easypdf',
+    url: 'https://dromara.gitee.io/x-easypdf/',
+  },
+  {
+    img: 'dante-cloud_logo.png',
+    alt: 'dante-cloud',
+    url: 'https://www.herodotus.cn/',
+  },
+  {
+    img: 'image-combiner_logo.png',
+    alt: 'image-combiner',
+    url: 'https://gitee.com/dromara/image-combiner',
+  },
+  {
+    img: 'dromara.png',
+    alt: 'dromara',
+    url: 'https://dromara.org/',
+  },
 ]

 export const friendsLink = [
-    {
-        img: 'hippo4j_logo.png',
-        alt: 'hippo4j',
-        url: 'https://hippo4j.cn/'
-    },
+  {
+    img: 'hippo4j_logo.png',
+    alt: 'hippo4j',
+    url: 'https://hippo4j.cn/',
+  },
 ]

-
 export const SetupExample = `
 <dependency>
    <groupId>com.usthe.sureness</groupId>
@@ -5,7 +5,13 @@ import CodeBlock from '@theme/CodeBlock'
 import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
-import Translate, {translate} from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+import SwiperCore, { EffectFade, Navigation, Autoplay } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'

 import Feature from './components/Feature'
 import Section from './components/Section'
@@ -14,87 +20,213 @@ import LogoCarousel from './components/LogoCarousel'
 import cdnTransfer from '../CdnTransfer'

 import styles from './styles.module.css'
-import { features, SetupExample, SurenessIntegration, dromaraFriends, friendsLink } from '../constants'
-import LogoCarouselStatic from "./components/LogoCarouselStatic";
+import {
+  features,
+  SetupExample,
+  SurenessIntegration,
+  dromaraFriends,
+  friendsLink,
+} from '../constants'
+import LogoCarouselStatic from './components/LogoCarouselStatic'

 function Home() {
-    const context = useDocusaurusContext()
-    const {siteConfig = {}} = context
-    return (
-        <Layout
-            title={`${siteConfig.title} · ${siteConfig.tagline}`}
-            description={`${siteConfig.tagline}`}>
-            <header className={clsx('hero hero--primary', styles.heroBanner)}>
-                <div className="container">
-                    <h1 className="hero__title">
-                        <img style={{width: '500px', marginTop: '100px'}} src={cdnTransfer('img/hertzbeat-brand.svg')} alt={'#'}/>
-                    </h1>
-                    <p className="hero__subtitle"><Translate>易用友好的云监控系统</Translate></p>
-                    <div className={styles.social}>
-                        <a href="https://gitter.im/hertzbeat/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src={'https://badges.gitter.im/hertzbeat/community.svg'} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/web-monitor.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/ping-connect.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/port-available.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/database-monitor.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/os-monitor.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/custom-monitor.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/threshold.svg')} alt={''}/></a>
-                        <a href="https://console.tancloud.cn"><img src={cdnTransfer('img/badge/alert.svg')} alt={''}/></a>
-                    </div>
-                    <div className={styles.buttons}>
-                        <Link
-                            to="https://console.tancloud.cn"
-                            className={clsx(
-                                'button button--outline button--secondary button--lg',
-                                styles.getStarted,
-                            )}>
-                            <Translate>即刻登录免费使用</Translate>
-                        </Link>
-                    </div>
-                </div>
-            </header>
-            <main>
-                {features && features.length > 0 && (
-                    <Section isDark>
-                        {features.map((props, idx) => (
-                            <Feature key={idx} {...props} />
-                        ))}
-                    </Section>
-                )}
-                {/*who is using*/}
-                {/*<Section>*/}
-                {/*    <LogoCarousel logos={logos}></LogoCarousel>*/}
-                {/*</Section>*/}
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
+  return (
+    <Layout
+      title={`${siteConfig.title} · ${siteConfig.tagline}`}
+      description={`${siteConfig.tagline}`}
+    >
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">
+            <img
+              style={{ width: '500px', marginTop: '100px' }}
+              src={cdnTransfer('img/hertzbeat-brand.svg')}
+              alt={'#'}
+            />
+          </h1>
+          <p className="hero__subtitle">
+            <Translate>易用友好的实时监控系统</Translate>
+          </p>
+          <div className={styles.social}>
+            <a href="https://gitter.im/hertzbeat/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge">
+              <img
+                src={'https://badges.gitter.im/hertzbeat/community.svg'}
+                alt={''}
+              />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/web-monitor.svg')} alt={''} />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/ping-connect.svg')} alt={''} />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/port-available.svg')} alt={''} />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img
+                src={cdnTransfer('img/badge/database-monitor.svg')}
+                alt={''}
+              />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/os-monitor.svg')} alt={''} />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/custom-monitor.svg')} alt={''} />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/threshold.svg')} alt={''} />
+            </a>
+            <a href="https://console.tancloud.cn">
+              <img src={cdnTransfer('img/badge/alert.svg')} alt={''} />
+            </a>
+          </div>
+          <div className={styles.buttons}>
+            <Link
+              to="https://console.tancloud.cn"
+              className={clsx(
+                'button button--outline button--secondary button--lg',
+                styles.getStarted
+              )}
+            >
+              <Translate>即刻登录免费使用</Translate>
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        <div className={styles.sectionDashboard}>
+          <Swiper
+            modules={[Autoplay, EffectFade, Navigation]}
+            watchSlidesProgress={true}
+            navigation={{
+              nextEl: '.user-swiper-button-next',
+              prevEl: '.user-swiper-button-prev',
+            }}
+            grabCursor
+            // 轮播下用这个效果会失效
+            // effect={'fade'}
+            // fadeEffect={{
+            //   crossFade: true
+            // }}
+            // slidesPerView={1}
+            // 自动轮播
+            loop={true}
+            speed={0}
+            autoplay={{
+              delay: 3000,
+              disableOnInteraction: false,
+              waitForTransition: false,
+            }}
+          >
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/1.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/2.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/3.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/4.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/5.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/6.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/7.png')}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <img
+                style={{ width: '1000px', display: 'block', margin: '0 auto' }}
+                src={useBaseUrl('/img/home/8.png')}
+              />
+            </SwiperSlide>
+          </Swiper>
+        </div>
+        <div
+          className="swiper-button-prev user-swiper-button-prev"
+          style={{ top: '880px', left: '50px', color: '#000033' }}
+        ></div>
+        <div
+          className="swiper-button-next user-swiper-button-next"
+          style={{ top: '880px', right: '50px', color: '#000033' }}
+        ></div>
+        {features && features.length > 0 && (
+          <Section isDark>
+            {features.map((props, idx) => (
+              <Feature key={idx} {...props} />
+            ))}
+          </Section>
+        )}
+        {/*who is using*/}
+        {/*<Section>*/}
+        {/*    <LogoCarousel logos={logos}></LogoCarousel>*/}
+        {/*</Section>*/}

-                {/*Friend Links*/}
-                <Section>
-                    <LogoCarousel logos={dromaraFriends} headerTitle={translate({message: 'Dromara Friends'})}/>
-                </Section>
-                {/*/!*Friend Links*!/*/}
-                <Section>
-                    <LogoCarouselStatic logos={friendsLink} headerTitle={translate({message: 'Friends Link'})}/>
-                </Section>
-            </main>
-        </Layout>
-    )
+        {/*Friend Links*/}
+        <Section>
+          <LogoCarousel
+            logos={dromaraFriends}
+            headerTitle={translate({ message: 'Dromara Friends' })}
+          />
+        </Section>
+        {/*/!*Friend Links*!/*/}
+        <Section>
+          <LogoCarouselStatic
+            logos={friendsLink}
+            headerTitle={translate({ message: 'Friends Link' })}
+          />
+        </Section>
+      </main>
+    </Layout>
+  )
 }

 export default Home

 function loadGitter() {
-    return new Promise(function (resolve, reject) {
-        var script = document.createElement('script')
-        script.type = 'text/javascript'
-        script.async = true;
-        script.src = 'https://sidecar.gitter.im/dist/sidecar.v1.js';
-        ((window.gitter = {}).chat = {}).options = {
-            room: 'hertzbeat/community'
-        };
-        script.onload = function () {
-            ((window.gitter = {}).chat = {}).options = {
-                room: 'hertzbeat/community'
-            };
-        }
-        document.body.appendChild(script)
-    })
+  return new Promise(function (resolve, reject) {
+    var script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.async = true
+    script.src = 'https://sidecar.gitter.im/dist/sidecar.v1.js'
+    ;((window.gitter = {}).chat = {}).options = {
+      room: 'hertzbeat/community',
+    }
+    script.onload = function () {
+      ;((window.gitter = {}).chat = {}).options = {
+        room: 'hertzbeat/community',
+      }
+    }
+    document.body.appendChild(script)
+  })
 }
@@ -3915,6 +3915,13 @@ dom-serializer@^2.0.0:
    domhandler "^5.0.2"
    entities "^4.2.0"

+dom7@^4.0.2:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -7857,6 +7864,11 @@ sprintf-js@~1.0.2:
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==

+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
  version "0.1.8"
  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -8093,6 +8105,14 @@ svgo@^2.7.0, svgo@^2.8.0:
    picocolors "^1.0.0"
    stable "^0.1.8"

+swiper@^7.0.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-7.4.1.tgz#99fc586d1335b45250d2c6b3128dc91f8047d3e7"
+  integrity sha512-dhbL4tpYFvHug1J7GnKElfTi6EYhlZy/vNZRhHkWFyUsWZ1Vovipxj3la5gqllMogygXJMe3zvVv+f6eppvWiA==
+  dependencies:
+    dom7 "^4.0.2"
+    ssr-window "^4.0.2"
+
 tapable@^1.0.0:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"