From 0319acea704d9a48e74780c3bdd269ff4da5f2b8 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 4 May 2023 18:24:47 +0800
Subject: [PATCH] =?UTF-8?q?matery=20=E5=85=AC=E5=91=8A=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DebugPanel.js                      |   2 +-
 lib/lang/en-US.js                             |   3 +-
 lib/lang/zh-CN.js                             |   3 +-
 themes/matery/LayoutBase.js                   |  19 +--
 themes/matery/LayoutIndex.js                  |   3 +-
 themes/matery/LayoutSlug.js                   | 133 +++++++++---------
 themes/matery/components/Announcement.js      |  29 ++++
 themes/matery/components/BlogPostListPage.js  |   2 +-
 .../matery/components/BlogPostListScroll.js   |   2 +-
 .../matery/components/FloatDarkModeButton.js  |   5 +-
 themes/matery/components/Header.js            |   7 +-
 .../matery/components/JumpToCommentButton.js  |   9 +-
 themes/matery/components/JumpToTopButton.js   |  13 +-
 13 files changed, 134 insertions(+), 96 deletions(-)
 create mode 100644 themes/matery/components/Announcement.js

diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index 01e3c579..55c4a465 100644
--- a/components/DebugPanel.js
+++ b/components/DebugPanel.js
@@ -58,7 +58,7 @@ export function DebugPanel() {
             <div>
                 <div
                     style={{ writingMode: 'vertical-lr' }}
-                    className={`bg-black text-xs text-white shadow-2xl p-1.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-56 duration-200 z-50`}
+                    className={`bg-black text-xs text-white shadow-2xl p-1.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-72 duration-200 z-50`}
                     onClick={toggleShow}
                 >
                     {show
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 10ac5bf9..58bec1e5 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -39,7 +39,8 @@ export default {
     DEBUG_OPEN: 'Debug',
     DEBUG_CLOSE: 'Close',
     THEME_SWITCH: 'Theme Switch',
-    ANNOUNCEMENT: 'Announcement'
+    ANNOUNCEMENT: 'Announcement',
+    START_READING: 'Start Reading'
   },
   PAGINATION: {
     PREV: 'Prev',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 8379c75f..511bb3bf 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -41,7 +41,8 @@ export default {
     DEBUG_OPEN: '开启调试',
     DEBUG_CLOSE: '关闭调试',
     THEME_SWITCH: '切换主题',
-    ANNOUNCEMENT: '公告'
+    ANNOUNCEMENT: '公告',
+    START_READING: '开始阅读'
   },
   PAGINATION: {
     PREV: '上一页',
diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js
index fb5df18e..0fcba177 100644
--- a/themes/matery/LayoutBase.js
+++ b/themes/matery/LayoutBase.js
@@ -51,9 +51,15 @@ const LayoutBase = props => {
             {headerSlot}
 
             <main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24 relative">
+                {/* 嵌入区域 */}
+                               <div id="container-slot" className={`w-full max-w-6xl ${props?.post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
+                   {props.containerSlot}
+                </div>
+
                 <div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
                     {onLoading ? <LoadingCover /> : children}
                 </div>
+
             </main>
 
             {/* 左下角悬浮 */}
@@ -61,15 +67,12 @@ const LayoutBase = props => {
                 <Live2D />
             </div>
 
-            <div className="bottom-40 right-2 fixed justify-end z-20">
-                <FloatDarkModeButton />
-            </div>
-
             {/* 右下角悬浮 */}
-            <div className={ (show ? ' opacity-100 fixed ' : ' hidden opacity-0 ') + ' transition-all duration-200  bottom-12 right-2 justify-end z-20' }>
-                <div className= ' justify-center  flex flex-col items-center cursor-pointer '>
-                    <JumpToTopButton />
-                </div>
+            <div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
+                <FloatDarkModeButton />
+                <JumpToTopButton />
+                {/* 可扩展的右下角悬浮 */}
+                {props.floatRightBottom}
             </div>
 
             <Footer title={siteInfo?.title || BLOG.TITLE} />
diff --git a/themes/matery/LayoutIndex.js b/themes/matery/LayoutIndex.js
index d5488ebb..a25c360a 100644
--- a/themes/matery/LayoutIndex.js
+++ b/themes/matery/LayoutIndex.js
@@ -5,9 +5,10 @@ import Header from './components/Header'
 import CONFIG_MATERY from './config_matery'
 import LayoutBase from './LayoutBase'
 import React from 'react'
+import Announcement from './components/Announcement'
 
 export const LayoutIndex = (props) => {
-  return <LayoutBase {...props} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Header {...props} />}>
+  return <LayoutBase {...props} containerSlot={ <Announcement {...props}/>} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Header {...props} />}>
     {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
   </LayoutBase>
 }
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index da07db06..362e8be4 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -11,6 +11,7 @@ import Catalog from './components/Catalog'
 import JumpToCommentButton from './components/JumpToCommentButton'
 import throttle from 'lodash.throttle'
 import ShareBar from '@/components/ShareBar'
+import Announcement from './components/Announcement'
 
 export const LayoutSlug = props => {
   const { post, lock, validPassword } = props
@@ -25,6 +26,7 @@ export const LayoutSlug = props => {
       switchShow(shouldShow)
     }
   }, throttleMs))
+
   useEffect(() => {
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
@@ -44,85 +46,82 @@ export const LayoutSlug = props => {
         {...props}
         showCategory={false}
         showTag={false}
+        floatRightBottom={<JumpToCommentButton />}
     >
 
-        <div id='inner-wrapper'>
-            <div className={'w-full lg:max-w-3xl 2xl:max-w-4xl'}>
-                <div className="-mt-32 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
-                    {lock && <ArticleLock validPassword={validPassword} />}
+        <div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
+            {/* 文章主体卡片 */}
+            <div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+                {lock && <ArticleLock validPassword={validPassword} />}
 
-                    {!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
-                        {post?.type && post?.type === 'Post' && <>
-                            <div
-                                data-aos="fade-down"
-                                data-aos-duration="100"
-                                data-aos-once="false"
-                                data-aos-anchor-placement="top-center"
-                                className='px-10'>
-                                <ArticleInfo post={post} />
-                            </div>
-                            <hr />
-                        </>}
-
-                        <div className='lg:px-10 subpixel-antialiased'>
-                            <article itemScope >
-                                {/* Notion文章主体 */}
-                                <section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'>
-                                    {post && <NotionPage post={post} />}
-                                </section>
-
-                                <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-                                    {/* 文章内嵌广告 */}
-                                    <ins className="adsbygoogle"
-                                        style={{ display: 'block', textAlign: 'center' }}
-                                        data-adtest="on"
-                                        data-ad-layout="in-article"
-                                        data-ad-format="fluid"
-                                        data-ad-client="ca-pub-2708419466378217"
-                                        data-ad-slot="3806269138" />
-                                </section>
-                                {/* 分享 */}
-                                <ShareBar post={post} />
-                                {/* 文章版权说明 */}
-                                {post.type === 'Post' && <ArticleCopyright {...props} />}
-
-                            </article>
-
-                            <hr className='border-dashed' />
-
-                            {/* 评论互动 */}
-                            <div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
-                                <Comment frontMatter={post} />
-                            </div>
+                {!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
+                    {post?.type && post?.type === 'Post' && <>
+                        <div
+                            data-aos="fade-down"
+                            data-aos-duration="100"
+                            data-aos-once="false"
+                            data-aos-anchor-placement="top-center"
+                            className='px-10'>
+                            <ArticleInfo post={post} />
                         </div>
+                        <hr />
+                    </>}
 
-                    </div>}
-                </div>
+                    <div className='lg:px-10 subpixel-antialiased'>
+                        <article itemScope >
+                            {/* Notion文章主体 */}
+                            <section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'>
+                                {post && <NotionPage post={post} />}
+                            </section>
 
-                {/* 文章推荐 */}
-                {post.type === 'Post' && <ArticleAdjacent {...props} />}
+                            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
+                                {/* 文章内嵌广告 */}
+                                <ins className="adsbygoogle"
+                                    style={{ display: 'block', textAlign: 'center' }}
+                                    data-adtest="on"
+                                    data-ad-layout="in-article"
+                                    data-ad-format="fluid"
+                                    data-ad-client="ca-pub-2708419466378217"
+                                    data-ad-slot="3806269138" />
+                            </section>
+                            {/* 分享 */}
+                            <ShareBar post={post} />
+                            {/* 文章版权说明 */}
+                            {post.type === 'Post' && <ArticleCopyright {...props} />}
 
-                {/* 文章目录 */}
-                {post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
-                    <div data-aos-delay="200"
-                        data-aos="fade-down"
-                        data-aos-duration="200"
-                        data-aos-once="true"
-                        data-aos-anchor-placement="top-center"
-                        className='relative h-full'>
-                        <div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
-                            <div className='sticky top-24'>
-                                <Catalog toc={post.toc} />
-                            </div>
+                        </article>
+
+                        <hr className='border-dashed' />
+
+                        {/* 评论互动 */}
+                        <div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
+                            <Comment frontMatter={post} />
                         </div>
                     </div>
+
                 </div>}
-
             </div>
 
-            <div className='fixed bottom-28 right-4'>
-                <JumpToCommentButton />
-            </div>
+            {/* 底部文章推荐 */}
+            {post.type === 'Post' && <ArticleAdjacent {...props} />}
+
+            <Announcement {...props}/>
+
+            {/* 右侧文章目录 */}
+            {post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
+                <div data-aos-delay="200"
+                    data-aos="fade-down"
+                    data-aos-duration="200"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-center"
+                    className='relative h-full'>
+                    <div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
+                        <div className='sticky top-24'>
+                            <Catalog toc={post.toc} />
+                        </div>
+                    </div>
+                </div>
+            </div>}
 
         </div>
 
diff --git a/themes/matery/components/Announcement.js b/themes/matery/components/Announcement.js
new file mode 100644
index 00000000..c4d99f97
--- /dev/null
+++ b/themes/matery/components/Announcement.js
@@ -0,0 +1,29 @@
+import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice }) => {
+  const { locale } = useGlobal()
+  if (!notice) {
+    return <></>
+  }
+  return <>
+        <div
+            data-aos="zoom-in"
+            data-aos-duration="500"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
+            className="w-full mb-4 p-2 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
+        <div className="text-sm flex flex-nowrap justify-between">
+            <div className="font-light text-gray-600  dark:text-gray-200">
+                <i className="mx-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
+            </div>
+        </div>
+        {notice && (<div id="announcement-content">
+            <NotionPage post={notice} className='text-center ' />
+        </div>)}
+        </div>
+    </>
+}
+export default Announcement
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index 82028115..cca1a7e9 100644
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
       <div id="container" className='w-full'>
         <div className='pt-6'></div>
         {/* 文章列表 */}
-        <div className="pt-4 flex flex-wrap pb-24" >
+        <div className="pt-4 flex flex-wrap pb-12" >
           {posts.map(post => (
            <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'> <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} /></div>
           ))}
diff --git a/themes/matery/components/BlogPostListScroll.js b/themes/matery/components/BlogPostListScroll.js
index e0c9afd5..45e7d4cd 100644
--- a/themes/matery/components/BlogPostListScroll.js
+++ b/themes/matery/components/BlogPostListScroll.js
@@ -57,7 +57,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
     return <div id='container' ref={targetRef} className='w-full'>
 
       {/* 文章列表 */}
-      <div className="pt-4 flex flex-wrap pb-24" >
+      <div className="pt-4 flex flex-wrap pb-12" >
         {postsToShow.map(post => (
             <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'>
             <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} />
diff --git a/themes/matery/components/FloatDarkModeButton.js b/themes/matery/components/FloatDarkModeButton.js
index a8821123..2e8fad7a 100644
--- a/themes/matery/components/FloatDarkModeButton.js
+++ b/themes/matery/components/FloatDarkModeButton.js
@@ -21,9 +21,8 @@ export default function FloatDarkModeButton() {
 
   return (
         <div className={'justify-center items-center text-center' } onClick={handleChangeDarkMode}>
-            <i id="darkModeButton"
-                className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas transform hover:scale-105 duration-200
-                text-2xl text-white bg-indigo-700 px-3 py-2.5 rounded-full dark:bg-black cursor-pointer`} />
+            <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas transform hover:scale-105 duration-200
+                 text-white bg-indigo-700  w-10 h-10  py-2.5 rounded-full dark:bg-black cursor-pointer`} />
         </div>
   )
 }
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index 4e84e70c..c21c5523 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_MATERY from '../config_matery'
 import throttle from 'lodash.throttle'
+import { useGlobal } from '@/lib/global'
 
 let wrapperTop = 0
 let windowTop = 0
@@ -17,6 +18,8 @@ const throttleMs = 200
 const Header = props => {
   const [typed, changeType] = useState()
   const { siteInfo } = props
+  const { locale } = useGlobal()
+
   useEffect(() => {
     scrollTrigger()
     updateHeaderHeight()
@@ -96,8 +99,8 @@ const Header = props => {
                     <span id='typed' />
                 </div>
                 <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-                    className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl">
-                    <i className='animate-bounce fas fa-angle-double-down' /> <span>开始阅读</span>
+                    className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
+                    <i className='animate-bounce fas fa-angle-double-down' /> <span>{locale.COMMON.START_READING}</span>
                 </div>
             </div>
 
diff --git a/themes/matery/components/JumpToCommentButton.js b/themes/matery/components/JumpToCommentButton.js
index 1a11e765..0fe9ee98 100644
--- a/themes/matery/components/JumpToCommentButton.js
+++ b/themes/matery/components/JumpToCommentButton.js
@@ -17,11 +17,10 @@ const JumpToCommentButton = () => {
     }
   }
 
-  return (<div
-        onClick={navToComment}
-        className='flex space-x-1 items-center justify-center cursor-pointer transform hover:scale-105 duration-200 w-7 h-7 text-center'>
-        <i className='fas fa-comments text-xl text-white bg-indigo-700 py-3 px-2 rounded-full' />
-    </div>)
+  return <div className={'justify-center items-center text-center'} onClick={navToComment}>
+        <i id="darkModeButton" className={`fas fa-comments transform hover:scale-105 duration-200 text-white
+         text-sm  bg-indigo-700 w-10 h-10 rounded-full dark:bg-black cursor-pointer py-3`} />
+    </div>
 }
 
 export default JumpToCommentButton
diff --git a/themes/matery/components/JumpToTopButton.js b/themes/matery/components/JumpToTopButton.js
index 984e76ca..2aa762dd 100644
--- a/themes/matery/components/JumpToTopButton.js
+++ b/themes/matery/components/JumpToTopButton.js
@@ -16,11 +16,14 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
   if (!CONFIG_MATERY.WIDGET_TO_TOP) {
     return <></>
   }
-  return (<div className=' drop-shadow-md space-x-1 items-center justify-center transform hover:scale-105 duration-200 px-3 py-2 text-center text-white bg-indigo-700 dark:bg-hexo-black-gray rounded-full'
-         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
-        <div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-2xl rounded-full' /></div>
-        {showPercent && (<div className='text-md hidden lg:block'>{percent}</div>)}
-    </div>)
+
+  return <div data-aos="fade-left"
+        data-aos-duration="300"
+        data-aos-anchor-placement="top-center"
+        className={'justify-center items-center text-center'} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+        <i id="darkModeButton" title={locale.POST.TOP} className={`fas fa-arrow-up transform hover:scale-105 duration-200 text-white
+        bg-indigo-700 w-10 h-10 rounded-full dark:bg-black cursor-pointer py-2.5`} />
+    </div>
 }
 
 export default JumpToTopButton