diff --git a/.dumi/theme/slots/Content/ColumnCard.tsx b/.dumi/theme/slots/Content/ColumnCard.tsx
index f907bd8136..e1591bf110 100644
--- a/.dumi/theme/slots/Content/ColumnCard.tsx
+++ b/.dumi/theme/slots/Content/ColumnCard.tsx
@@ -4,6 +4,7 @@ import { Button, Card, Divider } from 'antd';
 import React from 'react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
+import JuejinLogo from './JuejinLogo';
 
 const ANTD_IMG_URL =
   'https://picx.zhimg.com/v2-3b2bca09c2771e7a82a81562e806be4d.jpg?source=d16d100b';
@@ -56,6 +57,8 @@ const useStyle = () => {
       text-overflow: ellipsis;
       white-space: nowrap;
       .logo {
+        width: 24px;
+        height: 24px;
         font-size: 24px;
         &.zhihu-logo {
           color: #056de8;
@@ -63,6 +66,9 @@ const useStyle = () => {
         &.yuque-logo {
           color: #00b96b;
         }
+        &.juejin-logo {
+          color: #1e80ff;
+        }
       }
       .arrowIcon {
         margin: 0 8px;
@@ -90,12 +96,14 @@ const locales = {
     bigTitle: '文章被以下专栏收录：',
     zhiHu: '一个 UI 设计体系',
     yuQue: 'Ant Design 官方专栏',
+    junjin: 'Ant Design 开源专栏',
     buttonText: '我有想法，去参与讨论',
   },
   en: {
     bigTitle: 'Articles are included in the column:',
     zhiHu: 'A UI design system',
     yuQue: 'Ant Design official column',
+    junjin: 'Ant Design Open Source Column',
     buttonText: 'Go to discuss',
   },
 };
@@ -103,12 +111,13 @@ const locales = {
 interface Props {
   zhihuLink?: string;
   yuqueLink?: string;
+  juejinLink?: string;
 }
 
-const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
+const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
   const [locale] = useLocale(locales);
   const { card, bigTitle, cardBody, left, title, subTitle, btn } = useStyle();
-  if (!zhihuLink && !yuqueLink) {
+  if (!zhihuLink && !yuqueLink && !juejinLink) {
     return null;
   }
   return (
@@ -137,7 +146,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
           <Button
             type="primary"
             css={btn}
-            icon={<ZhihuOutlined style={{ fontSize: 15 }} />}
+            icon={<ZhihuOutlined style={{ fontSize: 16 }} />}
             ghost
             target="_blank"
             href={zhihuLink}
@@ -171,7 +180,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
             <Button
               type="primary"
               css={btn}
-              icon={<YuqueOutlined style={{ fontSize: 15 }} />}
+              icon={<YuqueOutlined style={{ fontSize: 16 }} />}
               ghost
               target="_blank"
               href={yuqueLink}
@@ -181,6 +190,41 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
           </div>
         </>
       )}
+      {juejinLink && (
+        <>
+          <Divider />
+          <div css={cardBody}>
+            <div css={left}>
+              <img src={ANTD_IMG_URL} alt="antd" />
+              <div>
+                <p css={title}>Ant Design</p>
+                <div css={subTitle}>
+                  <JuejinLogo className="logo juejin-logo" />
+                  <RightOutlined className="arrowIcon" />
+                  <Button
+                    target="_blank"
+                    href="https://juejin.cn/column/7247354308258054200"
+                    className="zl-btn"
+                    type="link"
+                  >
+                    {locale.junjin}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <Button
+              type="primary"
+              css={btn}
+              icon={<JuejinLogo style={{ fontSize: 16, width: 16, height: 16 }} />}
+              ghost
+              target="_blank"
+              href={juejinLink}
+            >
+              {locale.buttonText}
+            </Button>
+          </div>
+        </>
+      )}
     </Card>
   );
 };
diff --git a/.dumi/theme/slots/Content/JuejinLogo.tsx b/.dumi/theme/slots/Content/JuejinLogo.tsx
new file mode 100644
index 0000000000..652aad3a95
--- /dev/null
+++ b/.dumi/theme/slots/Content/JuejinLogo.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const JuejinLogo: React.FC<Props> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="28"
+      viewBox="0 0 36 28"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default JuejinLogo;
diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
index b593e5d7be..bb9cec4f24 100644
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@@ -273,10 +273,13 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
           ) : null}
           {!meta.frontmatter.__autoDescription && meta.frontmatter.description}
           {children}
-          {(meta.frontmatter?.zhihu_url || meta.frontmatter?.yuque_url) && (
+          {(meta.frontmatter?.zhihu_url ||
+            meta.frontmatter?.yuque_url ||
+            meta.frontmatter?.juejin_url) && (
             <ColumnCard
               zhihuLink={meta.frontmatter.zhihu_url}
               yuqueLink={meta.frontmatter.yuque_url}
+              juejinLink={meta.frontmatter.juejin_url}
             />
           )}
           {meta.frontmatter.filename && (
diff --git a/docs/blog/tree-shaking.en-US.md b/docs/blog/tree-shaking.en-US.md
index 29d4cd4533..f5596de0cf 100644
--- a/docs/blog/tree-shaking.en-US.md
+++ b/docs/blog/tree-shaking.en-US.md
@@ -1,7 +1,8 @@
 ---
 title: Bundle Size Optimization
-date: 2023-06-24
+date: 2023-06-25
 author: zombieJ
+juejin_url: https://juejin.cn/post/7248424501813674021
 ---
 
 In modern JS applications, unused module can be automatically removed by modular packaging tools. This process is called [Tree Shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). However, if you are already very familiar with it, you will find that it is not so perfect in reality. We still need some extra operations to achieve the best size optimization effect. Today, let's talk about a problem that ConfigProvider causes Tree Shaking to fail.
diff --git a/docs/blog/tree-shaking.zh-CN.md b/docs/blog/tree-shaking.zh-CN.md
index f0419dea6d..3971a2fd0a 100644
--- a/docs/blog/tree-shaking.zh-CN.md
+++ b/docs/blog/tree-shaking.zh-CN.md
@@ -1,7 +1,8 @@
 ---
 title: 打包体积优化
-date: 2023-06-24
+date: 2023-06-25
 author: zombieJ
+juejin_url: https://juejin.cn/post/7248424501813674021
 ---
 
 在现代 JS 应用中，通过模块化打包工具可以自动将一些未使用的模块代码去除，这个过程叫做 [Tree Shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)。不过如果你已经对此非常熟悉了，你会发现现实中它并不是那么完美，我们还需要一些额外的操作才能达到最佳的体积优化效果。今天，我们就来讲讲一个 ConfigProvider 导致的 Tree Shaking 失效的问题。