diff --git a/hooks/useAdjustStyle.js b/hooks/useAdjustStyle.js new file mode 100644 index 00000000..4cd6f880 --- /dev/null +++ b/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; diff --git a/pages/_app.js b/pages/_app.js index 2d9699e5..82b4ca72 100644 --- a/pages/_app.js +++ b/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