diff --git a/@antv/gatsby-theme-antv/site/components/ExternalLinkIcon.module.less b/@antv/gatsby-theme-antv/site/components/ExternalLinkIcon.module.less
new file mode 100644
index 00000000..d970911d
--- /dev/null
+++ b/@antv/gatsby-theme-antv/site/components/ExternalLinkIcon.module.less
@@ -0,0 +1,16 @@
+a {
+  .export svg {
+    width: 12px;
+    height: 12px;
+    margin-left: 3px;
+    opacity: 0.3;
+    position: relative;
+    top: 1.5px;
+    transition: all 0.3s;
+    margin-right: -6px;
+  }
+
+  &:hover .export svg {
+    opacity: 0.5;
+  }
+}
diff --git a/@antv/gatsby-theme-antv/site/components/ExternalLinkIcon.tsx b/@antv/gatsby-theme-antv/site/components/ExternalLinkIcon.tsx
new file mode 100644
index 00000000..cda7b1fe
--- /dev/null
+++ b/@antv/gatsby-theme-antv/site/components/ExternalLinkIcon.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ExternalLink from '../images/external-link.svg';
+import styles from './ExternalLinkIcon.module.less';
+
+const ExternalLinkIcon: React.FC = () => (
+  <i className={styles.export}>
+    <ExternalLink />
+  </i>
+);
+
+export default ExternalLinkIcon;
diff --git a/@antv/gatsby-theme-antv/site/components/Header.module.less b/@antv/gatsby-theme-antv/site/components/Header.module.less
index 549eef5e..950ce0c6 100644
--- a/@antv/gatsby-theme-antv/site/components/Header.module.less
+++ b/@antv/gatsby-theme-antv/site/components/Header.module.less
@@ -126,24 +126,9 @@
           transition: all 0.3s;
           display: block;
 
-          .export svg {
-            width: 12px;
-            height: 12px;
-            margin-left: 3px;
-            opacity: 0.3;
-            position: relative;
-            top: 1.5px;
-            transition: all 0.3s;
-            margin-right: -6px;
-          }
-
           &:hover {
             color: @primary-color;
           }
-
-          &:hover .export svg {
-            opacity: 0.5;
-          }
         }
 
         &:last-child {
diff --git a/@antv/gatsby-theme-antv/site/components/Header.tsx b/@antv/gatsby-theme-antv/site/components/Header.tsx
index 1c7991c6..b92a5482 100644
--- a/@antv/gatsby-theme-antv/site/components/Header.tsx
+++ b/@antv/gatsby-theme-antv/site/components/Header.tsx
@@ -10,11 +10,11 @@ import GitUrlParse from 'git-url-parse';
 import Search, { SearchProps } from './Search';
 import Products from './Products';
 import NavMenuItems, { Nav } from './NavMenuItems';
+import ExternalLinkIcon from './ExternalLinkIcon';
 import { getChinaMirrorHost } from '../utils';
 import { useLogoLink } from '../hooks';
 import AntvLogo from '../images/antv.svg';
 import TranslationIcon from '../images/translation.svg';
-import ExternalLink from '../images/external-link.svg';
 import styles from './Header.module.less';
 
 const { Option } = Select;
@@ -273,9 +273,7 @@ const Header: React.FC<HeaderProps> = ({
               }}
             >
               {t('国内镜像')}
-              <i className={styles.export}>
-                <ExternalLink />
-              </i>
+              <ExternalLinkIcon />
             </a>
           </li>
         </Popover>
diff --git a/@antv/gatsby-theme-antv/site/components/NavMenuItems.tsx b/@antv/gatsby-theme-antv/site/components/NavMenuItems.tsx
index 7fcf0340..d53ce04b 100644
--- a/@antv/gatsby-theme-antv/site/components/NavMenuItems.tsx
+++ b/@antv/gatsby-theme-antv/site/components/NavMenuItems.tsx
@@ -3,6 +3,7 @@ import { Link } from 'gatsby';
 import classNames from 'classnames';
 import shallowequal from 'shallowequal';
 import { useTranslation } from 'react-i18next';
+import ExternalLinkIcon from './ExternalLinkIcon';
 import styles from './Header.module.less';
 
 const getDocument = (navs: Nav[], slug = '') =>
@@ -36,7 +37,9 @@ const NavMenuItems: React.FC<NavMenuItemsProps> = ({ navs = [], path }) => {
   return (
     <>
       {navs.map((nav: Nav) => {
-        const href = `/${i18n.language}/${nav.slug}`;
+        const href = nav.slug.startsWith('http')
+          ? nav.slug
+          : `/${i18n.language}/${nav.slug}`;
         const title = capitalize(
           getDocument(navs, nav.slug).title[i18n.language],
         );
@@ -50,9 +53,10 @@ const NavMenuItems: React.FC<NavMenuItemsProps> = ({ navs = [], path }) => {
         });
         return (
           <li key={title} className={className}>
-            {nav.target === '_blank' ? (
+            {nav.target === '_blank' || href.startsWith('http') ? (
               <a href={href} target="_blank" rel="noopener noreferrer">
                 {title}
+                <ExternalLinkIcon />
               </a>
             ) : (
               <Link to={href}>{title}</Link>