封装isBroswer()

components/NotionPage.js

@@ -2,6 +2,7 @@ import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
 import mediumZoom from 'medium-zoom'
 import React from 'react'
+import { isBrowser } from '@/lib/utils'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false }
@@ -27,7 +28,7 @@ const NotionPage = ({ post }) => {
     return <>{post?.summary || ''}</>
   }
 
-  const zoom = typeof window !== 'undefined' && mediumZoom({
+  const zoom = isBrowser() && mediumZoom({
     container: '.notion-viewport',
     background: 'rgba(0, 0, 0, 0.2)',
     margin: getMediumZoomMargin()
@@ -39,7 +40,7 @@ const NotionPage = ({ post }) => {
     addWatch4Dom()
   }, [])
   setTimeout(() => {
-    if (typeof document !== 'undefined') {
+    if (isBrowser()) {
       // 将相册gallery下的图片加入放大功能
       const imgList = document.querySelectorAll('.notion-collection-card-cover img')
       if (imgList && zoomRef.current) {

components/SideBarDrawer.js

@@ -24,22 +24,20 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
 
   // 点击按钮更改侧边抽屉状态
   const switchSideDrawerVisible = (showStatus) => {
-    if (window) {
+    if (showStatus) {
-      if (showStatus) {
+      onOpen()
-        onOpen()
+    } else {
-      } else {
+      onClose()
-        onClose()
+    }
-      }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
-      const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
-      const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
-      if (showStatus) {
+    if (showStatus) {
-        sideBarDrawer.classList.replace('-ml-80', 'ml-0')
+      sideBarDrawer.classList.replace('-ml-80', 'ml-0')
-        sideBarDrawerBackground.classList.replace('hidden', 'block')
+      sideBarDrawerBackground.classList.replace('hidden', 'block')
-      } else {
+    } else {
-        sideBarDrawer.classList.replace('ml-0', '-ml-80')
+      sideBarDrawer.classList.replace('ml-0', '-ml-80')
-        sideBarDrawerBackground.classList.replace('block', 'hidden')
+      sideBarDrawerBackground.classList.replace('block', 'hidden')
-      }
     }
   }
 

lib/lang.js

@@ -2,7 +2,7 @@ import zhCN from './lang/zh-CN'
 import enUS from './lang/en-US'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
-import { mergeDeep } from './utils'
+import { isBrowser, mergeDeep } from './utils'
 const lang = {
   'en-US': enUS,
   'zh-CN': zhCN,
@@ -45,7 +45,7 @@ export function generateLocaleDict (langString) {
  * 根据用户当前浏览器语言进行切换
  */
 export function initLocale (locale, changeLocale) {
-  if (typeof window !== 'undefined') {
+  if (isBrowser()) {
     const targetLocale = generateLocaleDict(window.navigator.language)
     if (JSON.stringify(locale) !== JSON.stringify(targetLocale)) {
       changeLocale(targetLocale)

lib/notion/getPostBlocks.js

@@ -38,6 +38,7 @@ async function getPageWithRetry(id, from, retryAttempts = 3) {
       console.info('[响应成功]:', `from:${from}`, `id:${id}`)
       return pageData
     } catch (e) {
+      console.warn('[响应异常]:', e)
       await delay(1000)
       const cacheKey = 'page_block_' + id
       const pageBlock = await getDataFromCache(cacheKey)

lib/utils.js

@@ -32,7 +32,7 @@ export function loadExternalResource(url, type) {
  * @returns
  */
 export function getQueryVariable(variable) {
-  const query = typeof window !== 'undefined' ? window.location.search.substring(1) : ''
+  const query = isBrowser() ? window.location.search.substring(1) : ''
   const vars = query.split('&')
   for (let i = 0; i < vars.length; i++) {
     const pair = vars[i].split('=')
@@ -99,3 +99,9 @@ export function deepClone(obj) {
  * @returns
  */
 export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+/**
+ * 判断是否客户端
+ * @returns {boolean}
+ */
+export const isBrowser = () => typeof window !== 'undefined'

pages/[slug].js

@@ -5,6 +5,7 @@ import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 import React from 'react'
 import { useRouter } from 'next/router'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 根据notion的slug访问页面，针对类型为Page的页面
@@ -20,7 +21,7 @@ const Slug = props => {
     changeLoadingState(true)
     const router = useRouter()
     setTimeout(() => {
-      if (typeof document !== 'undefined') {
+      if (isBrowser()) {
         const article = document.getElementById('container')
         if (!article) {
           router.push('/404').then(() => {

pages/article/[slug].js

@@ -6,6 +6,7 @@ import * as ThemeMap from '@/themes'
 import React from 'react'
 import { idToUuid } from 'notion-utils'
 import { useRouter } from 'next/router'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 根据notion的slug访问页面
@@ -21,7 +22,7 @@ const Slug = props => {
     changeLoadingState(true)
     const router = useRouter()
     setTimeout(() => {
-      if (typeof document !== 'undefined') {
+      if (isBrowser()) {
         const article = document.getElementById('container')
         if (!article) {
           router.push('/404').then(() => {

pages/index.js

@@ -27,7 +27,7 @@ export async function getStaticProps() {
   if (BLOG.POST_LIST_STYLE !== 'page') {
     postsToShow = Array.from(allPosts)
   } else {
-    postsToShow = allPosts.slice(
+    postsToShow = allPosts?.slice(
       BLOG.POSTS_PER_PAGE * (page - 1),
       BLOG.POSTS_PER_PAGE * page
     )

themes/example/LayoutSearch.js

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import SearchInput from './components/SearchInput'
 import LayoutBase from './LayoutBase'
+import { isBrowser } from '@/lib/utils'
 
 export const LayoutSearch = props => {
   const { keyword, posts } = props
@@ -12,7 +13,7 @@ export const LayoutSearch = props => {
 
   useEffect(() => {
     setTimeout(() => {
-      const container = typeof document !== 'undefined' && document.getElementById('container')
+      const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
         const re = new RegExp(`${keyword}`, 'gim')
         container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)

themes/fukasawa/LayoutArchive.js

@@ -25,16 +25,14 @@ export const LayoutArchive = (props) => {
   })
 
   useEffect(() => {
-    if (window) {
+    const anchor = window.location.hash
-      const anchor = window.location.hash
+    if (anchor) {
-      if (anchor) {
+      setTimeout(() => {
-        setTimeout(() => {
+        const anchorElement = document.getElementById(anchor.substring(1))
-          const anchorElement = document.getElementById(anchor.substring(1))
+        if (anchorElement) {
-          if (anchorElement) {
+          anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
-            anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
+        }
-          }
+      }, 300)
-        }, 300)
-      }
     }
   }, [])
   return <LayoutBase {...props}>

themes/fukasawa/LayoutSearch.js

@@ -2,6 +2,7 @@ import LayoutBase from './LayoutBase'
 import BlogListPage from './components/BlogListPage'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import { isBrowser } from '@/lib/utils'
 
 export const LayoutSearch = (props) => {
   const { keyword } = props
@@ -9,7 +10,7 @@ export const LayoutSearch = (props) => {
   const currentSearch = keyword || router?.query?.s
   useEffect(() => {
     setTimeout(() => {
-      const container = typeof document !== 'undefined' && document.getElementById('container')
+      const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
         const re = new RegExp(`${currentSearch}`, 'gim')
         container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`)

themes/hexo/Layout404.js

@@ -7,13 +7,11 @@ export const Layout404 = props => {
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
-      if (window) {
+      const article = typeof document !== 'undefined' && document.getElementById('container')
-        const article = typeof document !== 'undefined' && document.getElementById('container')
+      if (!article) {
-        if (!article) {
+        router.push('/').then(() => {
-          router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
-            // console.log('找不到页面', router.asPath)
+        })
-          })
-        }
       }
     }, 3000)
   })

themes/hexo/LayoutArchive.js

@@ -27,16 +27,14 @@ export const LayoutArchive = (props) => {
   })
 
   useEffect(() => {
-    if (window) {
+    const anchor = window.location.hash
-      const anchor = window.location.hash
+    if (anchor) {
-      if (anchor) {
+      setTimeout(() => {
-        setTimeout(() => {
+        const anchorElement = document.getElementById(anchor.substring(1))
-          const anchorElement = document.getElementById(anchor.substring(1))
+        if (anchorElement) {
-          if (anchorElement) {
+          anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
-            anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
+        }
-          }
+      }, 300)
-        }, 300)
-      }
     }
   }, [])
   return <LayoutBase {...props} >

themes/hexo/LayoutIndex.js

@@ -4,9 +4,11 @@ import BlogPostListScroll from './components/BlogPostListScroll'
 import Header from './components/Header'
 import CONFIG_HEXO from './config_hexo'
 import LayoutBase from './LayoutBase'
+import React from 'react'
 
 export const LayoutIndex = (props) => {
   return <LayoutBase {...props} headerSlot={CONFIG_HEXO.HOME_BANNER_ENABLE && <Header {...props} />}>
+
     {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
   </LayoutBase>
 }

themes/hexo/LayoutSlug.js

@@ -11,6 +11,7 @@ import NotionPage from '@/components/NotionPage'
 import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
 import ArticleRecommend from './components/ArticleRecommend'
+import { isBrowser } from '@/lib/utils'
 
 export const LayoutSlug = props => {
   const { post, lock, validPassword } = props
@@ -30,7 +31,7 @@ export const LayoutSlug = props => {
   }
 
   const drawerRight = useRef(null)
-  const targetRef = typeof window !== 'undefined' ? document.getElementById('container') : null
+  const targetRef = isBrowser() ? document.getElementById('container') : null
 
   const floatSlot = <>
     {post?.toc?.length > 1 && <div className="block lg:hidden">

themes/hexo/components/Header.js

@@ -90,10 +90,8 @@ const Header = props => {
 
   function updateHeaderHeight () {
     setTimeout(() => {
-      if (window) {
+      const wrapperElement = document.getElementById('wrapper')
-        const wrapperElement = document.getElementById('wrapper')
+      wrapperTop = wrapperElement?.offsetTop
-        wrapperTop = wrapperElement?.offsetTop
-      }
     }, 500)
   }
 

themes/hexo/components/Progress.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 顶部页面阅读进度条
@@ -9,7 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const currentRef = targetRef?.current || targetRef
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
-    const target = currentRef || (typeof document !== 'undefined' && document.getElementById('container'))
+    const target = currentRef || (isBrowser() && document.getElementById('container'))
     if (target) {
       const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset

themes/medium/LayoutSearch.js

@@ -5,13 +5,14 @@ import TagGroups from './components/TagGroups'
 import CategoryGroup from './components/CategoryGroup'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import { useEffect } from 'react'
+import { isBrowser } from '@/lib/utils'
 
 export const LayoutSearch = (props) => {
   const { locale } = useGlobal()
   const { keyword } = props
   useEffect(() => {
     setTimeout(() => {
-      const container = typeof document !== 'undefined' && document.getElementById('container')
+      const container = isBrowser() && document.getElementById('container')
       if (container && container.innerHTML) {
         const re = new RegExp(`${keyword}`, 'gim')
         container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)

themes/medium/components/Progress.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 顶部页面阅读进度条
@@ -9,7 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const currentRef = targetRef?.current || targetRef
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
-    const target = currentRef || (typeof document !== 'undefined' && document.getElementById('container'))
+    const target = currentRef || (isBrowser() && document.getElementById('container'))
     if (target) {
       const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset

themes/next/Layout404.js

@@ -1,19 +1,18 @@
 import { useRouter } from 'next/router'
 import LayoutBase from './LayoutBase'
 import { useEffect } from 'react'
+import { isBrowser } from '@/lib/utils'
 
 export const Layout404 = props => {
   const router = useRouter()
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
-      if (window) {
+      const article = isBrowser() && document.getElementById('container')
-        const article = typeof document !== 'undefined' && document.getElementById('container')
+      if (!article) {
-        if (!article) {
+        router.push('/').then(() => {
-          router.push('/').then(() => {
+          // console.log('找不到页面', router.asPath)
-            // console.log('找不到页面', router.asPath)
+        })
-          })
-        }
       }
     }, 3000)
   }, [])

themes/next/LayoutArchive.js

@@ -26,16 +26,14 @@ export const LayoutArchive = (props) => {
   })
 
   useEffect(() => {
-    if (window) {
+    const anchor = window.location.hash
-      const anchor = window.location.hash
+    if (anchor) {
-      if (anchor) {
+      setTimeout(() => {
-        setTimeout(() => {
+        const anchorElement = document.getElementById(anchor.substring(1))
-          const anchorElement = document.getElementById(anchor.substring(1))
+        if (anchorElement) {
-          if (anchorElement) {
+          anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
-            anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
+        }
-          }
+      }, 300)
-        }, 300)
-      }
     }
   }, [])
 

themes/next/LayoutSearch.js

@@ -2,12 +2,13 @@ import LayoutBase from './LayoutBase'
 import StickyBar from './components/StickyBar'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
 
 export const LayoutSearch = (props) => {
   const { locale } = useGlobal()
   const { posts, keyword } = props
   setTimeout(() => {
-    const container = typeof document !== 'undefined' && document.getElementById('container')
+    const container = isBrowser() && document.getElementById('container')
     if (container && container.innerHTML) {
       const re = new RegExp(`${keyword}`, 'gim')
       container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)

themes/next/LayoutSlug.js

@@ -8,6 +8,7 @@ import TocDrawer from './components/TocDrawer'
 import { useRef } from 'react'
 import CONFIG_NEXT from './config_next'
 import { ArticleLock } from './components/ArticleLock'
+import { isBrowser } from '@/lib/utils'
 
 export const LayoutSlug = (props) => {
   const { post, latestPosts, lock, validPassword } = props
@@ -26,7 +27,7 @@ export const LayoutSlug = (props) => {
   }
 
   const drawerRight = useRef(null)
-  const targetRef = typeof window !== 'undefined' ? document.getElementById('container') : null
+  const targetRef = isBrowser() ? document.getElementById('container') : null
   const floatSlot = post?.toc?.length > 1
     ? <div className='block lg:hidden'><TocDrawerButton onClick={() => {
       drawerRight?.current?.handleSwitchVisible()

themes/next/components/Header.js

@@ -74,10 +74,8 @@ export default function Header(props) {
 
   function updateHeaderHeight() {
     setTimeout(() => {
-      if (window) {
+      const wrapperElement = document.getElementById('wrapper')
-        const wrapperElement = document.getElementById('wrapper')
+      wrapperTop = wrapperElement.offsetTop
-        wrapperTop = wrapperElement.offsetTop
-      }
     }, 500)
   }
 

themes/next/components/Live2DWaifu.js

@@ -4,9 +4,7 @@ import { loadExternalResource } from '@/lib/utils'
 
 export default function Live2DWife() {
   useEffect(() => {
-    if (window) {
+    initLive2DWife()
-      initLive2DWife()
-    }
   }, [])
   return <>
     <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" /></Head>

themes/next/components/Progress.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 顶部页面阅读进度条
@@ -9,7 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const currentRef = targetRef?.current || targetRef
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
-    const target = currentRef || (typeof document !== 'undefined' && document.getElementById('container'))
+    const target = currentRef || (isBrowser() && document.getElementById('container'))
     if (target) {
       const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset

themes/next/components/RewardButton.js

@@ -8,14 +8,10 @@ import Image from 'next/image'
  */
 const RewardButton = () => {
   const openPopover = () => {
-    if (window) {
+    document.getElementById('reward-qrcode').classList.remove('hidden')
-      document.getElementById('reward-qrcode').classList.remove('hidden')
-    }
   }
   const closePopover = () => {
-    if (window) {
+    document.getElementById('reward-qrcode').classList.add('hidden')
-      document.getElementById('reward-qrcode').classList.add('hidden')
-    }
   }
   return (
     <div className='justify-center'>

themes/next/components/SideBarDrawer.js

@@ -33,17 +33,15 @@ const SideBarDrawer = ({ post, cRef, tags, slot, categories, currentCategory })
 
   // 点击按钮更改侧边抽屉状态
   const switchSideDrawerVisible = (showStatus) => {
-    if (window) {
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
-      const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
-      const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
-      if (showStatus) {
+    if (showStatus) {
-        sideBarDrawer.classList.replace('-ml-80', 'ml-0')
+      sideBarDrawer.classList.replace('-ml-80', 'ml-0')
-        sideBarDrawerBackground.classList.replace('hidden', 'block')
+      sideBarDrawerBackground.classList.replace('hidden', 'block')
-      } else {
+    } else {
-        sideBarDrawer.classList.replace('ml-0', '-ml-80')
+      sideBarDrawer.classList.replace('ml-0', '-ml-80')
-        sideBarDrawerBackground.classList.replace('block', 'hidden')
+      sideBarDrawerBackground.classList.replace('block', 'hidden')
-      }
     }
   }
 

themes/next/components/WordCount.js

@@ -18,17 +18,15 @@ export default function WordCount() {
  * 更新字数统计和阅读时间
  */
 function countWords() {
-  if (window) {
+  const articleElement = document.getElementById('notion-article')
-    const articleElement = document.getElementById('notion-article')
+  if (articleElement) {
-    if (articleElement) {
+    const articleText = deleteHtmlTag(articleElement.innerHTML)
-      const articleText = deleteHtmlTag(articleElement.innerHTML)
+    const wordCount = fnGetCpmisWords(articleText)
-      const wordCount = fnGetCpmisWords(articleText)
+    // 阅读速度 300-500每分钟
-      // 阅读速度 300-500每分钟
+    document.getElementById('wordCount').innerHTML = wordCount
-      document.getElementById('wordCount').innerHTML = wordCount
+    document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
-      document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
+    const wordCountWrapper = document.getElementById('wordCountWrapper')
-      const wordCountWrapper = document.getElementById('wordCountWrapper')
+    wordCountWrapper.classList.remove('hidden')
-      wordCountWrapper.classList.remove('hidden')
-    }
   }
 }