站点信息读取Notion数据

themes/hexo/Layout404.js

@@ -1,34 +1,15 @@
-import BLOG from '@/blog.config'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 import LayoutBase from './LayoutBase'
 
 export const Layout404 = props => {
-  const router = useRouter()
-  useEffect(() => {
-    // 延时3秒如果加载失败就返回首页
-    setTimeout(() => {
-      if (window) {
-        const article = document.getElementById('container')
-        if (!article) {
-          router.push('/').then(() => {
-            console.log('找不到页面', router.asPath)
-          })
-        }
-      }
-    }, 3000)
-  })
-
   return (
-    <LayoutBase {...props} meta={{ title: `${BLOG.TITLE} | 页面找不到啦` }}>
+    <LayoutBase {...props}>
       <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
         <div className="dark:text-gray-200">
           <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
-            <i className="mr-2 fas fa-spinner animate-spin" />
             404
           </h2>
           <div className="inline-block text-left h-32 leading-10 items-center">
-            <h2 className="m-0 p-0">页面无法加载，即将返回首页</h2>
+            <h2 className="m-0 p-0">页面未找到</h2>
           </div>
         </div>
       </div>

themes/hexo/LayoutArchive.js

@@ -1,5 +1,3 @@
-import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import { useEffect } from 'react'
 import BlogPostArchive from './components/BlogPostArchive'
 import Card from './components/Card'
@@ -7,7 +5,6 @@ import LayoutBase from './LayoutBase'
 
 export const LayoutArchive = (props) => {
   const { posts } = props
-  const { locale } = useGlobal()
   // 深拷贝
   const postsSortByDate = Object.create(posts)
 
@@ -18,12 +15,6 @@ export const LayoutArchive = (props) => {
     return dateB - dateA
   })
 
-  const meta = {
-    title: `${locale.NAV.ARCHIVE} | ${BLOG.TITLE}`,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
-
   const archivePosts = {}
 
   postsSortByDate.forEach(post => {
@@ -48,7 +39,7 @@ export const LayoutArchive = (props) => {
       }
     }
   }, [])
-  return <LayoutBase {...props} meta={meta}>
+  return <LayoutBase {...props} >
     <Card className='w-full'>
     <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 min-h-full">
         {Object.keys(archivePosts).map(archiveTitle => (

themes/hexo/LayoutBase.js

@@ -18,7 +18,7 @@ import { useGlobal } from '@/lib/global'
  * @constructor
  */
 const LayoutBase = (props) => {
-  const { children, headerSlot, floatSlot, meta } = props
+  const { children, headerSlot, floatSlot, meta, siteInfo } = props
   const [show, switchShow] = useState(false)
   // const [percent, changePercent] = useState(0) // 页面阅读百分比
   const rightAreaSlot = <Live2D/>
@@ -72,7 +72,7 @@ const LayoutBase = (props) => {
         </div>
       </div>
 
-    <Footer title={meta.title}/>
+    <Footer title={siteInfo.title}/>
 
   </div>)
 }

themes/hexo/LayoutCategory.js

@@ -1,17 +1,9 @@
-import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import LayoutBase from './LayoutBase'
 
-export const LayoutCategory = (props) => {
+export const LayoutCategory = props => {
   const { tags, posts, category } = props
-  const { locale } = useGlobal()
-  const meta = {
-    title: `${category} | ${locale.COMMON.CATEGORY} | ${BLOG.TITLE}`,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
-  return <LayoutBase {...props} meta={meta}>
+  return <LayoutBase {...props}>
       <BlogPostListScroll posts={posts} tags={tags} currentCategory={category}/>
   </LayoutBase>
 }

themes/hexo/LayoutCategoryIndex.js

@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import Card from './components/Card'
@@ -7,13 +6,8 @@ import LayoutBase from './LayoutBase'
 export const LayoutCategoryIndex = props => {
   const { categories } = props
   const { locale } = useGlobal()
-  const meta = {
-    title: `${locale.COMMON.CATEGORY} | ${BLOG.TITLE}`,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
   return (
-    <LayoutBase {...props} meta={meta}>
+    <LayoutBase {...props}>
       <Card className="w-full min-h-screen">
         <div className="dark:text-gray-200 mb-5 mx-3">
           <i className="mr-4 fas fa-th" />

themes/hexo/LayoutIndex.js

@@ -4,7 +4,7 @@ import CONFIG_HEXO from './config_hexo'
 import LayoutBase from './LayoutBase'
 
 export const LayoutIndex = (props) => {
-  return <LayoutBase {...props} headerSlot={CONFIG_HEXO.HOME_BANNER_ENABLE && <Header/>}>
+  return <LayoutBase {...props} headerSlot={CONFIG_HEXO.HOME_BANNER_ENABLE && <Header {...props}/>}>
       <BlogPostListPage {...props}/>
   </LayoutBase>
 }

themes/hexo/LayoutSlug.js

@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { getPageTableOfContents } from 'notion-utils'
 import 'prismjs'
 import 'prismjs/components/prism-bash'
@@ -18,12 +17,6 @@ import LayoutBase from './LayoutBase'
 
 export const LayoutSlug = props => {
   const { post, lock, validPassword } = props
-  const meta = {
-    title: `${post.title} | ${BLOG.TITLE}`,
-    description: post.summary,
-    type: 'article',
-    tags: post.tags
-  }
 
   if (!lock && post?.blockMap?.block) {
     post.content = Object.keys(post.blockMap.block)
@@ -48,7 +41,6 @@ export const LayoutSlug = props => {
     <LayoutBase
       headerSlot={<HeaderArticle post={post}/>}
       {...props}
-      meta={meta}
       showCategory={false}
       showTag={false}
       floatSlot={floatSlot}

themes/hexo/LayoutTag.js

@@ -1,19 +1,10 @@
-import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import LayoutBase from './LayoutBase'
 
 export const LayoutTag = (props) => {
   const { tags, posts, tag } = props
-  const { locale } = useGlobal()
 
-  const meta = {
-    title: `${tag} | ${locale.COMMON.TAGS} | ${BLOG.TITLE}`,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
-
-  return <LayoutBase {...props} meta={meta}>
+  return <LayoutBase {...props}>
       <BlogPostListScroll posts={posts} tags={tags} currentTag={tag}/>
    </LayoutBase>
 }

themes/hexo/LayoutTagIndex.js

@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Card from './components/Card'
 import TagItemMini from './components/TagItemMini'
@@ -7,13 +6,8 @@ import LayoutBase from './LayoutBase'
 export const LayoutTagIndex = props => {
   const { tags } = props
   const { locale } = useGlobal()
-  const meta = {
-    title: `${locale.COMMON.TAGS} | ${BLOG.TITLE}`,
-    description: BLOG.DESCRIPTION,
-    type: 'website'
-  }
   return (
-    <LayoutBase {...props} meta={meta}>
+    <LayoutBase {...props}>
       <Card className='w-full'>
         <div className="dark:text-gray-200 mb-5 ml-4">
           <i className="mr-4 fas fa-tag" />

themes/hexo/components/ArticleRecommend.js

@@ -25,7 +25,7 @@ export default function ArticleRecommend ({ recommendPosts }) {
         {recommendPosts.map(post => {
           const headerImage = post?.page_cover
             ? `url("${post.page_cover}")`
-            : `url("/${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+            : `url("/${BLOG.HOME_BANNER_IMAGE}")`
 
           return (
             <Link key={post.id} title={post.title} href={`${BLOG.PATH}/article/${post.slug}`} passHref>

themes/hexo/components/Header.js

@@ -1,4 +1,3 @@
-import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
@@ -12,10 +11,10 @@ let autoScroll = false
  *
  * @returns 头图
  */
-export default function Header () {
+const Header = props => {
   const [typed, changeType] = useState()
   const { isDarkMode } = useGlobal()
-
+  const { siteInfo } = props
   useEffect(() => {
     scrollTrigger()
     updateHeaderHeight()
@@ -102,11 +101,11 @@ export default function Header () {
       className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
       style={{
         backgroundImage:
-          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo.pageCover}")`
       }}
     >
       <div className="absolute flex flex-col h-full items-center justify-center w-full font-sans">
-        <div className='text-4xl md:text-5xl text-white shadow-text'>{BLOG.TITLE}</div>
+        <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo.title}</div>
         <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
           <span id='typed'/>
         </div>
@@ -122,3 +121,5 @@ export default function Header () {
     </header>
   )
 }
+
+export default Header

themes/hexo/components/HeaderArticle.js

@@ -1,11 +1,11 @@
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
-import CONFIG_HEXO from '../config_hexo'
 import { useEffect } from 'react'
+import BLOG from '@/blog.config'
 
 export default function HeaderArticle ({ post }) {
-  const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("/${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+  const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("/${BLOG.HOME_BANNER_IMAGE}")`
   const { isDarkMode } = useGlobal()
 
   const { locale } = useGlobal()

themes/hexo/components/LatestPostsGroup.js

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import CONFIG_HEXO from '../config_hexo'
 
 /**
  * 最新文章列表
@@ -30,7 +29,7 @@ const LatestPostsGroup = ({ posts }) => {
         const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
         const headerImage = post?.page_cover
           ? `url("${post.page_cover}")`
-          : `url("/${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+          : `url("/${BLOG.HOME_BANNER_IMAGE}")`
 
         return (
           <Link

themes/hexo/components/Logo.js

@@ -1,11 +1,11 @@
 import Link from 'next/link'
-import BLOG from '@/blog.config'
 import React from 'react'
 
-const Logo = () => {
+const Logo = props => {
+  const { siteInfo } = props
   return <Link href='/' passHref>
         <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-          <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {BLOG.TITLE}</div>
+          <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {siteInfo.title}</div>
         </div>
   </Link>
 }

themes/hexo/components/TopNav.js

@@ -18,7 +18,7 @@ let windowTop = 0
  * @param {*} param0
  * @returns
  */
-const TopNav = (props) => {
+const TopNav = props => {
   const { tags, currentTag, categories, currentCategory } = props
   const { locale } = useGlobal()
   const searchDrawer = useRef()
@@ -94,7 +94,7 @@ const TopNav = (props) => {
     <div id='sticky-nav' className={`${CONFIG_HEXO.NAV_TYPE !== 'normal' ? 'fixed bg-white' : ' bg-none -mb-10'} animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full top-0 z-20 transform duration-200 font-san `}>
       <div className='w-full flex justify-between items-center px-4 py-2 border dark:border-transparent'>
         <div className='flex'>
-         <Logo/>
+         <Logo {...props}/>
         </div>
 
         {/* 右侧功能 */}

themes/hexo/config_hexo.js

@@ -1,7 +1,6 @@
 const CONFIG_HEXO = {
   HOME_BANNER_ENABLE: true,
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
-  HOME_BANNER_IMAGE: './bg_image.jpg', // see /public/bg_image.jpg
 
   // 菜单配置
   MENU_CATEGORY: true, // 显示分类