diff --git a/scripts/wiki/template.mdx b/scripts/wiki/template.mdx
index 544c1c39f..62afd15a2 100644
--- a/scripts/wiki/template.mdx
+++ b/scripts/wiki/template.mdx
@@ -5,11 +5,14 @@ id: "<%= id %>"
 hide_table_of_contents: true
 ---
 
-import {ArticleMeta} from '@site/src/components/article-meta'
+import { ArticleMeta } from "@site/src/components/article-meta";
+import { AIContent } from "@site/src/components/ai-content";
 
 # <%= title %>
 
 <ArticleMeta id={<%= id %>} updatedAt={'<%=contentUpdatedAt%>'} />
 <div className='border-solid border-b border-t-0 my-4 border-[var(--ifm-color-gray-300)]' />
 
-<%= jsxBody || jsxDesc %>
+<%= jsxDesc %>
+
+<AIContent content={`<%=jsxBody%>`} id={<%= id %>} />
diff --git a/src/api.ts b/src/api.ts
index 1688b73be..05af1b2a0 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -3,13 +3,12 @@ import axios, { AxiosInstance, ResponseType } from "axios";
 const defaultOptions = {
   timeout: 60 * 1000,
   responseType: "json" as ResponseType,
-  withCredentials: true
+  withCredentials: true,
 };
 
-
 const axiosInstance: AxiosInstance = axios.create(defaultOptions);
 axiosInstance.interceptors.response.use(
-  response => {
+  (response) => {
     const res = response.data;
 
     // code === 0 为正常返回
@@ -24,15 +23,21 @@ axiosInstance.interceptors.response.use(
     // 其它未知错误，原样返回
     return Promise.reject(res);
   },
-  error => {
+  (error) => {
     return Promise.reject(error);
   }
 );
 export function post(url, params = {}) {
   return axiosInstance.request({
-      url,
-      method: "post",
-      params
-    }
-  );
+    url,
+    method: "post",
+    params,
+  });
+}
+export function get(url, params = {}) {
+  return axiosInstance.request({
+    url,
+    method: "GET",
+    params,
+  });
 }
diff --git a/src/components/ai-content/index.tsx b/src/components/ai-content/index.tsx
new file mode 100644
index 000000000..f9c67fdd6
--- /dev/null
+++ b/src/components/ai-content/index.tsx
@@ -0,0 +1,64 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { get } from "@site/src/api";
+import React, { useEffect, useState } from "react";
+import { useDefaultLocale } from "@site/src/utils";
+
+interface AIContentProps {
+  content?: string;
+  id: number;
+}
+const LocalesMap = {
+  aiGen: {
+    "zh-CN": "以下内容是 AI 的进一步解读",
+    "zh-HK": "以下內容是 AI 的進一步解讀",
+    en: "The following content is a further interpretation by AI.",
+  },
+  disclaimer: {
+    "zh-CN": "免责声明",
+    "zh-HK": "免責聲明",
+    en: "Disclaimer",
+  },
+};
+export const AIContent: React.FC<AIContentProps> = ({ content, id }) => {
+  const [AIContent, setAIContent] = useState(content);
+  const locale = useDefaultLocale() || "en";
+
+  const {
+    siteConfig: {
+      customFields: { apiProxyUrl },
+    },
+  } = useDocusaurusContext();
+
+  useEffect(() => {
+    if (!apiProxyUrl || !id || AIContent) return;
+
+    get(`${apiProxyUrl}/v1/social/wiki/content`, { id }).then((resp) => {
+      const { data } = resp;
+      if (data?.content) {
+        setAIContent(data.content);
+      }
+    });
+  }, [apiProxyUrl, id]);
+
+  if (!AIContent) return <></>;
+  return (
+    <div className="ai-content pt-8 rounded-lg">
+      <div className="flex items-center space-x-4 pb-3 mb-3 border-solid border-b border-t-0 border-r-0 border-l-0 border-[var(--ifm-color-gray-300)]">
+        <img
+          src="https://assets.lbctrl.com/uploads/831466be-e4f8-46a7-aa0b-efcda7a424ff/portai.png"
+          alt="port-ai"
+          className="w-7 h-7 rounded-full"
+        />
+        <span className="text-sm">{LocalesMap.aiGen[locale]}</span>
+      </div>
+      <div dangerouslySetInnerHTML={{ __html: AIContent }}></div>
+      <a
+        href="https://support.longbridgewhale.com/topics/misc/portaidisclaimer"
+        className="text-sm text-[#37a0ff]"
+        target="_blank"
+      >
+        {LocalesMap.disclaimer[locale]}
+      </a>
+    </div>
+  );
+};
diff --git a/src/components/article-meta/index.tsx b/src/components/article-meta/index.tsx
index 7dfd0f1d9..725487ffd 100644
--- a/src/components/article-meta/index.tsx
+++ b/src/components/article-meta/index.tsx
@@ -1,23 +1,48 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { post } from "@site/src/api";
+import { post, get } from "@site/src/api";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { translate } from "@docusaurus/Translate";
+import { useDefaultLocale } from "@site/src/utils";
 
 interface IArticleMetaProps {
   updatedAt: string | null;
   id: number;
 }
 
+const LocalesMap = {
+  peopleLearned: {
+    "zh-CN": "人学过",
+    "zh-HK": "人學過",
+    en: "People learned",
+  },
+  aiGen: {
+    "zh-CN": "AI 解读",
+    "zh-HK": "AI 解读",
+    en: "AI analysis",
+  },
+  aiGenUnderReview: {
+    "zh-CN": "审核中，通过后可查看新内容",
+    "zh-HK": "審核中，通過後可查看新內容",
+    en: "Under review, content will be available after approval.",
+  },
+};
+
 export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
   const { updatedAt, id } = props;
   const [viewCount, setViewCount] = useState(0);
+  const [AIContent, setAIContent] = useState("");
+  const [aiGen, setAIGen] = useState(false);
+  const [aiGenLoading, setAIGenLoading] = useState(false);
+  const locale = useDefaultLocale() || "en";
   // translate({
   //   id: "theme.docs.paginator.navAriaLabel",
   //   message: "Docs pages",
   //   description: "The ARIA label for the docs pagination"
   // });
   const {
-    siteConfig: { customFields: { apiProxyUrl } }
+    siteConfig: {
+      customFields: { apiProxyUrl },
+    },
   } = useDocusaurusContext();
 
   useEffect(() => {
@@ -28,21 +53,34 @@ export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
       if (data?.pv) {
         setViewCount(data.pv);
       }
+      if (data?.body) {
+        setAIContent(data.body);
+      }
     });
   }, [apiProxyUrl, id]);
 
