theme-fukasawa

components/ShareBar.js

@@ -14,15 +14,15 @@ const ShareBar = ({ post }) => {
 
   return <div className='m-1 overflow-x-auto'>
         <div className='flex w-full md:justify-end'>
-        <ShareButtons shareUrl={shareUrl} title={post.title} image={post.pageCover} body={
-            post.title +
-            ' | ' +
-            BLOG.TITLE +
-            ' ' +
-            shareUrl +
-            ' ' +
-            post.summary
-        } />
+            <ShareButtons shareUrl={shareUrl} title={post.title} image={post.pageCover} body={
+                post?.title +
+                ' | ' +
+                BLOG.TITLE +
+                ' ' +
+                shareUrl +
+                ' ' +
+                post?.summary
+            } />
         </div>
     </div>
 }

pages/search/index.js

@@ -4,6 +4,11 @@ import { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { getLayoutByTheme } from '@/themes/theme'
 
+/**
+ * 搜索路由
+ * @param {*} props
+ * @returns
+ */
 const Search = props => {
   const { posts, siteInfo } = props
   const { locale } = useGlobal()

themes/fukasawa/components/AsideLeft.js

@@ -9,12 +9,12 @@ import Announcement from './Announcement'
 import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import SocialButton from './SocialButton'
-import { useState } from 'react'
+import { useFukasawaGlobal } from '..'
 
 function AsideLeft(props) {
   const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
   const router = useRouter()
-  const [open, setOpen] = useState(true)
+  const { open, setOpen } = useFukasawaGlobal()
   // 折叠侧边栏
   const toggleOpen = () => {
     setOpen(!open)

themes/fukasawa/components/MenuItemDrop.js

@@ -23,8 +23,8 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
-            {link?.subMenus?.map(sLink => {
-              return <li key={sLink.id}>
+            {link?.subMenus?.map((sLink, index) => {
+              return <li key={index}>
                     <Link href={sLink.to} className='my-auto py-1 px-2 items-center justify-start flex text-gray-500 dark:text-gray-300 hover:text-black  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
                         {sLink.icon && <i className={`${sLink.icon} w-4 text-center `} />}
                         <div className={'ml-2 whitespace-nowrap'}>{sLink.name}</div>

themes/fukasawa/config_fuka.js

@@ -8,7 +8,9 @@ const FUKA_CONFIG = {
   MENU_CATEGORY: true, // 显示分类
   MENU_TAG: true, // 显示标签
   MENU_ARCHIVE: true, // 显示归档
-  MENU_SEARCH: false // 显示搜索
+  MENU_SEARCH: false, // 显示搜索
+
+  SIDEBAR_COLLAPSE_DEFAULT: false // 侧边栏默认折叠
 
 }
 export default FUKA_CONFIG

themes/fukasawa/index.js

@@ -1,6 +1,6 @@
 'use client'
 
-import CONFIG_FUKA from './config_fuka'
+import FUKA_CONFIG from './config_fuka'
 import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
@@ -16,10 +16,14 @@ import ArticleDetail from './components/ArticleDetail'
 import { ArticleLock } from './components/ArticleLock'
 import TagItemMini from './components/TagItemMini'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import Mark from 'mark.js'
 import Link from 'next/link'
 
+// 主题全局状态
+const ThemeGlobalFukasawa = createContext()
+export const useFukasawaGlobal = () => useContext(ThemeGlobalFukasawa)
+
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param children
@@ -38,37 +42,59 @@ const LayoutBase = (props) => {
   const { children, headerSlot, meta } = props
   const leftAreaSlot = <Live2D />
   const { onLoading } = useGlobal()
+  // 侧边栏折叠从 本地存储中获取 open 状态的初始值
+
+  const [open, setOpen] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('fukasawa-sidebarOpen') === 'true' || FUKA_CONFIG.SIDEBAR_COLLAPSE_DEFAULT
+    }
+    return FUKA_CONFIG.SIDEBAR_COLLAPSE_DEFAULT
+  })
+  const memoizedOpen = useMemo(() => open, [])
+
+  console.log('base', FUKA_CONFIG.SIDEBAR_COLLAPSE_DEFAULT, open, memoizedOpen)
 
   if (isBrowser()) {
     loadExternalResource('/css/theme-fukasawa.css', 'css')
   }
 
+  // 在组件卸载时保存 open 状态到本地存储中
+  useEffect(() => {
+    if (isBrowser()) {
+      localStorage.setItem('fukasawa-sidebarOpen', open)
+    }
+  }, [open])
+
   return (
-        <div id='theme-fukasawa'>
-            <CommonHead meta={meta} />
-            <TopNav {...props} />
+        <ThemeGlobalFukasawa.Provider value={{ open, setOpen }}>
 
-            <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
-                {/* 侧边抽屉 */}
-                <AsideLeft {...props} slot={leftAreaSlot} />
+            <div id='theme-fukasawa'>
+                <CommonHead meta={meta} />
+                <TopNav {...props} />
 
-                <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
-                    <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
-                        <div> {headerSlot} </div>
-                        <div> {onLoading ? <LoadingCover /> : children} </div>
-                    </div>
-                </main>
+                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
+                    {/* 侧边抽屉 */}
+                    <AsideLeft {...props} slot={leftAreaSlot} />
+
+                    <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
+                        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
+                            <div> {headerSlot} </div>
+                            <div> {onLoading ? <LoadingCover /> : children} </div>
+                        </div>
+                    </main>
+
+                </div>
 
             </div>
-
-        </div>)
+        </ThemeGlobalFukasawa.Provider>
+  )
 }
 
 /**
  * 首页
  * @param {*} props notion数据
- * @returns 首页就是一个博客列表
- */
+            * @returns 首页就是一个博客列表
+            */
 const LayoutIndex = (props) => {
   return <LayoutPostList {...props} />
 }
@@ -76,7 +102,7 @@ const LayoutIndex = (props) => {
 /**
  * 博客列表
  * @param {*} props
- */
+            */
 const LayoutPostList = (props) => {
   return <LayoutBase {...props}>
         {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
@@ -86,8 +112,8 @@ const LayoutPostList = (props) => {
 /**
  * 文章详情
  * @param {*} props
- * @returns
- */
+            * @returns
+            */
 const LayoutSlug = (props) => {
   const { lock, validPassword } = props
   return (
@@ -140,8 +166,8 @@ const LayoutArchive = (props) => {
 /**
  * 404
  * @param {*} props
- * @returns
- */
+            * @returns
+            */
 const Layout404 = props => {
   return <LayoutBase {...props}>404</LayoutBase>
 }
@@ -149,8 +175,8 @@ const Layout404 = props => {
 /**
  * 分类列表
  * @param {*} props
- * @returns
- */
+            * @returns
+            */
 const LayoutCategoryIndex = (props) => {
   const { locale } = useGlobal()
   const { categoryOptions } = props
@@ -184,8 +210,8 @@ const LayoutCategoryIndex = (props) => {
 /**
  * 标签列表
  * @param {*} props
- * @returns
- */
+            * @returns
+            */
 const LayoutTagIndex = (props) => {
   const { locale } = useGlobal()
   const { tagOptions } = props
@@ -206,7 +232,7 @@ const LayoutTagIndex = (props) => {
 }
 
 export {
-  CONFIG_FUKA as THEME_CONFIG,
+  FUKA_CONFIG as THEME_CONFIG,
   LayoutIndex,
   LayoutSearch,
   LayoutArchive,

themes/nobelium/Layout404.js

@@ -1,9 +0,0 @@
-import LayoutBase from './LayoutBase'
-
-export const Layout404 = (props) => {
-  return <LayoutBase {...props}>
-        404 Not found.
-    </LayoutBase>
-}
-
-export default Layout404

themes/nobelium/LayoutArchive.js

@@ -1,47 +0,0 @@
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutArchive = props => {
-  const { archivePosts } = props
-
-  return (
-    <LayoutBase {...props}>
-      <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
-          <div key={archiveTitle}>
-            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
-              {archiveTitle}
-            </div>
-
-            <ul>
-              {archivePosts[archiveTitle].map(post => (
-                <li
-                  key={post.id}
-                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
-                >
-                  <div id={post?.publishTime}>
-                    <span className="text-gray-400">
-                      {post.date?.start_date}
-                    </span>{' '}
-                    &nbsp;
-                    <Link
-                      href={`${BLOG.SUB_PATH}/${post.slug}`}
-                      passHref
-                      className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
-
-                      {post.title}
-
-                    </Link>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutArchive

themes/nobelium/LayoutBase.js

@@ -1,52 +0,0 @@
-import CommonHead from '@/components/CommonHead'
-import React from 'react'
-import Nav from './components/Nav'
-import { Footer } from './components/Footer'
-import JumpToTopButton from './components/JumpToTopButton'
-import Live2D from '@/components/Live2D'
-import { useGlobal } from '@/lib/global'
-/**
- * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
-
- * @returns {JSX.Element}
- * @constructor
- */
-const LayoutBase = props => {
-  const { children, meta, post } = props
-
-  const fullWidth = post?.fullWidth ?? false
-  const { onLoading } = useGlobal()
-
-  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
-        <div className='w-full h-screen flex justify-center items-center'>
-            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
-        </div>
-    </div>
-  return (
-        <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
-            <CommonHead meta={meta} />
-
-            {/* 顶部导航栏 */}
-            <Nav {...props} />
-
-            <main className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
-
-                {onLoading ? LoadingCover : children}
-
-            </main>
-
-            <Footer {...props} />
-
-            <div className='fixed right-4 bottom-4'>
-                <JumpToTopButton />
-            </div>
-
-            {/* 左下角悬浮 */}
-            <div className="bottom-4 -left-14 fixed justify-end z-40">
-                <Live2D />
-            </div>
-        </div>
-  )
-}
-
-export default LayoutBase

themes/nobelium/LayoutCategory.js

@@ -1,12 +0,0 @@
-import BLOG from '@/blog.config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategory = props => {
-  return <LayoutBase {...props}>
-       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </LayoutBase >
-}
-
-export default LayoutCategory

themes/nobelium/LayoutCategoryIndex.js

@@ -1,29 +0,0 @@
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategoryIndex = (props) => {
-  const { categoryOptions } = props
-
-  return (
-    <LayoutBase {...props}>
-        <div id='category-list' className='duration-200 flex flex-wrap'>
-          {categoryOptions?.map(category => {
-            return (
-              <Link
-                key={category.name}
-                href={`/category/${category.name}`}
-                passHref
-                legacyBehavior>
-                <div
-                  className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                  <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutCategoryIndex

themes/nobelium/LayoutIndex.js

@@ -1,17 +0,0 @@
-
-import BLOG from '@/blog.config'
-import Announcement from './components/Announcement'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import LayoutBase from './LayoutBase'
-
-export const LayoutIndex = props => {
-  return (
-    <LayoutBase {...props}>
-       <Announcement {...props} />
-       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </LayoutBase>
-  )
-}
-
-export default LayoutIndex

themes/nobelium/LayoutPage.js

@@ -1,12 +0,0 @@
-import { BlogListPage } from './components/BlogListPage'
-import LayoutBase from './LayoutBase'
-
-export const LayoutPage = props => {
-  return (
-    <LayoutBase {...props}>
-        <BlogListPage {...props} />
-    </LayoutBase>
-  )
-}
-
-export default LayoutPage

themes/nobelium/LayoutSearch.js

@@ -1,58 +0,0 @@
-import BLOG from '@/blog.config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import SearchInput from './components/SearchInput'
-import Mark from 'mark.js'
-import LayoutBase from './LayoutBase'
-import { isBrowser } from '@/lib/utils'
-import Tags from './components/Tags'
-
-export const LayoutSearch = props => {
-  const { keyword } = props
-  const router = useRouter()
-
-  useEffect(() => {
-    setTimeout(() => {
-      const container = isBrowser() && document.getElementById('posts-wrapper')
-      if (container && container.innerHTML) {
-        const re = new RegExp(keyword, 'gim')
-        const instance = new Mark(container)
-        instance.markRegExp(re, {
-          element: 'span',
-          className: 'text-red-500 border-b border-dashed'
-        })
-      }
-    }, 100)
-  }, [router.events])
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (keyword) {
-        const targets = document.getElementsByClassName('replace')
-        for (const container of targets) {
-          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>`
-            )
-          }
-        }
-      }
-    }, 100)
-  }, [])
-
-  return <LayoutBase {...props}>
-        <div className='pb-12'>
-            <SearchInput {...props} />
-        </div>
-
-        <Tags {...props}/>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-
-    </LayoutBase>
-}
-
-export default LayoutSearch

themes/nobelium/LayoutSlug.js

@@ -1,35 +0,0 @@
-import LayoutBase from './LayoutBase'
-import { ArticleLock } from './components/ArticleLock'
-import NotionPage from '@/components/NotionPage'
-import { ArticleInfo } from './components/ArticleInfo'
-import Comment from '@/components/Comment'
-import { ArticleFooter } from './components/ArticleFooter'
-import ShareBar from '@/components/ShareBar'
-
-export const LayoutSlug = props => {
-  const { post, lock, validPassword } = props
-
-  if (!post) {
-    return <LayoutBase {...props} />
-  }
-
-  return (
-        <LayoutBase {...props}>
-
-                {lock && <ArticleLock validPassword={validPassword} />}
-
-                {!lock && <div id="article-wrapper" className="px-2">
-                    <>
-                        <ArticleInfo post={post} />
-                        <NotionPage post={post} />
-                        <ShareBar post={post} />
-                        <Comment frontMatter={post}/>
-                        <ArticleFooter />
-                    </>
-                </div>}
-
-        </LayoutBase>
-  )
-}
-
-export default LayoutSlug

themes/nobelium/LayoutTag.js

@@ -1,59 +0,0 @@
-import React from 'react'
-import BlogPost from './components/BlogPost'
-import Tags from './components/Tags'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTag = props => {
-  const { currentTag } = props
-  const [searchValue, setSearchValue] = React.useState('')
-  let filteredBlogPosts = []
-  const { posts } = props
-
-  if (posts) {
-    filteredBlogPosts = posts.filter(post => {
-      const tagContent = post.tags ? post.tags.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent
-      return searchContent.toLowerCase().includes(searchValue.toLowerCase())
-    })
-  }
-
-  return <LayoutBase {...props}>
-
-    <div className="relative">
-        <input
-          type="text"
-          placeholder={
-            currentTag ? `Search in #${currentTag}` : 'Search Articles'
-          }
-          className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
-          onChange={e => setSearchValue(e.target.value)}
-        />
-        <svg
-          className="absolute right-3 top-3 h-5 w-5 text-black dark:text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          ></path>
-        </svg>
-      </div>
-      <Tags {...props}/>
-
-      <div className="article-container my-8">
-        {!filteredBlogPosts.length && (
-          <p className="text-gray-500 dark:text-gray-300">No posts found.</p>
-        )}
-        {filteredBlogPosts.slice(0, 20).map(post => (
-          <BlogPost key={post.id} post={post} />
-        ))}
-      </div>
-    </LayoutBase >
-}
-
-export default LayoutTag

themes/nobelium/LayoutTagIndex.js

@@ -1,31 +0,0 @@
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTagIndex = (props) => {
-  const { tagOptions } = props
-  return (
-      <LayoutBase {...props}>
-            <div>
-                <div id='tags-list' className='duration-200 flex flex-wrap'>
-                    {tagOptions.map(tag => {
-                      return (
-                          <div key={tag.name} className='p-2'>
-                                <Link
-                                    key={tag}
-                                    href={`/tag/${encodeURIComponent(tag.name)}`}
-                                    passHref
-                                    className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
-                    mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
-
-                                    <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-
-                                </Link>
-                            </div>
-                      )
-                    })}
-                </div>
-            </div>   </LayoutBase>
-  )
-}
-
-export default LayoutTagIndex

themes/nobelium/components/ArticleInfo.js

@@ -14,7 +14,7 @@ export const ArticleInfo = (props) => {
         <div>
 
             <div className="font-bold text-3xl text-black dark:text-white">
-            {post.title}
+            {post?.title}
             </div>
 
             {post?.type !== 'Page' && <>
@@ -34,13 +34,13 @@ export const ArticleInfo = (props) => {
             </div>
             <div className="mr-2 mb-4 md:ml-0">
               {formatDate(
-                post?.publishTime || post.createdTime,
+                post?.publishTime || post?.createdTime,
                 BLOG.LANG
               )}
             </div>
             {post.tags && (
               <div className="flex flex-nowrap max-w-full overflow-x-auto article-tags">
-                {post.tags.map(tag => (
+                {post?.tags.map(tag => (
                   <TagItem key={tag} tag={tag} />
                 ))}
               </div>

themes/nobelium/components/BlogArchiveItem.js

@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * 归档分组文章
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
+  return (
+        <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+                {archiveTitle}
+            </div>
+
+            <ul>
+                {archivePosts[archiveTitle].map(post => (
+                    <li
+                        key={post.id}
+                        className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                    >
+                        <div id={post?.publishTime}>
+                            <span className="text-gray-400">
+                                {post.date?.start_date}
+                            </span>{' '}
+                            &nbsp;
+                            <Link
+                                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                passHref
+                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+
+                                {post.title}
+
+                            </Link>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+  )
+}

themes/nobelium/components/BlogListBar.js

@@ -0,0 +1,39 @@
+import Tags from './Tags'
+
+export default function BlogListBar(props) {
+  const { tag, setFilterKey } = props
+  const handleSearchChange = (val) => {
+    setFilterKey(val)
+  }
+  if (tag) {
+    return (<div className="mb-4">
+            <div className='relative'>
+                <input
+                    type="text"
+                    placeholder={
+                        tag ? `Search in #${tag}` : 'Search Articles'
+                    }
+                    className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
+                    onChange={e => handleSearchChange(e.target.value)}
+                />
+                <svg
+                    className="absolute right-3 top-3 h-5 w-5 text-black dark:text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    ></path>
+                </svg>
+            </div>
+            <Tags {...props} />
+        </div>)
+  } else {
+    return <></>
+  }
+}

themes/nobelium/components/SearchNavBar.js

@@ -0,0 +1,17 @@
+import SearchInput from './SearchInput'
+import Tags from './Tags'
+
+/**
+ * 搜索页面上方嵌入内容
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNavBar(props) {
+  return (<>
+    <div className='pb-12'>
+        <SearchInput {...props} />
+    </div>
+
+    <Tags {...props}/>
+    </>)
+}

themes/nobelium/index.js

@@ -1,14 +1,261 @@
 import CONFIG_NOBELIUM from './config_nobelium'
-import LayoutIndex from './LayoutIndex'
-import LayoutSearch from './LayoutSearch'
-import LayoutArchive from './LayoutArchive'
-import LayoutSlug from './LayoutSlug'
-import Layout404 from './Layout404'
-import LayoutCategory from './LayoutCategory'
-import LayoutCategoryIndex from './LayoutCategoryIndex'
-import LayoutPage from './LayoutPage'
-import LayoutTag from './LayoutTag'
-import LayoutTagIndex from './LayoutTagIndex'
+import CommonHead from '@/components/CommonHead'
+import React, { useEffect, useState } from 'react'
+import Nav from './components/Nav'
+import { Footer } from './components/Footer'
+import JumpToTopButton from './components/JumpToTopButton'
+import Live2D from '@/components/Live2D'
+import { useGlobal } from '@/lib/global'
+
+import BLOG from '@/blog.config'
+import Announcement from './components/Announcement'
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+
+import { useRouter } from 'next/router'
+
+import Mark from 'mark.js'
+import { deepClone, isBrowser } from '@/lib/utils'
+import SearchNavBar from './components/SearchNavBar'
+import BlogArchiveItem from './components/BlogArchiveItem'
+
+import { ArticleLock } from './components/ArticleLock'
+import NotionPage from '@/components/NotionPage'
+import { ArticleInfo } from './components/ArticleInfo'
+import Comment from '@/components/Comment'
+import { ArticleFooter } from './components/ArticleFooter'
+import ShareBar from '@/components/ShareBar'
+
+import Link from 'next/link'
+import BlogListBar from './components/BlogListBar'
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, meta, post, topSlot } = props
+
+  const fullWidth = post?.fullWidth ?? false
+  const { onLoading } = useGlobal()
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+  return (
+        <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
+            {/* SEO相关 */}
+            <CommonHead meta={meta} />
+
+            {/* 顶部导航栏 */}
+            <Nav {...props} />
+
+            {/* 主区 */}
+            <main id='out-wrapper' className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
+                {/* 顶部插槽 */}
+                {topSlot}
+
+                {onLoading ? LoadingCover : children}
+
+            </main>
+
+            {/* 页脚 */}
+            <Footer {...props} />
+
+            {/* 右下悬浮 */}
+            <div className='fixed right-4 bottom-4'>
+                <JumpToTopButton />
+            </div>
+
+            {/* 左下悬浮 */}
+            <div className="bottom-4 -left-14 fixed justify-end z-40">
+                <Live2D />
+            </div>
+        </div>
+  )
+}
+
+/**
+ * 首页
+ * 首页是个博客列表，加上顶部嵌入一个公告
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = props => {
+  return (
+        <LayoutPostList {...props} topSlot={<Announcement {...props} />} />
+  )
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = props => {
+  const { posts } = props
+
+  // 在列表中进行实时过滤
+  const [filterKey, setFilterKey] = useState('')
+  let filteredBlogPosts = []
+  if (filterKey && posts) {
+    filteredBlogPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(filterKey.toLowerCase())
+    })
+  } else {
+    filteredBlogPosts = deepClone(posts)
+  }
+
+  return (
+        <LayoutBase {...props} topSlot={<BlogListBar {...props} setFilterKey={setFilterKey} />}>
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} posts={filteredBlogPosts}/> : <BlogListScroll {...props} posts={filteredBlogPosts}/>}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 搜索
+ * 页面是博客列表，上方嵌入一个搜索引导条
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+  const { keyword } = props
+  const router = useRouter()
+
+  useEffect(() => {
+    setTimeout(() => {
+      const container = isBrowser() && document.getElementById('posts-wrapper')
+      if (container && container.innerHTML) {
+        const re = new RegExp(keyword, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
+      }
+    }, 100)
+  }, [router.events])
+
+  return <LayoutPostList {...props} slotTop={<SearchNavBar {...props} />} />
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = props => {
+  const { archivePosts } = props
+  return (
+        <LayoutBase {...props}>
+            <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
+                {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, lock, validPassword } = props
+
+  return (
+        <LayoutBase {...props}>
+
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && <div id="article-wrapper" className="px-2">
+                <>
+                    <ArticleInfo post={post} />
+                    <NotionPage post={post} />
+                    <ShareBar post={post} />
+                    <Comment frontMatter={post} />
+                    <ArticleFooter />
+                </>
+            </div>}
+
+        </LayoutBase>
+  )
+}
+
+/**
+ * 404 页面
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = (props) => {
+  return <LayoutBase {...props}>
+        404 Not found.
+    </LayoutBase>
+}
+
+/**
+ * 文章分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = (props) => {
+  const { categoryOptions } = props
+
+  return (
+        <LayoutBase {...props}>
+            <div id='category-list' className='duration-200 flex flex-wrap'>
+                {categoryOptions?.map(category => {
+                  return (
+                        <Link
+                            key={category.name}
+                            href={`/category/${category.name}`}
+                            passHref
+                            legacyBehavior>
+                            <div
+                                className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+                                <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                            </div>
+                        </Link>
+                  )
+                })}
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 文章标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = (props) => {
+  const { tagOptions } = props
+  return (
+        <LayoutBase {...props}>
+            <div>
+                <div id='tags-list' className='duration-200 flex flex-wrap'>
+                    {tagOptions.map(tag => {
+                      return (
+                            <div key={tag.name} className='p-2'>
+                                <Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref
+                                    className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
+                                    <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+                                </Link>
+                            </div>
+                      )
+                    })}
+                </div>
+            </div>
+        </LayoutBase>
+  )
+}
 
 export {
   CONFIG_NOBELIUM as THEME_CONFIG,
@@ -17,9 +264,7 @@ export {
   LayoutArchive,
   LayoutSlug,
   Layout404,
-  LayoutCategory,
+  LayoutPostList,
   LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
   LayoutTagIndex
 }

themes/simple/Layout404.js

@@ -1,9 +0,0 @@
-import LayoutBase from './LayoutBase'
-
-export const Layout404 = (props) => {
-  return <LayoutBase {...props}>
-        404 Not found.
-    </LayoutBase>
-}
-
-export default Layout404

themes/simple/LayoutArchive.js

@@ -1,47 +0,0 @@
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutArchive = props => {
-  const { archivePosts } = props
-
-  return (
-    <LayoutBase {...props}>
-      <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
-          <div key={archiveTitle}>
-            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
-              {archiveTitle}
-            </div>
-
-            <ul>
-              {archivePosts[archiveTitle].map(post => (
-                <li
-                  key={post.id}
-                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
-                >
-                  <div id={post?.publishTime}>
-                    <span className="text-gray-400">
-                      {post.date?.start_date}
-                    </span>{' '}
-                    &nbsp;
-                    <Link
-                      href={`${BLOG.SUB_PATH}/${post.slug}`}
-                      passHref
-                      className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
-
-                      {post.title}
-
-                    </Link>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutArchive

themes/simple/LayoutBase.js

@@ -1,73 +0,0 @@
-import CommonHead from '@/components/CommonHead'
-import React from 'react'
-import { Header } from './components/Header'
-import { NavBar } from './components/NavBar'
-import { Footer } from './components/Footer'
-// import { Title } from './components/Title'
-import { SideBar } from './components/SideBar'
-import JumpToTopButton from './components/JumpToTopButton'
-import BLOG from '@/blog.config'
-import { TopBar } from './components/TopBar'
-import CONFIG_SIMPLE from './config_simple'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
-import { useGlobal } from '@/lib/global'
-import { AdSlot } from '@/components/GoogleAdsense'
-
-/**
- * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
-
- * @returns {JSX.Element}
- * @constructor
- */
-const LayoutBase = props => {
-  const { children, meta } = props
-  const { onLoading } = useGlobal()
-
-  /**
-     * 路由跳转时的遮罩
-     */
-  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
-        <div className='w-full h-96 flex justify-center items-center'>
-            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
-        </div>
-    </div>
-
-  if (isBrowser()) {
-    loadExternalResource('/css/theme-simple.css', 'css')
-  }
-  return (
-        <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
-            <CommonHead meta={meta} />
-
-            {CONFIG_SIMPLE.TOP_BAR && <TopBar {...props} />}
-
-            {/* 顶部LOGO */}
-            <Header {...props} />
-
-            {/* 导航栏 */}
-            <NavBar {...props} />
-
-            {/* 主体 */}
-            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
-                <div id='container-inner ' className='w-full flex-grow'>
-                    {onLoading ? LoadingCover : children}
-                    <AdSlot type='native'/>
-                </div>
-
-                <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
-                    <SideBar {...props} />
-                </div>
-
-            </div>
-
-            <div className='fixed right-4 bottom-4 z-20'>
-                <JumpToTopButton />
-            </div>
-
-            <Footer {...props} />
-
-        </div>
-  )
-}
-
-export default LayoutBase

themes/simple/LayoutCategory.js

@@ -1,12 +0,0 @@
-import BLOG from '@/blog.config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategory = props => {
-  return <LayoutBase {...props}>
-       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </LayoutBase >
-}
-
-export default LayoutCategory

themes/simple/LayoutCategoryIndex.js

@@ -1,28 +0,0 @@
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutCategoryIndex = props => {
-  const { categoryOptions } = props
-  return (
-    <LayoutBase {...props}>
-        <div id='category-list' className='duration-200 flex flex-wrap'>
-          {categoryOptions?.map(category => {
-            return (
-              <Link
-                key={category.name}
-                href={`/category/${category.name}`}
-                passHref
-                legacyBehavior>
-                <div
-                  className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                  <i className='mr-4 fas fa-folder' />{category.name}({category.count})
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-    </LayoutBase>
-  )
-}
-
-export default LayoutCategoryIndex

themes/simple/LayoutIndex.js

@@ -1,15 +0,0 @@
-
-import BLOG from '@/blog.config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import LayoutBase from './LayoutBase'
-
-export const LayoutIndex = props => {
-  return (
-    <LayoutBase {...props}>
-       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </LayoutBase>
-  )
-}
-
-export default LayoutIndex

themes/simple/LayoutPage.js

@@ -1,12 +0,0 @@
-import { BlogListPage } from './components/BlogListPage'
-import LayoutBase from './LayoutBase'
-
-export const LayoutPage = props => {
-  return (
-    <LayoutBase {...props}>
-        <BlogListPage {...props} />
-    </LayoutBase>
-  )
-}
-
-export default LayoutPage

themes/simple/LayoutSearch.js

@@ -1,52 +0,0 @@
-import BLOG from '@/blog.config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import Mark from 'mark.js'
-import LayoutBase from './LayoutBase'
-import { isBrowser } from '@/lib/utils'
-
-export const LayoutSearch = props => {
-  const { keyword } = props
-  const router = useRouter()
-
-  useEffect(() => {
-    setTimeout(() => {
-      const container = isBrowser() && document.getElementById('posts-wrapper')
-      if (container && container.innerHTML) {
-        const re = new RegExp(keyword, 'gim')
-        const instance = new Mark(container)
-        instance.markRegExp(re, {
-          element: 'span',
-          className: 'text-red-500 border-b border-dashed'
-        })
-      }
-    }, 100)
-  }, [router.events])
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (keyword) {
-        const targets = document.getElementsByClassName('replace')
-        for (const container of targets) {
-          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>`
-            )
-          }
-        }
-      }
-    }, 100)
-  }, [])
-
-  return <LayoutBase {...props}>
-
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-
-    </LayoutBase>
-}
-
-export default LayoutSearch

themes/simple/LayoutSlug.js

@@ -1,40 +0,0 @@
-import LayoutBase from './LayoutBase'
-import { ArticleLock } from './components/ArticleLock'
-import NotionPage from '@/components/NotionPage'
-import { ArticleInfo } from './components/ArticleInfo'
-import Comment from '@/components/Comment'
-import ArticleAround from './components/ArticleAround'
-import ShareBar from '@/components/ShareBar'
-import { AdSlot } from '@/components/GoogleAdsense'
-
-export const LayoutSlug = props => {
-  const { post, lock, validPassword, prev, next } = props
-
-  return (
-        <LayoutBase {...props}>
-
-            {lock && <ArticleLock validPassword={validPassword} />}
-
-            <div id="article-wrapper" className="px-2 xl:max-w-4xl 2xl:max-w-6xl ">
-
-                <ArticleInfo post={post} />
-
-                <AdSlot type={'in-article'} />
-
-                {!lock && <NotionPage post={post} />}
-
-                <ShareBar post={post} />
-
-                <AdSlot type={'in-article'} />
-
-                {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
-
-                <Comment frontMatter={post} />
-
-            </div>
-
-        </LayoutBase>
-  )
-}
-
-export default LayoutSlug

themes/simple/LayoutTag.js

@@ -1,12 +0,0 @@
-import BLOG from '@/blog.config'
-import { BlogListPage } from './components/BlogListPage'
-import { BlogListScroll } from './components/BlogListScroll'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTag = props => {
-  return <LayoutBase {...props}>
-       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-    </LayoutBase >
-}
-
-export default LayoutTag

themes/simple/LayoutTagIndex.js

@@ -1,31 +0,0 @@
-import Link from 'next/link'
-import LayoutBase from './LayoutBase'
-
-export const LayoutTagIndex = (props) => {
-  const { tagOptions } = props
-  return (
-      <LayoutBase {...props}>
-            <div>
-                <div id='tags-list' className='duration-200 flex flex-wrap'>
-                    {tagOptions.map(tag => {
-                      return (
-                          <div key={tag.name} className='p-2'>
-                                <Link
-                                    key={tag}
-                                    href={`/tag/${encodeURIComponent(tag.name)}`}
-                                    passHref
-                                    className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
-                    mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
-
-                                    <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-
-                                </Link>
-                            </div>
-                      )
-                    })}
-                </div>
-            </div>   </LayoutBase>
-  )
-}
-
-export default LayoutTagIndex

themes/simple/components/BlogArchiveItem.js

@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+/**
+ * 归档分组文章
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
+  return (
+        <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+                {archiveTitle}
+            </div>
+
+            <ul>
+                {archivePosts[archiveTitle].map(post => (
+                    <li
+                        key={post.id}
+                        className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                    >
+                        <div id={post?.publishTime}>
+                            <span className="text-gray-400">
+                                {post.date?.start_date}
+                            </span>{' '}
+                            &nbsp;
+                            <Link
+                                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                passHref
+                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+
+                                {post.title}
+
+                            </Link>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+  )
+}

themes/simple/components/SearchInput.js

@@ -0,0 +1,86 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
+
+const SearchInput = ({ keyword, cRef, className }) => {
+  const [onLoading, setLoadingState] = useState(false)
+  const router = useRouter()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+
+    if (key && key !== '') {
+      setLoadingState(true)
+      location.href = '/search/' + key
+    } else {
+      router.push({ pathname: '/' }).then(r => {
+      })
+    }
+  }
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) { // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) { // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+  }
+
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = (val) => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+  function lockSearchInput() {
+    lock = true
+  }
+
+  function unLockSearchInput() {
+    lock = false
+  }
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+        <input
+            ref={searchInputRef}
+            type='text'
+            className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+            onKeyUp={handleKeyUp}
+            onCompositionStart={lockSearchInput}
+            onCompositionUpdate={lockSearchInput}
+            onCompositionEnd={unLockSearchInput}
+            onChange={e => updateSearchKey(e.target.value)}
+            defaultValue={keyword}
+        />
+
+        <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+            onClick={handleSearch}>
+            <i className={`hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
+        </div>
+
+        {(showClean &&
+            <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+                <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300' onClick={cleanSearch} />
+            </div>
+        )}
+    </div>
+}
+
+export default SearchInput

themes/simple/index.js

@@ -1,14 +1,263 @@
 import CONFIG_SIMPLE from './config_simple'
-import LayoutIndex from './LayoutIndex'
-import LayoutSearch from './LayoutSearch'
-import LayoutArchive from './LayoutArchive'
-import LayoutSlug from './LayoutSlug'
-import Layout404 from './Layout404'
-import LayoutCategory from './LayoutCategory'
-import LayoutCategoryIndex from './LayoutCategoryIndex'
-import LayoutPage from './LayoutPage'
-import LayoutTag from './LayoutTag'
-import LayoutTagIndex from './LayoutTagIndex'
+
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Mark from 'mark.js'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+import BlogArchiveItem from './components/BlogArchiveItem'
+
+import { ArticleLock } from './components/ArticleLock'
+import NotionPage from '@/components/NotionPage'
+import { ArticleInfo } from './components/ArticleInfo'
+import Comment from '@/components/Comment'
+import ArticleAround from './components/ArticleAround'
+import ShareBar from '@/components/ShareBar'
+import { AdSlot } from '@/components/GoogleAdsense'
+import Link from 'next/link'
+import CommonHead from '@/components/CommonHead'
+import { TopBar } from './components/TopBar'
+import { Header } from './components/Header'
+import { NavBar } from './components/NavBar'
+import BLOG from '@/blog.config'
+import { SideBar } from './components/SideBar'
+import JumpToTopButton from './components/JumpToTopButton'
+import { Footer } from './components/Footer'
+import { useGlobal } from '@/lib/global'
+import SearchInput from './components/SearchInput'
+
+/**
+ * 基础布局
+ *
+ * @param {*} props
+ * @returns
+ */
+const LayoutBase = props => {
+  const { children, meta, slotTop } = props
+  const { onLoading } = useGlobal()
+
+  /**
+   * 路由跳转时的遮罩
+   */
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-96 flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-simple.css', 'css')
+  }
+  return (
+        <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
+            <CommonHead meta={meta} />
+
+            {CONFIG_SIMPLE.TOP_BAR && <TopBar {...props} />}
+
+            {/* 顶部LOGO */}
+            <Header {...props} />
+
+            {/* 导航栏 */}
+            <NavBar {...props} />
+
+            {/* 主体 */}
+            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
+                <div id='container-inner ' className='w-full flex-grow'>
+                    {slotTop}
+                    {onLoading ? LoadingCover : children}
+                    <AdSlot type='native' />
+                </div>
+
+                <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
+                    <SideBar {...props} />
+                </div>
+
+            </div>
+
+            <div className='fixed right-4 bottom-4 z-20'>
+                <JumpToTopButton />
+            </div>
+
+            <Footer {...props} />
+
+        </div>
+  )
+}
+
+/**
+ * 博客首页
+ * 首页就是列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = props => {
+  return <LayoutPostList {...props} />
+}
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = props => {
+  return (
+        <LayoutBase {...props}>
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 搜索页
+ * 也是博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+  const { keyword } = props
+  const router = useRouter()
+  useEffect(() => {
+    setTimeout(() => {
+      const container = isBrowser() && document.getElementById('posts-wrapper')
+      if (container && container.innerHTML) {
+        const re = new RegExp(keyword, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
+      }
+    }, 100)
+  }, [router])
+
+  return <LayoutPostList {...props} slotTop={<SearchInput {...props} />} />
+}
+
+/**
+ * 归档页
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = props => {
+  const { archivePosts } = props
+  return (
+        <LayoutBase {...props}>
+            <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
+                {Object.keys(archivePosts).map(archiveTitle => <BlogArchiveItem key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />)}
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, lock, validPassword, prev, next } = props
+
+  return (
+        <LayoutBase {...props}>
+
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            <div id="article-wrapper" className="px-2 xl:max-w-4xl 2xl:max-w-6xl ">
+
+                {/* 文章信息 */}
+                <ArticleInfo post={post} />
+
+                {/* 广告嵌入 */}
+                <AdSlot type={'in-article'} />
+
+                {/* Notion文章主体 */}
+                {!lock && <NotionPage post={post} />}
+
+                {/* 分享 */}
+                <ShareBar post={post} />
+
+                {/* 广告嵌入 */}
+                <AdSlot type={'in-article'} />
+
+                {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+
+                {/* 评论区 */}
+                <Comment frontMatter={post} />
+
+            </div>
+
+        </LayoutBase>
+  )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = (props) => {
+  return <LayoutBase {...props}>
+        404 Not found.
+    </LayoutBase>
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+  const { categoryOptions } = props
+  return (
+        <LayoutBase {...props}>
+            <div id='category-list' className='duration-200 flex flex-wrap'>
+                {categoryOptions?.map(category => {
+                  return (
+                        <Link
+                            key={category.name}
+                            href={`/category/${category.name}`}
+                            passHref
+                            legacyBehavior>
+                            <div
+                                className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+                                <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                            </div>
+                        </Link>
+                  )
+                })}
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = (props) => {
+  const { tagOptions } = props
+  return (
+        <LayoutBase {...props}>
+            <div id='tags-list' className='duration-200 flex flex-wrap'>
+                {tagOptions.map(tag => {
+                  return (
+                        <div key={tag.name} className='p-2'>
+                            <Link
+                                key={tag}
+                                href={`/tag/${encodeURIComponent(tag.name)}`}
+                                passHref
+                                className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200  mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
+                                <div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+                            </Link>
+                        </div>
+                  )
+                })}
+            </div>
+        </LayoutBase>
+  )
+}
 
 export {
   CONFIG_SIMPLE as THEME_CONFIG,
@@ -17,9 +266,7 @@ export {
   LayoutArchive,
   LayoutSlug,
   Layout404,
-  LayoutCategory,
   LayoutCategoryIndex,
-  LayoutPage,
-  LayoutTag,
+  LayoutPostList,
   LayoutTagIndex
 }