gitbook

themes/gitbook/LayoutBase.js

@@ -12,6 +12,8 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import ArticleInfo from './components/ArticleInfo'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -21,7 +23,7 @@ const ThemeGlobalMedium = createContext()
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta, showInfoCard = true, slotLeft, slotTop, siteInfo } = props
+  const { children, meta, posts, post, showInfoCard = true, slotLeft, slotRight, slotTop, siteInfo } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
@@ -45,22 +47,20 @@ const LayoutBase = props => {
 
                     {/* 左侧推拉抽屉 */}
                     <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
-                        <div className='py-14 px-6 sticky top-0'>
-                            <Tabs>
-                                {slotLeft}
-                                <div key={locale.NAV.ABOUT}>
-                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
-                                    {showInfoCard && <InfoCard {...props} />}
-                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
-                                </div>
-                            </Tabs>
-                            <Live2D />
+                        <div className='py-14 px-6 sticky top-0 overflow-y-scroll h-screen'>
+                            {slotLeft}
+
+                            {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
+
+                            {/* 所有文章列表 */}
+                            <BlogPostListScroll posts={posts} />
+
                         </div>
                     </div>
 
-                    <div id='center-wrapper' className='w-full relative z-10 pt-12'>
+                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'>
 
-                        <div id='container-inner' className='w-full px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+                        <div id='container-inner' className='w-full px-7 max-w-5xl justify-center mx-auto'>
                             {slotTop}
 
                             {onLoading ? LoadingCover : children}
@@ -80,17 +80,15 @@ const LayoutBase = props => {
                         <Footer title={siteInfo?.title} />
                     </div>
 
-                    {/* 左侧推拉抽屉 */}
-                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
+                    {/*  右侧侧推拉抽屉 */}
+                    <div className={`hidden xl:block dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
                         <div className='py-14 px-6 sticky top-0'>
-                            <Tabs>
-                                {slotLeft}
-                                <div key={locale.NAV.ABOUT}>
-                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
-                                    {showInfoCard && <InfoCard {...props} />}
-                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
-                                </div>
-                            </Tabs>
+                            {slotRight}
+                            <ArticleInfo post={props?.post ? props.post : props.notice }/>
+                            <div className='pt-12'>
+                                <InfoCard {...props} />
+                                {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                            </div>
                             <Live2D />
                         </div>
                     </div>

themes/gitbook/LayoutIndex.js

@@ -1,11 +1,11 @@
-import BLOG from '@/blog.config'
-import BlogPostListPage from './components/BlogPostListPage'
-import BlogPostListScroll from './components/BlogPostListScroll'
 import LayoutBase from './LayoutBase'
+import Announcement from './components/Announcement'
+import ArticleInfo from './components/ArticleInfo'
 
 export const LayoutIndex = (props) => {
   return <LayoutBase {...props}>
-    {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    {/* gitbook主题首页只显示公告 */}
+    <Announcement {...props}/>
   </LayoutBase>
 }
 

themes/gitbook/LayoutSlug.js

@@ -15,7 +15,7 @@ import CategoryItem from './components/CategoryItem'
 import TagItemMini from './components/TagItemMini'
 import ShareBar from '@/components/ShareBar'
 
-export const LayoutSlug = props => {
+export const LayoutSlug = (props) => {
   const { post, prev, next, siteInfo, lock, validPassword } = props
   const { locale } = useGlobal()
 
@@ -23,20 +23,15 @@ export const LayoutSlug = props => {
     post?.date?.start_date || post?.createdTime,
     locale.LOCALE
   )
+
+  const slotRight = post?.toc && post?.toc?.length > 3 && <Catalog toc={post.toc} />
+  console.log(slotRight, post, 'jhhh')
+
   if (!post) {
-    return <LayoutBase {...props} showInfoCard={true}
-        />
+    return <LayoutBase {...props}/>
   }
-
-  const slotLeft = post?.toc && post?.toc?.length > 3 && (
-        <div key={locale.COMMON.TABLE_OF_CONTENTS} >
-            <Catalog toc={post.toc} />
-            {/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
-        </div>
-  )
-
   return (
-        <LayoutBase showInfoCard={true} slotLeft={slotLeft} {...props} >
+        <LayoutBase slogRight={slotRight} {...props} >
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 

themes/gitbook/components/Announcement.js

@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice, className }) => {
+//   const { locale } = useGlobal()
+  if (notice?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {notice && (<div id="announcement-content">
+            <NotionPage post={notice} />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/gitbook/components/ArticleInfo.js

@@ -0,0 +1,9 @@
+export default function ArticleInfo({ post }) {
+  if (!post) {
+    return null
+  }
+  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
+        <i className="fa-regular fa-clock mr-1" />
+        Last update:  { post.date?.start_date}
+    </div>
+}

themes/gitbook/components/BlogPostCard.js

@@ -1,80 +1,27 @@
 import BLOG from '@/blog.config'
-import NotionPage from '@/components/NotionPage'
-import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import React from 'react'
-import CONFIG_MEDIUM from '../config_medium'
-import CategoryItem from './CategoryItem'
-import TagItemMini from './TagItemMini'
-import TwikooCommentCount from '@/components/TwikooCommentCount'
 
 const BlogPostCard = ({ post, showSummary }) => {
-  const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
-  const { locale } = useGlobal()
   return (
         <div
             key={post.id}
-            data-aos="fade-up"
-            data-aos-duration="300"
-            data-aos-once="false"
-            data-aos-anchor-placement="top-bottom"
-            className="mb-6 max-w-7xl border-b dark:border-gray-800 "
+            className="mb-6"
         >
 
-            <div className="lg:py-8 py-4 flex flex-col w-full">
+            <div className="flex flex-col w-full">
                 <Link
                     href={`${BLOG.SUB_PATH}/${post.slug}`}
                     passHref
                     className={
-                        'cursor-pointer font-bold  hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
+                        'cursor-pointer font-bold  hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
                     }>
                     <div>
-                        {CONFIG_MEDIUM.POST_LIST_COVER && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
-                        </div>}
-                        {post.title}
+                        {post.category} -   {post.title}
                     </div>
 
                 </Link>
 
-                <div
-                    className={
-                        'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
-                    }
-                >
-                    <div className="text-sm py-1">{post.date?.start_date}</div>
-                    {CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category} />}
-                    {CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-                    <TwikooCommentCount post={post} className='hover:underline'/>
-                </div>
-
-                <div className="flex"></div>
-
-                {(!showPreview || showSummary) && (
-                    <p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                        {post.summary}
-                    </p>
-                )}
-
-                {showPreview && (
-                    <div className="overflow-ellipsis truncate">
-                        <NotionPage post={post} />
-                        <div className="pointer-events-none border-t pt-8 border-dashed">
-                            <div className="w-full justify-start flex">
-                                <Link
-                                    href={`${BLOG.SUB_PATH}/${post.slug}`}
-                                    passHref
-                                    className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
-
-                                    {locale.COMMON.ARTICLE_DETAIL}
-                                    <i className="ml-1 fas fa-angle-right" />
-
-                                </Link>
-                            </div>
-                        </div>
-                    </div>
-                )}
             </div>
         </div>
   )

themes/gitbook/components/BlogPostListScroll.js

@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
 import BlogPostCard from './BlogPostCard'
 import BlogPostListEmpty from './BlogPostListEmpty'
-import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
@@ -17,7 +16,8 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
   const postsPerPage = BLOG.POSTS_PER_PAGE
   const [page, updatePage] = useState(1)
   let filteredPosts = Object.assign(posts)
-  const searchKey = getSearchKey()
+  const router = useRouter()
+  const searchKey = getSearchKey(router)
   if (searchKey) {
     filteredPosts = posts.filter(post => {
       const tagContent = post.tags ? post.tags.join(' ') : ''
@@ -56,7 +56,6 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
   })
 
   const targetRef = useRef(null)
-  const { locale } = useGlobal()
 
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
@@ -70,13 +69,6 @@ const BlogPostListScroll = ({ posts = [], currentSearch }) => {
         ))}
       </div>
 
-      <div>
-        <div onClick={() => {
-          handleGetMore()
-        }}
-          className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200'
-        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
-      </div>
     </div>
   }
 }
@@ -95,8 +87,7 @@ const getPostByPage = function (page, totalPosts, postsPerPage) {
   )
 }
 
-function getSearchKey() {
-  const router = useRouter()
+function getSearchKey(router) {
   if (router.query && router.query.s) {
     return router.query.s
   }

themes/gitbook/components/Footer.js

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer
-      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
+      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center mx-auto w-full leading-6 text-sm px-6 pb-6 relative'
     >
        <DarkModeButton/>
       <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>

themes/medium/LayoutBase.js

@@ -12,6 +12,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
+import Announcement from './components/Announcement'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -21,7 +22,7 @@ const ThemeGlobalMedium = createContext()
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo } = props
+  const { children, meta, showInfoCard = true, slotRight, slotTop, siteInfo, notice } = props
   const { locale } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
@@ -78,6 +79,7 @@ const LayoutBase = props => {
                                     {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
                                 </div>
                             </Tabs>
+                            <Announcement post={notice}/>
                             <Live2D />
                         </div>
                     </div>

themes/medium/components/Announcement.js

@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+//   const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center ' />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement