Merge pull request #3490 from tangly1024/feat/lite-mode

starter主题新增lite模式，隐藏页头页脚便于嵌入

lib/global.js

@@ -31,6 +31,7 @@ export function GlobalContextProvider(props) {
   ) // 默认语言
   const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
   const [THEME_CONFIG, SET_THEME_CONFIG] = useState(null) // 主题配置
+  const [isLiteMode,setLiteMode] = useState(false)
 
   const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
@@ -85,10 +86,17 @@ export function GlobalContextProvider(props) {
   // 添加路由变化时的语言处理
   useEffect(() => {
     initLocale(router.locale, changeLang, updateLocale)
-  }, [router])
+    // 处理极简模式
+    if (router.query.lite && router.query.lite==='true') {
+      setLiteMode(true)
+    }
+}, [router])
 
+
+  // 首次加载成功
   useEffect(() => {
     initDarkMode(updateDarkMode, defaultDarkMode)
+    // 处理多语言自动重定向
     if (
       NOTION_CONFIG?.REDIRECT_LANG &&
       JSON.parse(NOTION_CONFIG?.REDIRECT_LANG)
@@ -107,6 +115,7 @@ export function GlobalContextProvider(props) {
         const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${themeStr}`
         router.push(newUrl)
       }
+
       if (!onLoading) {
         setOnLoading(true)
       }
@@ -134,6 +143,7 @@ export function GlobalContextProvider(props) {
   return (
     <GlobalContext.Provider
       value={{
+        isLiteMode,
         isLoaded,
         isSignedIn,
         user,

themes/starter/index.js

@@ -50,34 +50,49 @@ import { SVG404 } from './components/svg/SVG404'
  * @returns
  */
 const LayoutBase = props => {
-  const { children } = props
+    const { children } = props
+    // 极简模式，会隐藏掉页头页脚等组件，便于嵌入网页等功能 
+    const { isLiteMode } = useGlobal()
+    const router = useRouter()
 
-  // 加载wow动画
-  useEffect(() => {
-    loadWowJS()
-  }, [])
+    // 加载wow动画
+    useEffect(() => {
+        loadWowJS()
+    }, [])
 
-  return (
-    <div
-      id='theme-starter'
-      className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
-      <Style />
-      {/* 页头 */}
-      <Header {...props} />
+    // 特殊简化布局，如果识别到路由中有 ?lite=true，则给网页添加一些自定义的css样式，例如背景改成黑色
+    useEffect(() => {
+        const isLiteMode = router.query.lite === 'true'
+        console.log(router.query.lite, isLiteMode)
+        if (isLiteMode) {
+            document.body.style.backgroundColor = 'black'
+            document.body.style.color = 'white'
+        }
+    }, [])
 
-      <div id='main-wrapper' className='grow'>
-        {children}
-      </div>
+    return (
+        <div
+            id='theme-starter'
+            className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
+            <Style />
 
-      {/* 页脚 */}
-      <Footer {...props} />
+            {/* 页头 */}
+            {isLiteMode ? <></> : <Header {...props} />}
 
-      {/* 悬浮按钮 */}
-      <BackToTopButton />
+            <div id='main-wrapper' className='grow'>
+                {children}
+            </div>
 
-      {/* <MadeWithButton/> */}
-    </div>
-  )
+            {/* 页脚 */}
+            
+            {isLiteMode ? <></> : <Footer {...props} />}
+
+            {/* 悬浮按钮 */}
+            {isLiteMode ? <></> : <BackToTopButton />}
+
+            {/* <MadeWithButton/> */}
+        </div>
+    )
 }
 
 /**