-  const onClickCopySection = useCallback(() => {
+  const postAI = () => {
+    setAIGenLoading(true);
+    setAIGen(true);
+    get(`${apiProxyUrl}/v1/social/wiki/content`, { id })
+      .then((resp) => {
+        const { data } = resp;
+      })
+      .finally(() => {
+        setAIGenLoading(false);
+      });
+  };
 
-  }, []);
+  const onClickCopySection = useCallback(() => {}, []);
 
   useEffect(() => {
     // @ts-ignore
     const clipboard = new ClipboardJS("#copy_trigger");
-    clipboard.on("success", function(e) {
+    clipboard.on("success", function (e) {
       e.clearSelection();
     });
 
-    clipboard.on("error", function(e) {
+    clipboard.on("error", function (e) {
       console.error("Action:", e.action);
       console.error("Trigger:", e.trigger);
     });
@@ -51,17 +89,45 @@ export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
   return (
     <div className={"article-meta flex items-center justify-between text-sm"}>
       <div className="info">
-        {!!viewCount &&
-          <span className={"view-count"}>{viewCount} 人学过 .</span>
-        }
-        <span className={"updated-at"}> {translate({
-          id: "article.meta.updated_at"
-        }, { datetime: updatedAt })}</span>
+        {!!viewCount && (
+          <span className={"view-count"}>
+            {viewCount} {LocalesMap.peopleLearned[locale]} .
+          </span>
+        )}
+        <span className={"updated-at"}>
+          {" "}
+          {translate(
+            {
+              id: "article.meta.updated_at",
+            },
+            { datetime: updatedAt }
+          )}
+        </span>
       </div>
       <div className="actions">
         {/*<div className="copy-section" id={"copy_trigger"} onClick={onClickCopySection}>*/}
         {/*  <div className="copy-link" />*/}
         {/*</div>*/}
+
+        {/* 没有 AI 内容并且没点击过生成 */}
+        {/* {!AIContent && aiGen && (
+          <div className="text-xs">{LocalesMap.aiGenUnderReview[locale]}</div>
+        )}
+        {!AIContent && !aiGen && (
+          <div className="relative group">
+            <span className="px-2 py-1 hover:bg-gray-200 rounded cursor-pointer flex items-center hover:text-white justify-center">
+              ···
+            </span>
+            <div className="absolute z-[-1] opacity-0 group-hover:z-50 group-hover:opacity-100 whitespace-nowrap">
+              <button
+                className="outline-none bg-white px-2 py-1 rounded border-[var(--ifm-color-gray-300)] border-solid border hover:bg-opacity-80 cursor-pointer"
+                onClick={postAI}
+              >
+                {LocalesMap.aiGen[locale]}
+              </button>
+            </div>
+          </div>
+        )} */}
       </div>
     </div>
   );
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
new file mode 100644
index 000000000..6a7119ac0
--- /dev/null
+++ b/src/components/footer/index.tsx
@@ -0,0 +1,229 @@
+import React from "react";
+import { useDefaultLocale } from "@site/src/utils";
+
+const LinksMap = [
+  {
+    kindName: {
+      "zh-CN": "社区资讯",
+      "zh-HK": "社區資訊",
+      en: "Community",
+    },
+    links: [
+      {
+        text: {
+          "zh-CN": "社群",
+          "zh-HK": "社群",
+          en: "Community",
+        },
+        href: "https://longportapp.com",
+      },
+      {
+        text: {
+          "zh-CN": "资讯",
+          "zh-HK": "資訊",
+          en: "News",
+        },
+        href: "https://longportapp.com/news",
+      },
+      {
+        text: {
+          "zh-CN": "海豚投研",
+          "zh-HK": "海豚投研",
+          en: "Dolphin",
+        },
+        href: "https://longportapp.com/news/dolphin",
+      },
+      {
+        text: {
+          "zh-CN": "每日必读",
+          "zh-HK": "每日必讀",
+          en: "Daily Report",
+        },
+        href: "https://longportapp.com/news/node/daily",
+      },
+    ],
+  },
+  {
+    kindName: {
+      "zh-CN": "市场",
+      "zh-HK": "市场",
+      en: "Market",
+    },
+    links: [
+      {
+        text: {
+          "zh-CN": "市场",
+          "zh-HK": "市场",
+          en: "Market",
+        },
+        href: "https://longportapp.com/markets",
+      },
+      {
+        text: {
+          "zh-CN": "选股器",
+          "zh-HK": "选股器",
+          en: "Screener",
+        },
+        href: "https://longportapp.com/screener",
+      },
+    ],
+  },
+  {
+    kindName: {
+      "zh-CN": "下载",
+      "zh-HK": "下载",
+      en: "Download",
+    },
+    links: [
+      {
+        text: {
+          "zh-CN": "下载",
+          "zh-HK": "下载",
+          en: "Download",
+        },
+        href: "https://longportapp.com/download",
+      },
+      {
+        text: {
+          "zh-CN": "HK 下载",
+          "zh-HK": "HK 下载",
+          en: "HK Download",
+        },
+        href: "https://longbridge.com/hk/download",
+      },
+      {
+        text: {
+          "zh-CN": "SG 下载",
+          "zh-HK": "SG 下载",
+          en: "SG Download",
+        },
+        href: "https://longbridge.com/sg/download",
+      },
+    ],
+  },
+  {
+    kindName: {
+      "zh-CN": "PortAI",
+      "zh-HK": "PortAI",
+      en: "PortAI",
+    },
+    links: [
+      {
+        text: {
+          "zh-CN": "PortAI",
+          "zh-HK": "PortAI",
+          en: "PortAI",
+        },
+        href: "https://longportapp.com/portai",
+      },
+      {
+        text: {
+          "zh-CN": "LongPort AI",
+          "zh-HK": "LongPort AI",
+          en: "LongPort AI",
+        },
+        href: "https://longport.ai",
+      },
+    ],
+  },
+  {
+    kindName: {
+      "zh-CN": "开发",
+      "zh-HK": "开发",
+      en: "Developer",
+    },
+    links: [
+      {
+        text: {
+          "zh-CN": "开发者平台",
+          "zh-HK": "开发者平台",
+          en: "Developer",
+        },
+        href: "https://open.longportapp.com",
+      },
+    ],
+  },
+];
+
+const getBasePath = () => {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  const path = window.location.pathname.split("/learn/");
+  return `/learn/${path[1]}`;
+};
+const Footer: React.FC = () => {
+  const locale = useDefaultLocale() || "en";
+  let basePath = getBasePath();
+
+  const renderLinksMap = [...LinksMap];
+  if (basePath) {
+    renderLinksMap.push({
+      kindName: {
+        "zh-CN": "Wiki",
+        "zh-HK": "Wiki",
+        en: "Wiki",
+      },
+      links: [
+        {
+          text: {
+            "zh-CN": "简体中文",
+            "zh-HK": "简体中文",
+            en: "简体中文",
+          },
+          href: `/zh-CN${basePath}`,
+        },
+        {
+          text: {
+            "zh-CN": "繁體中文",
+            "zh-HK": "繁體中文",
+            en: "繁體中文",
+          },
+          href: `/zh-HK${basePath}`,
+        },
+        {
+          text: {
+            "zh-CN": "English",
+            "zh-HK": "English",
+            en: "English",
+          },
+          href: `/en${basePath}`,
+        },
+      ],
+    });
+  }
+
+  return (
+    <div className="footer-link mt-32 bg-[#fff] relative ">
+      <div className="divider bg-[var(--ifm-color-gray-300)] h-[1px] absolute left-[-9999px] right-[-9999px]"></div>
+      <div className="flex flex-col md:flex-row md:space-x-8 md:justify-between md:space-y-0 space-y-5 pt-8">
+        {renderLinksMap.map((kind, i) => {
+          return (
+            <div key={i} className="flex flex-col space-y-4">
+              <h4 className="text-sm text-[#333] mb-0">
+                {kind.kindName[locale]}
+              </h4>
+              <ul className="list-none p-0">
+                {kind.links.map((link, j) => {
+                  return (
+                    <li key={j}>
+                      <a
+                        href={link.href}
+                        className="text-xs text-[#333] hover:text-[#000]"
+                        target="_blank"
+                      >
+                        {link.text[locale]}
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/css/custom.scss b/src/css/custom.scss
index b65a5ee47..c655eff86 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -20,7 +20,7 @@
 @tailwind utilities;
 body {
   color: #222;
-  @apply bg-[#f8f9fa];
+  @apply bg-[#fff];
   h1 {
     text-transform: capitalize;
   }
@@ -134,6 +134,7 @@ body {
 }
 
 .main-wrapper {
+  overflow-x: hidden;
   .container {
     max-width: 780px;
   }
@@ -144,5 +145,5 @@ body {
 }
 
 .theme-doc-markdown.markdown {
-  @apply bg-[#f8f9fa];
+  @apply bg-[#fff];
 }
diff --git a/src/theme/DocRoot/Layout/Main/index.tsx b/src/theme/DocRoot/Layout/Main/index.tsx
index ec7db554e..b1e55bc63 100644
--- a/src/theme/DocRoot/Layout/Main/index.tsx
+++ b/src/theme/DocRoot/Layout/Main/index.tsx
@@ -9,6 +9,7 @@ import React from "react";
 import clsx from "clsx";
 import { useDocsSidebar } from "@docusaurus/theme-common/internal";
 import type { Props } from "@theme/DocRoot/Layout/Main";
+import Footer from "@site/src/components/footer";
 
 import styles from "./styles.module.css";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -33,13 +34,14 @@ export default function DocRootLayoutMain({
     >
       <div
         className={clsx(
-          "container sm:px-4 md:px-0 wiki-article-content mt-8 padding-top--md padding-bottom--lg",
+          "container sm:px-4 md:px-0 wiki-article-content mt-8 padding-top--md padding-bottom--lg flex flex-col justify-between",
           styles.docItemWrapper,
           hiddenSidebarContainer && styles.docItemWrapperEnhanced
         )}
         data-proxy={portAIProxyUrl}
       >
         {children}
+        <Footer />
       </div>
     </main>
   );