From 8b407f0ec42282d24ea5ae8903a0c76276cdafb9 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 22 Mar 2024 17:08:26 +0800
Subject: [PATCH] =?UTF-8?q?simple=20medium=E4=B8=BB=E9=A2=98=E5=BE=AE?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/medium/components/BlogPostBar.js |  14 +-
 themes/simple/components/BlogPostBar.js |  29 ++
 themes/simple/index.js                  | 366 ++++++++++++++----------
 3 files changed, 248 insertions(+), 161 deletions(-)
 create mode 100644 themes/simple/components/BlogPostBar.js

diff --git a/themes/medium/components/BlogPostBar.js b/themes/medium/components/BlogPostBar.js
index 7cada8fa..9f34aca5 100644
--- a/themes/medium/components/BlogPostBar.js
+++ b/themes/medium/components/BlogPostBar.js
@@ -10,9 +10,19 @@ export default function BlogPostBar(props) {
   const { locale } = useGlobal()
 
   if (tag) {
-    return <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}:</div>{tag}</div>
+    return (
+      <div className='flex items-center text-xl py-8'>
+        <i className='mr-2 fas fa-tag' />
+        {locale.COMMON.TAGS}:{tag}
+      </div>
+    )
   } else if (category) {
-        <div className='flex items-center  py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />{locale.COMMON.CATEGORY}:</div>{category}</div>
+    return (
+      <div className='flex items-center text-xl py-8'>
+        <i className='mr-2 fas fa-th' />
+        {locale.COMMON.CATEGORY}:{category}
+      </div>
+    )
   } else {
     return <></>
   }
diff --git a/themes/simple/components/BlogPostBar.js b/themes/simple/components/BlogPostBar.js
new file mode 100644
index 00000000..9efac113
--- /dev/null
+++ b/themes/simple/components/BlogPostBar.js
@@ -0,0 +1,29 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章列表上方嵌入
+ * @param {*} props
+ * @returns
+ */
+export default function BlogPostBar(props) {
+  const { tag, category } = props
+  const { locale } = useGlobal()
+
+  if (tag) {
+    return (
+      <div className='flex items-center text-xl py-2'>
+        <i className='mr-2 fas fa-tag' />
+        {locale.COMMON.TAGS}: {tag}
+      </div>
+    )
+  } else if (category) {
+    return (
+      <div className='flex items-center text-xl py-2'>
+        <i className='mr-2 fas fa-th' />
+        {locale.COMMON.CATEGORY}: {category}
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}
diff --git a/themes/simple/index.js b/themes/simple/index.js
index 60867451..9bef23f0 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -1,37 +1,59 @@
-import CONFIG from './config'
-import { createContext, useContext, useEffect, useRef } from 'react'
-import { isBrowser } from '@/lib/utils'
-import { useGlobal } from '@/lib/global'
 import { AdSlot } from '@/components/GoogleAdsense'
-import { siteConfig } from '@/lib/config'
-import { Transition } from '@headlessui/react'
-import Link from 'next/link'
-import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
-import dynamic from 'next/dynamic'
 import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import BlogPostBar from './components/BlogPostBar'
+import CONFIG from './config'
+import { Style } from './style'
 
-const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })
+const AlgoliaSearchModal = dynamic(
+  () => import('@/components/AlgoliaSearchModal'),
+  { ssr: false }
+)
 
 // 主题组件
