movie 404

lib/db/getSiteData.js

@@ -25,10 +25,7 @@ export { getPost } from '../notion/getNotionPost'
  * @returns
  *
  */
-export async function getGlobalData({
-  pageId = BLOG.NOTION_PAGE_ID,
-  from
-}) {
+export async function getGlobalData({ pageId = BLOG.NOTION_PAGE_ID, from }) {
   // 从notion获取
   const data = await getNotionPageData({ pageId, from })
   const db = deepClone(data)
@@ -89,7 +86,9 @@ function cleanBlock(post) {
  * @returns
  */
 function getLatestPosts({ allPages, from, latestPostCount }) {
-  const allPosts = allPages?.filter(page => page.type === 'Post' && page.status === 'Published')
+  const allPosts = allPages?.filter(
+    page => page.type === 'Post' && page.status === 'Published'
+  )
 
   const latestPosts = Object.create(allPosts).sort((a, b) => {
     const dateA = new Date(a?.lastEditedDate || a?.publishDate)
@@ -140,7 +139,13 @@ function getCustomNav({ allPages }) {
           p.to = '/' + p.slug
         }
       }
-      customNav.push({ icon: p.icon || null, name: p.title, to: p.slug, target: '_blank', show: true })
+      customNav.push({
+        icon: p.icon || null,
+        name: p.title,
+        to: p.slug,
+        target: '_blank',
+        show: true
+      })
     })
   }
   return customNav
@@ -152,7 +157,12 @@ function getCustomNav({ allPages }) {
  * @returns
  */
 function getCustomMenu({ collectionData }) {
-  const menuPages = collectionData.filter(post => post.status === 'Published' && (post?.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post?.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu))
+  const menuPages = collectionData.filter(
+    post =>
+      post.status === 'Published' &&
+      (post?.type === BLOG.NOTION_PROPERTY_NAME.type_menu ||
+        post?.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu)
+  )
   const menus = []
   if (menuPages && menuPages.length > 0) {
     menuPages.forEach(e => {
@@ -190,7 +200,9 @@ function getCustomMenu({ collectionData }) {
  */
 function getTagOptions(schema) {
   if (!schema) return {}
-  const tagSchema = Object.values(schema).find(e => e.name === BLOG.NOTION_PROPERTY_NAME.tags)
+  const tagSchema = Object.values(schema).find(
+    e => e.name === BLOG.NOTION_PROPERTY_NAME.tags
+  )
   return tagSchema?.options || []
 }
 
@@ -201,7 +213,9 @@ function getTagOptions(schema) {
  */
 function getCategoryOptions(schema) {
   if (!schema) return {}
-  const categorySchema = Object.values(schema).find(e => e.name === BLOG.NOTION_PROPERTY_NAME.category)
+  const categorySchema = Object.values(schema).find(
+    e => e.name === BLOG.NOTION_PROPERTY_NAME.category
+  )
   return categorySchema?.options || []
 }
 
@@ -213,9 +227,15 @@ function getCategoryOptions(schema) {
  */
 function getSiteInfo({ collection, block }) {
   const title = collection?.name?.[0][0] || BLOG.TITLE
-  const description = collection?.description ? Object.assign(collection).description[0][0] : BLOG.DESCRIPTION
-  const pageCover = collection?.cover ? mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value) : BLOG.HOME_BANNER_IMAGE
-  let icon = collection?.icon ? mapImgUrl(collection?.icon, collection, 'collection') : BLOG.AVATAR
+  const description = collection?.description
+    ? Object.assign(collection).description[0][0]
+    : BLOG.DESCRIPTION
+  const pageCover = collection?.cover
+    ? mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value)
+    : BLOG.HOME_BANNER_IMAGE
+  let icon = collection?.icon
+    ? mapImgUrl(collection?.icon, collection, 'collection')
+    : BLOG.AVATAR
 
   // 用户头像压缩一下
   icon = compressImage(icon)
@@ -236,7 +256,13 @@ function getSiteInfo({ collection, block }) {
  */
 export function getNavPages({ allPages }) {
   const allNavPages = allPages?.filter(post => {
-    return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
+    return (
+      post &&
+      post?.slug &&
+      !post?.slug?.startsWith('http') &&
+      post?.type === 'Post' &&
+      post?.status === 'Published'
+    )
   })
 
   return allNavPages.map(item => ({
@@ -248,7 +274,8 @@ export function getNavPages({ allPages }) {
     summary: item.summary || null,
     slug: item.slug,
     pageIcon: item.pageIcon || '',
-    lastEditedDate: item.lastEditedDate
+    lastEditedDate: item.lastEditedDate,
+    publishDate: item.publishDate
   }))
 }
 
@@ -265,19 +292,26 @@ async function getNotice(post) {
 }
 
 // 没有数据时返回
-const EmptyData = (pageId) => {
+const EmptyData = pageId => {
   const empty = {
     notice: null,
     siteInfo: getSiteInfo({}),
-    allPages: [{
-      id: 1,
-      title: `无法获取Notion数据，请检查Notion_ID： \n 当前 ${pageId}`,
-      summary: '访问文档获取帮助→ https://tangly1024.com/article/vercel-deploy-notion-next',
-      status: 'Published',
-      type: 'Post',
-      slug: '13a171332816461db29d50e9f575b00d',
-      date: { start_date: '2023-04-24', lastEditedDay: '2023-04-24', tagItems: [] }
-    }],
+    allPages: [
+      {
+        id: 1,
+        title: `无法获取Notion数据，请检查Notion_ID： \n 当前 ${pageId}`,
+        summary:
+          '访问文档获取帮助→ https://tangly1024.com/article/vercel-deploy-notion-next',
+        status: 'Published',
+        type: 'Post',
+        slug: '13a171332816461db29d50e9f575b00d',
+        date: {
+          start_date: '2023-04-24',
+          lastEditedDay: '2023-04-24',
+          tagItems: []
+        }
+      }
+    ],
     allNavPages: [],
     collection: [],
     collectionQuery: {},
@@ -313,7 +347,8 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   const rawMetadata = block[pageId]?.value
   // Check Type Page-Database和Inline-Database
   if (
-    rawMetadata?.type !== 'collection_view_page' && rawMetadata?.type !== 'collection_view'
+    rawMetadata?.type !== 'collection_view_page' &&
+    rawMetadata?.type !== 'collection_view'
   ) {
     console.error(`pageId "${pageId}" is not a database`)
     return EmptyData(pageId)
@@ -328,9 +363,21 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   const viewIds = rawMetadata?.view_ids
   const collectionData = []
 
-  const pageIds = getAllPageIds(collectionQuery, collectionId, collectionView, viewIds)
+  const pageIds = getAllPageIds(
+    collectionQuery,
+    collectionId,
+    collectionView,
+    viewIds
+  )
   if (pageIds?.length === 0) {
-    console.error('获取到的文章列表为空，请检查notion模板', collectionQuery, collection, collectionView, viewIds, pageRecordMap)
+    console.error(
+      '获取到的文章列表为空，请检查notion模板',
+      collectionQuery,
+      collection,
+      collectionView,
+      viewIds,
+      pageRecordMap
+    )
   } else {
     // console.log('有效Page数量', pageIds?.length)
   }
@@ -343,7 +390,14 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
       // 如果找不到文章对应的block，说明发生了溢出，使用pageID再去请求
       const pageBlock = await getSingleBlock(id, from)
       if (pageBlock.block[id].value) {
-        const properties = (await getPageProperties(id, pageBlock.block[id].value, schema, null, getTagOptions(schema))) || null
+        const properties =
+          (await getPageProperties(
+            id,
+            pageBlock.block[id].value,
+            schema,
+            null,
+            getTagOptions(schema)
+          )) || null
         if (properties) {
           collectionData.push(properties)
         }
@@ -351,7 +405,14 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
       continue
     }
 
-    const properties = (await getPageProperties(id, value, schema, null, getTagOptions(schema))) || null
+    const properties =
+      (await getPageProperties(
+        id,
+        value,
+        schema,
+        null,
+        getTagOptions(schema)
+      )) || null
     if (properties) {
       collectionData.push(properties)
     }
@@ -365,13 +426,16 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
     if (post?.type === 'Post' && post.status === 'Published') {
       postCount++
     }
-    return post && post?.slug &&
-      (!post?.slug?.startsWith('http')) &&
+    return (
+      post &&
+      post?.slug &&
+      !post?.slug?.startsWith('http') &&
       (post?.status === 'Invisible' || post?.status === 'Published')
+    )
   })
 
   // 站点配置优先读取配置表格，否则读取blog.config.js 文件
-  const NOTION_CONFIG = await getConfigMapFromConfigPage(collectionData) || {}
+  const NOTION_CONFIG = (await getConfigMapFromConfigPage(collectionData)) || {}
 
   // Sort by date
   if (BLOG.POSTS_SORT_BY === 'date') {
@@ -380,13 +444,27 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
     })
   }
 
-  const notice = await getNotice(collectionData.filter(post => {
-    return post && post?.type && post?.type === 'Notice' && post.status === 'Published'
-  })?.[0])
-  const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema) })
+  const notice = await getNotice(
+    collectionData.filter(post => {
+      return (
+        post &&
+        post?.type &&
+        post?.type === 'Notice' &&
+        post.status === 'Published'
+      )
+    })?.[0]
+  )
+  const categoryOptions = getAllCategories({
+    allPages,
+    categoryOptions: getCategoryOptions(schema)
+  })
   const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) })
   // 旧的菜单
-  const customNav = getCustomNav({ allPages: collectionData.filter(post => post?.type === 'Page' && post.status === 'Published') })
+  const customNav = getCustomNav({
+    allPages: collectionData.filter(
+      post => post?.type === 'Page' && post.status === 'Published'
+    )
+  })
   // 新的菜单
   const customMenu = await getCustomMenu({ collectionData })
   const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 6 })

themes/movie/components/ArchiveDateList.js

@@ -0,0 +1,38 @@
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+
+export default function ArchiveDateList(props) {
+  const postsSortByDate = Object.create(props.allNavPages)
+  const { locale } = useGlobal()
+
+  postsSortByDate.sort((a, b) => {
+    return b?.publishDate - a?.publishDate
+  })
+
+  let dates = []
+  postsSortByDate.forEach(post => {
+    const date = formatDateFmt(post.publishDate, 'yyyy-MM')
+    if (!dates[date]) {
+      dates.push(date)
+    }
+  })
+  dates = dates.slice(0, 5)
+  return (
+    <div>
+      <div className="text-2xl dark:text-white mb-2">{locale.NAV.ARCHIVE}</div>
+      {dates?.map((date, index) => {
+        return (
+          <div key={index}>
+            <Link
+              href={`/archive#${date}`}
+              className="hover:underline dark:text-green-500"
+            >
+              {date}
+            </Link>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

themes/movie/components/CategoryGroup.js

@@ -0,0 +1,43 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+const CategoryGroup = props => {
+  const { currentCategory, categoryOptions } = props
+  const { locale } = useGlobal()
+  if (!categoryOptions || categoryOptions.length === 0) return <></>
+  const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
+  const categories = categoryOptions.slice(0, categoryCount)
+  return (
+    <>
+      <div>
+        <h2 className="text-2xl dark:text-white">{locale.COMMON.CATEGORY}</h2>
+        <div id="category-list" className="dark:border-gray-600 flex flex-col">
+          {categories.map(category => {
+            const selected = currentCategory === category.name
+            return (
+              <Link
+                key={category.name}
+                href={`/category/${category.name}`}
+                passHref
+                className={
+                  (selected
+                    ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
+                    : 'dark:text-green-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
+                  ' w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'
+                }
+              >
+                <i
+                  className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`}
+                />
+                {category.name}({category.count})
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default CategoryGroup

themes/movie/components/Header.js

@@ -8,7 +8,7 @@ import { MenuListTop } from './MenuListTop'
  */
 export const Header = props => {
   return (
-    <header className="w-full px-6 relative z-10">
+    <header className="w-full px-8 relative z-20">
       <div className="mx-auto md:flex justify-between items-center">
         <Link
           href="/"
@@ -17,7 +17,7 @@ export const Header = props => {
           {siteConfig('TITLE')}
         </Link>
         <div className="w-full md:w-auto text-center md:text-right">
-          {/* 右侧文字 */}
+          {/* 右侧菜单 */}
           <MenuListTop {...props} />
         </div>
       </div>

themes/movie/components/LatestPostsGroup.js

@@ -0,0 +1,62 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const LatestPostsGroup = ({ latestPosts }) => {
+  // 获取当前路径
+  const currentPath = useRouter().asPath
+  const { locale } = useGlobal()
+
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return (
+    <div>
+      <div className="pb-1 px-2 flex flex-nowrap justify-between">
+        <div className="text-2xl text-gray-600  dark:text-gray-200">
+          <i className="mr-2 fas fa-history" />
+          {locale.COMMON.LATEST_POSTS}
+        </div>
+      </div>
+
+      {latestPosts.map(post => {
+        const selected =
+          currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+        const url = checkContainHttp(post.slug)
+          ? sliceUrlFromHttp(post.slug)
+          : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+        return (
+          <Link
+            key={post.id}
+            title={post.title}
+            href={url}
+            passHref
+            className={'my-1 flex'}
+          >
+            <div
+              className={
+                (selected
+                  ? 'text-white  bg-gray-600 '
+                  : 'text-gray-500 dark:text-green-400 ') +
+                ' py-1 flex hover:bg-gray-500 px-2 duration-200 w-full ' +
+                'hover:text-white dark:hover:text-white cursor-pointer'
+              }
+            >
+              <li className="line-clamp-2">{post.title}</li>
+            </div>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+export default LatestPostsGroup

themes/movie/components/MenuItemDrop.js

@@ -40,19 +40,19 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <ul
           style={{ backdropFilter: 'blur(3px)' }}
-          className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-30 absolute block  `}
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-30 absolute block  `}
         >
           {link.subMenus.map((sLink, index) => {
             return (
               <li
                 key={index}
-                className="cursor-pointer hover:bg-indigo-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3"
+                className="cursor-pointer dark:bg-hexo-black-gray dark:hover:bg-gray-300 hover:bg-gray-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3"
               >
                 <Link
                   href={sLink.to}
                   target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
                 >
-                  <span className="text-sm text-nowrap font-extralight">
+                  <span className="text-sm text-nowrap">
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
                   </span>

themes/movie/components/MenuListTop.js

@@ -3,14 +3,32 @@ import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
 import { MenuItemDrop } from './MenuItemDrop'
 
-export const MenuListTop = (props) => {
+export const MenuListTop = props => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
   let links = [
-    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: siteConfig('HEXO_MENU_INDEX', null, CONFIG) },
-    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
-    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) }
+    {
+      id: 1,
+      icon: 'fa-solid fa-house',
+      name: locale.NAV.INDEX,
+      to: '/',
+      show: siteConfig('HEXO_MENU_INDEX', null, CONFIG)
+    },
+    {
+      id: 2,
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      to: '/search',
+      show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      id: 3,
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      to: '/archive',
+      show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
+    }
     // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MENU_CATEGORY', null, CONFIG) },
     // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MENU_TAG', null, CONFIG) }
   ]
@@ -34,9 +52,14 @@ export const MenuListTop = (props) => {
     return null
   }
 
-  return (<>
-        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
-            {links?.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
-        </nav>
-    </>)
+  return (
+    <>
+      <nav id="nav-mobile" className="leading-8 justify-center w-full flex">
+        {links?.map(
+          (link, index) =>
+            link && link.show && <MenuItemDrop key={index} link={link} />
+        )}
+      </nav>
+    </>
+  )
 }

themes/movie/components/TagGroups.js

@@ -0,0 +1,51 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tagOptions, className }) => {
+  const router = useRouter()
+  const { locale } = useGlobal()
+  const { tag: currentTag } = router.query
+  if (!tagOptions) return <></>
+
+  return (
+    <div>
+      <div className="text-2xl dark:text-white mb-2">{locale.COMMON.TAGS}</div>
+      <div id="tags-group" className="dark:border-gray-700 space-y-2">
+        {tagOptions.map((tag, index) => {
+          const selected = currentTag === tag.name
+          return (
+            <Link
+              passHref
+              key={index}
+              href={`/tag/${encodeURIComponent(tag.name)}`}
+              className={'cursor-pointer inline-block  whitespace-nowrap'}
+            >
+              <div
+                className={`${className || ''} 
+                            ${selected ? 'text-white bg-blue-600 dark:bg-yellow-600' : ''}  
+                            flex items-center hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all`}
+              >
+                <div className="text-lg">{tag.name} </div>
+                {tag.count ? (
+                  <sup className="relative ml-1">{tag.count}</sup>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default TagGroups

themes/movie/components/TagItemMini.js

@@ -6,11 +6,9 @@ const TagItemMini = ({ tag, selected = false }) => {
       key={tag}
       href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
       passHref
-      className={
-        'inline-block text-md font-extrabold rounded-xl text-shadow py-0.5 mr-2 text-[#2EBF8B]'
-      }
+      className={'inline-block rounded-xl py-0.5 mr-2 text-[#2EBF8B]'}
     >
-      <div className="font-light">
+      <div className="text-md font-bold text-shadow">
         {selected && <i className="mr-1 fa-tag" />}{' '}
         {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
       </div>

themes/movie/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import CONFIG from './config'
-import { useEffect } from 'react'
+import { createContext, useContext, useEffect, useRef } from 'react'
 import { Header } from './components/Header'
 import { Nav } from './components/Nav'
 import { Footer } from './components/Footer'
@@ -26,6 +26,16 @@ import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import { siteConfig } from '@/lib/config'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import LatestPostsGroup from './components/LatestPostsGroup'
+import CategoryGroup from './components/CategoryGroup'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import ArchiveDateList from './components/ArchiveDateList'
+import TagGroups from './components/TagGroups'
+
+// 主题全局状态
+const ThemeGlobalMovie = createContext()
+export const useMovieGlobal = () => useContext(ThemeGlobalMovie)
 
 /**
  * 基础布局框架
@@ -35,32 +45,11 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children } = props
+  const { children, slotTop } = props
   const { onLoading, fullWidth } = useGlobal()
   const router = useRouter()
   const { category, tag } = props
-  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
-  // 如果是搜索，则列表顶部嵌入 搜索框
-  let slotTop = null
-  if (category) {
-    slotTop = (
-      <div className="pb-12">
-        <i className="mr-1 fas fa-folder-open" />
-        {category}
-      </div>
-    )
-  } else if (tag) {
-    slotTop = <div className="pb-12">#{tag}</div>
-  } else if (props.slotTop) {
-    slotTop = props.slotTop
-  } else if (router.route === '/search') {
-    // 嵌入一个搜索框在顶部
-    slotTop = (
-      <div className="pb-12">
-        <SearchInput {...props} />
-      </div>
-    )
-  }
+  const searchModal = useRef(null)
 
   // 增加一个状态以触发 Transition 组件的动画
   //   const [showTransition, setShowTransition] = useState(true)
@@ -71,58 +60,63 @@ const LayoutBase = props => {
   //   }, [onLoading])
 
   return (
-    <div
-      id="theme-example"
-      className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-[#2A2A2A] scroll-smooth`}
-    >
-      <Style />
+    <ThemeGlobalMovie.Provider value={{ searchModal }}>
+      <div
+        id="theme-movie"
+        className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-[#2A2A2A] scroll-smooth min-h-screen flex flex-col justify-between`}
+      >
+        <Style />
 
-      {/* 页头 */}
-      <Header {...props} />
+        {/* 页头 */}
+        <Header {...props} />
 
-      {/* 主体 */}
-      <div id="container-inner" className="w-full relative z-10">
-        {/* 标题栏 */}
-        {/* {fullWidth ? null : <Title {...props} />} */}
+        {/* 主体 */}
+        <div id="container-inner" className="w-full relative z-10">
+          {/* 标题栏 */}
+          {/* {fullWidth ? null : <Title {...props} />} */}
 
-        <div
-          id="container-wrapper"
-          className={
-            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
-              ? 'flex-row-reverse'
-              : '') +
-            'relative mx-auto justify-center md:flex items-start py-8 px-2'
-          }
-        >
-          {/* 内容 */}
-          <div className={`w-full ${fullWidth ? '' : ''} xl:px-32 lg:px-4`}>
-            <Transition
-              show={!onLoading}
-              appear={true}
-              enter="transition ease-in-out duration-700 transform order-first"
-              enterFrom="opacity-0 translate-y-16"
-              enterTo="opacity-100"
-              leave="transition ease-in-out duration-300 transform"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 -translate-y-16"
-              unmount={false}
-            >
-              {/* 嵌入模块 */}
-              {slotTop}
-              {children}
-            </Transition>
+          <div
+            id="container-wrapper"
+            className={
+              (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+                ? 'flex-row-reverse'
+                : '') +
+              'relative mx-auto justify-center md:flex items-start py-8 px-2'
+            }
+          >
+            {/* 内容 */}
+            <div className={`w-full ${fullWidth ? '' : ''} xl:px-32 lg:px-4`}>
+              <Transition
+                show={!onLoading}
+                appear={true}
+                enter="transition ease-in-out duration-700 transform order-first"
+                enterFrom="opacity-0 translate-y-16"
+                enterTo="opacity-100"
+                leave="transition ease-in-out duration-300 transform"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 -translate-y-16"
+                unmount={false}
+              >
+                {/* 嵌入模块 */}
+                {slotTop}
+                {children}
+              </Transition>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* 页脚 */}
-      <Footer {...props} />
+        {/* 页脚 */}
+        <Footer {...props} />
 
-      {/* 回顶按钮 */}
-      <div className="fixed right-4 bottom-4 z-10">
-        <JumpToTopButton />
+        {/* 搜索框 */}
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
+
+        {/* 回顶按钮 */}
+        <div className="fixed right-4 bottom-4 z-10">
+          <JumpToTopButton />
+        </div>
       </div>
-    </div>
+    </ThemeGlobalMovie.Provider>
   )
 }
 
@@ -200,7 +194,55 @@ const LayoutSlug = props => {
  * @returns
  */
 const Layout404 = props => {
-  return <>404 Not found.</>
+  const { locale } = useGlobal()
+  const { searchModal } = useMovieGlobal()
+  const router = useRouter()
+  // 展示搜索框
+  const toggleShowSearchInput = () => {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    }
+  }
+
+  const onKeyUp = e => {
+    if (e.keyCode === 13) {
+      const search = document.getElementById('search').value
+      if (search) {
+        router.push({ pathname: '/search/' + search })
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className="h-52">
+        <h2 className="text-4xl">{locale.COMMON.NO_RESULTS_FOUND}</h2>
+        <hr className="my-4" />
+        <div className="max-w-md relative">
+          <input
+            autoFocus
+            id="search"
+            onClick={toggleShowSearchInput}
+            onKeyUp={onKeyUp}
+            className="float-left w-full outline-none h-full p-2 rounded dark:bg-[#383838] bg-gray-100"
+            aria-label="Submit search"
+            type="search"
+            name="s"
+            autoComplete="off"
+            placeholder="Type then hit enter to search..."
+          />
+          <i className="fas fa-search absolute right-0 my-auto p-2"></i>
+        </div>
+      </div>
+      {/* 底部导航 */}
+      <div className="h-full flex-grow grid grid-cols-4 gap-4">
+        <LatestPostsGroup {...props} />
+        <CategoryGroup {...props} />
+        <ArchiveDateList {...props} />
+        <TagGroups {...props} />
+      </div>
+    </>
+  )
 }
 
 /**

themes/simple/components/NavBar.js

@@ -9,7 +9,7 @@ import { MenuList } from './MenuList'
  * @param {*} props
  * @returns
  */
-export default function NavBar (props) {
+export default function NavBar(props) {
   const [showSearchInput, changeShowSearchInput] = useState(false)
   const router = useRouter()
   const { searchModal } = useSimpleGlobal()
@@ -23,7 +23,7 @@ export default function NavBar (props) {
     }
   }
 
-  const onKeyUp = (e) => {
+  const onKeyUp = e => {
     if (e.keyCode === 13) {
       const search = document.getElementById('theme-simple-search').value
       if (search) {
@@ -33,19 +33,41 @@ export default function NavBar (props) {
   }
 
   return (
-        <nav className="w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
-            <div id="nav-bar-inner" className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start">
-                {/* 左侧菜单 */}
-                <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
-                    {showSearchInput && <input autoFocus id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
-                    {!showSearchInput && (<MenuList {...props}/>)}
-                </div>
+    <nav className="w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
+      <div
+        id="nav-bar-inner"
+        className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start"
+      >
+        {/* 左侧菜单 */}
+        <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
+          {showSearchInput && (
+            <input
+              autoFocus
+              id="theme-simple-search"
+              onKeyUp={onKeyUp}
+              className="float-left w-full outline-none h-full px-4"
+              aria-label="Submit search"
+              type="search"
+              name="s"
+              autoComplete="off"
+              placeholder="Type then hit enter to search..."
+            />
+          )}
+          {!showSearchInput && <MenuList {...props} />}
+        </div>
 
-                <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400  cursor-pointer">
-                    {/* <!-- extra links --> */}
-                    <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass' + ' align-middle'} onClick={toggleShowSearchInput}></i>
-                </div>
-            </div>
-        </nav>
+        <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400  cursor-pointer">
+          {/* <!-- extra links --> */}
+          <i
+            className={
+              showSearchInput
+                ? 'fa-regular fa-circle-xmark'
+                : 'fa-solid fa-magnifying-glass' + ' align-middle'
+            }
+            onClick={toggleShowSearchInput}
+          ></i>
+        </div>
+      </div>
+    </nav>
   )
 }