comment-button

themes/matery/LayoutBase.js

@@ -69,7 +69,7 @@ const LayoutBase = props => {
                 <Live2D />
             </div>
 
-            <div className="bottom-24 right-2 fixed justify-end z-20">
+            <div className="bottom-40 right-2 fixed justify-end z-20">
                 <FloatDarkModeButton />
             </div>
 

themes/matery/LayoutSlug.js

@@ -1,21 +1,17 @@
 import React from 'react'
 import { ArticleLock } from './components/ArticleLock'
 import HeaderArticle from './components/HeaderArticle'
-import JumpToCommentButton from './components/JumpToCommentButton'
-import TocDrawer from './components/TocDrawer'
-import TocDrawerButton from './components/TocDrawerButton'
 import LayoutBase from './LayoutBase'
 import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
-import { isBrowser } from '@/lib/utils'
 import { ArticleInfo } from './components/ArticleInfo'
 import Catalog from './components/Catalog'
+import JumpToCommentButton from './components/JumpToCommentButton'
 
 export const LayoutSlug = props => {
   const { post, lock, validPassword } = props
-  const drawerRight = React.useRef(null)
 
   const [show, switchShow] = React.useState(false)
 
@@ -41,26 +37,12 @@ export const LayoutSlug = props => {
         ></LayoutBase>
   }
 
-  const targetRef = isBrowser() ? document.getElementById('container') : null
-
-  const floatSlot = <>
-        {post?.toc?.length > 1 && <div className="block lg:hidden">
-            <TocDrawerButton
-                onClick={() => {
-                  drawerRight?.current?.handleSwitchVisible()
-                }}
-            />
-        </div>}
-        <JumpToCommentButton />
-    </>
-
   return (
         <LayoutBase
             headerSlot={<HeaderArticle {...props} />}
             {...props}
             showCategory={false}
             showTag={false}
-            floatSlot={floatSlot}
         >
 
             <div id='inner-wrapper' className='flex'>
@@ -111,6 +93,10 @@ export const LayoutSlug = props => {
                     {post.type === 'Post' && <ArticleAdjacent {...props} />}
                 </div>
 
+                <div className='fixed bottom-28 right-4'>
+                    <JumpToCommentButton />
+                </div>
+
                 <div id='toc-widget' className='w-60 hidden xl:block '>
                     <div className='fixed top-24 overflow-auto'>
                         {show && <Catalog toc={post.toc} />}
@@ -118,10 +104,6 @@ export const LayoutSlug = props => {
                 </div>
             </div>
 
-            <div className='block lg:hidden'>
-                <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
-            </div>
-
         </LayoutBase>
   )
 }

themes/matery/components/JumpToCommentButton.js

@@ -15,15 +15,13 @@ const JumpToCommentButton = () => {
     if (document.getElementById('comment')) {
       window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
     }
-    // 兼容性不好
-    // const commentElement = document.getElementById('comment')
-    // if (commentElement) {
-    // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
   }
 
-  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
-    <i className='fas fa-comment text-xs' />
-  </div>)
+  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>)
 }
 
 export default JumpToCommentButton