-const BlogListScroll = dynamic(() => import('./components/BlogListScroll'), { ssr: false });
-const BlogArchiveItem = dynamic(() => import('./components/BlogArchiveItem'), { ssr: false });
-const ArticleLock = dynamic(() => import('./components/ArticleLock'), { ssr: false });
-const ArticleInfo = dynamic(() => import('./components/ArticleInfo'), { ssr: false });
-const Comment = dynamic(() => import('@/components/Comment'), { ssr: false });
-const ArticleAround = dynamic(() => import('./components/ArticleAround'), { ssr: false });
-const ShareBar = dynamic(() => import('@/components/ShareBar'), { ssr: false });
-const TopBar = dynamic(() => import('./components/TopBar'), { ssr: false });
-const Header = dynamic(() => import('./components/Header'), { ssr: false });
-const NavBar = dynamic(() => import('./components/NavBar'), { ssr: false });
-const SideBar = dynamic(() => import('./components/SideBar'), { ssr: false });
-const JumpToTopButton = dynamic(() => import('./components/JumpToTopButton'), { ssr: false });
-const Footer = dynamic(() => import('./components/Footer'), { ssr: false });
-const SearchInput = dynamic(() => import('./components/SearchInput'), { ssr: false });
-const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false });
-const BlogListPage = dynamic(() => import('./components/BlogListPage'), { ssr: false })
-const RecommendPosts = dynamic(() => import('./components/RecommendPosts'), { ssr: false })
+const BlogListScroll = dynamic(() => import('./components/BlogListScroll'), {
+  ssr: false
+})
+const BlogArchiveItem = dynamic(() => import('./components/BlogArchiveItem'), {
+  ssr: false
+})
+const ArticleLock = dynamic(() => import('./components/ArticleLock'), {
+  ssr: false
+})
+const ArticleInfo = dynamic(() => import('./components/ArticleInfo'), {
+  ssr: false
+})
+const Comment = dynamic(() => import('@/components/Comment'), { ssr: false })
+const ArticleAround = dynamic(() => import('./components/ArticleAround'), {
+  ssr: false
+})
+const ShareBar = dynamic(() => import('@/components/ShareBar'), { ssr: false })
+const TopBar = dynamic(() => import('./components/TopBar'), { ssr: false })
+const Header = dynamic(() => import('./components/Header'), { ssr: false })
+const NavBar = dynamic(() => import('./components/NavBar'), { ssr: false })
+const SideBar = dynamic(() => import('./components/SideBar'), { ssr: false })
+const JumpToTopButton = dynamic(() => import('./components/JumpToTopButton'), {
+  ssr: false
+})
+const Footer = dynamic(() => import('./components/Footer'), { ssr: false })
+const SearchInput = dynamic(() => import('./components/SearchInput'), {
+  ssr: false
+})
+const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
+const BlogListPage = dynamic(() => import('./components/BlogListPage'), {
+  ssr: false
+})
+const RecommendPosts = dynamic(() => import('./components/RecommendPosts'), {
+  ssr: false
+})
 
 // 主题全局状态
 const ThemeGlobalSimple = createContext()
