Merge pull request #1821 from RylanBot/patch

Fix：callout 图片溢出

hooks/useAdjustStyle.js

@@ -0,0 +1,33 @@
+import { isBrowser } from '@/lib/utils';
+import { useEffect } from 'react';
+
+const useAdjustStyle = () => {
+    /**
+     * 避免 callout 含有图片时溢出撑开父容器
+     */
+    const adjustCalloutImg = () => {
+        const callOuts = document.querySelectorAll('.notion-callout-text');
+        callOuts.forEach((callout) => {
+            const images = callout.querySelectorAll('figure.notion-asset-wrapper.notion-asset-wrapper-image > div');
+            const calloutWidth = callout.offsetWidth;
+            images.forEach((container) => {
+                const imageWidth = container.offsetWidth;
+                if (imageWidth + 50 > calloutWidth) {
+                    container.style.setProperty('width', '100%');
+                }
+            });
+        });
+    };
+
+    useEffect(() => {
+        if (isBrowser) {
+            adjustCalloutImg();
+            window.addEventListener('resize', adjustCalloutImg);
+            return () => {
+                window.removeEventListener('resize', adjustCalloutImg);
+            };
+        }
+    }, []);
+};
+
+export default useAdjustStyle;

pages/_app.js

@@ -13,17 +13,16 @@ import { getGlobalLayoutByTheme } from '@/themes/theme'
 import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import { getQueryParam } from '../lib/utils'
+import useAdjustStyle from '@/hooks/useAdjustStyle'
 
 // 各种扩展插件 这个要阻塞引入
 import ExternalPlugins from '@/components/ExternalPlugins'
 import { THEME } from '@/blog.config'
 
 const MyApp = ({ Component, pageProps }) => {
-  /**
-   * 首页布局
-   * @param {*} props
-   * @returns
-   */
+  // 一些可能出现 bug 的样式，可以统一放入该钩子进行调整
+  useAdjustStyle();
+
   const route = useRouter()
   const queryParam = useMemo(() => {
     return getQueryParam(route.asPath, 'theme') || THEME