@@ -50,57 +72,63 @@ const LayoutBase = props => {
 
   return (
     <ThemeGlobalSimple.Provider value={{ searchModal }}>
-        <div id='theme-simple' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black scroll-smooth`}>
+      <div
+        id='theme-simple'
+        className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black scroll-smooth`}>
+        <Style />
 
-            <Style/>
+        {siteConfig('SIMPLE_TOP_BAR', null, CONFIG) && <TopBar {...props} />}
 
-            {siteConfig('SIMPLE_TOP_BAR', null, CONFIG) && <TopBar {...props} />}
+        {/* 顶部LOGO */}
+        <Header {...props} />
 
-            {/* 顶部LOGO */}
-            <Header {...props} />
+        {/* 导航栏 */}
+        <NavBar {...props} />
 
-            {/* 导航栏 */}
-            <NavBar {...props} />
+        {/* 主体 */}
+        <div
+          id='container-wrapper'
+          className={
+            (JSON.parse(siteConfig('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 min-h-fit'>
+            <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}
 
-            {/* 主体 */}
-            <div id='container-wrapper' className={(JSON.parse(siteConfig('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 min-h-fit'>
-                    <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>
+            <AdSlot type='native' />
+          </div>
 
-                        {children}
-                    </Transition>
-                    <AdSlot type='native' />
-                </div>
-
-              {fullWidth
-                ? null
-                : <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">
+          {fullWidth ? null : (
+            <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>
-
-              {/* 搜索框 */}
-              <AlgoliaSearchModal cRef={searchModal} {...props}/>
-
-            <Footer {...props} />
-
+          )}
         </div>
+
+        <div className='fixed right-4 bottom-4 z-20'>
+          <JumpToTopButton />
+        </div>
+
+        {/* 搜索框 */}
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
+
+        <Footer {...props} />
+      </div>
     </ThemeGlobalSimple.Provider>
   )
 }
@@ -121,9 +149,14 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-        <>
-            {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-        </>
+    <>
+      <BlogPostBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogListPage {...props} />
+      ) : (
+        <BlogListScroll {...props} />
+      )}
+    </>
   )
 }
 
@@ -149,7 +182,9 @@ const LayoutSearch = props => {
     }
   }, [])
 
-  const slotTop = siteConfig('ALGOLIA_APP_ID') ? null : <SearchInput {...props} />
+  const slotTop = siteConfig('ALGOLIA_APP_ID') ? null : (
+    <SearchInput {...props} />
+  )
 
   return <LayoutPostList {...props} slotTop={slotTop} />
 }
@@ -162,11 +197,17 @@ const LayoutSearch = props => {
 const LayoutArchive = props => {
   const { archivePosts } = props
   return (
-        <>
-            <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>
-        </>
+    <>
+      <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>
+    </>
   )
 }
 
@@ -180,39 +221,39 @@ const LayoutSlug = props => {
   const { fullWidth } = useGlobal()
 
   return (
-        <>
+    <>
+      {lock && <ArticleLock validPassword={validPassword} />}
 
-            {lock && <ArticleLock validPassword={validPassword} />}
+      <div
+        id='article-wrapper'
+        className={`px-2  ${fullWidth ? '' : 'xl:max-w-4xl 2xl:max-w-6xl'}`}>
+        {/* 文章信息 */}
+        <ArticleInfo post={post} />
 
-            <div id="article-wrapper" className={`px-2  ${fullWidth ? '' : 'xl:max-w-4xl 2xl:max-w-6xl'}`}>
+        {/* 广告嵌入 */}
+        {/* <AdSlot type={'in-article'} /> */}
+        <WWAds orientation='horizontal' className='w-full' />
 
-                {/* 文章信息 */}
-                <ArticleInfo post={post} />
+        {/* Notion文章主体 */}
+        {!lock && <NotionPage post={post} />}
 
-                {/* 广告嵌入 */}
-                {/* <AdSlot type={'in-article'} /> */}
-                <WWAds orientation="horizontal" className="w-full" />
+        {/* 分享 */}
+        <ShareBar post={post} />
 
-                {/* Notion文章主体 */}
-                {!lock && <NotionPage post={post} />}
+        {/* 广告嵌入 */}
+        <AdSlot type={'in-article'} />
 
-                {/* 分享 */}
-                <ShareBar post={post} />
+        {post?.type === 'Post' && (
+          <>
+            <ArticleAround prev={prev} next={next} />
+            <RecommendPosts recommendPosts={recommendPosts} />
+          </>
+        )}
 
-                {/* 广告嵌入 */}
-                <AdSlot type={'in-article'} />
-
-                {post?.type === 'Post' && <>
-                <ArticleAround prev={prev} next={next} />
-                <RecommendPosts recommendPosts={recommendPosts}/>
-                </>}
-
-                {/* 评论区 */}
-                <Comment frontMatter={post} />
-
-            </div>
-
-        </>
+        {/* 评论区 */}
+        <Comment frontMatter={post} />
+      </div>
+    </>
   )
 }
 
@@ -221,27 +262,28 @@ const LayoutSlug = props => {
  * @param {*} props
  * @returns
  */
-const Layout404 = (props) => {
+const Layout404 = props => {
   const { post } = props
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
-  return <>
-        404 Not found.
-    </>
+  return <>404 Not found.</>
 }
 
 /**
@@ -252,24 +294,27 @@ const Layout404 = (props) => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   return (
-        <>
-            <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>
-        </>
+    <>
+      <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>
+    </>
   )
 }
 
@@ -278,38 +323,41 @@ const LayoutCategoryIndex = props => {
  * @param {*} props
  * @returns
  */
-const LayoutTagIndex = (props) => {
+const LayoutTagIndex = props => {
   const { tagOptions } = props
   return (
-        <>
-            <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 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>
+    </>
   )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
+  LayoutIndex,
   LayoutPostList,
-  LayoutTagIndex
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }