refactor-hexo

themes/hexo/components/Header.js

@@ -9,10 +9,10 @@ import BLOG from '@/blog.config'
 let wrapperTop = 0
 
 /**
- *
- * @returns 头图
+ * 顶部全屏大图
+ * @returns
  */
-const Header = props => {
+const Hero = props => {
   const [typed, changeType] = useState()
   const { siteInfo } = props
   const { locale } = useGlobal()
@@ -79,4 +79,4 @@ const Header = props => {
   )
 }
 
-export default Header
+export default Hero

themes/hexo/components/NavButtonGroup.js

@@ -14,7 +14,7 @@ const NavButtonGroup = (props) => {
   }
 
   return (
-    <nav id='home-nav-button' className={'w-full z-10 md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
+    <nav id='home-nav-button' className={'w-full z-10 md:h-72 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-1 md:flex justify-center max-h-80 overflow-auto'}>
       {categoryOptions.map(category => {
         return (
           <Link

themes/hexo/components/RightFloatArea.js

@@ -0,0 +1,42 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useState } from 'react'
+import FloatDarkModeButton from './FloatDarkModeButton'
+import JumpToTopButton from './JumpToTopButton'
+
+/**
+ * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
+ * @param {*} param0
+ * @returns
+ */
+export default function RightFloatArea({ floatSlot }) {
+  const [showFloatButton, switchShow] = useState(false)
+  const scrollListener = useCallback(throttle(() => {
+    const targetRef = document.getElementById('wrapper')
+    const clientHeight = targetRef?.clientHeight
+    const scrollY = window.pageYOffset
+    const fullHeight = clientHeight - window.outerHeight
+    let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+    if (per > 100) per = 100
+    const shouldShow = scrollY > 100 && per > 0
+
+    // 右下角显示悬浮按钮
+    if (shouldShow !== showFloatButton) {
+      switchShow(shouldShow)
+    }
+  }, 200))
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  return (
+        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
+                <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
+                    <FloatDarkModeButton />
+                    {floatSlot}
+                    <JumpToTopButton />
+                </div>
+            </div>
+  )
+}

themes/hexo/components/SearchNav.js

@@ -0,0 +1,70 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
+import Card from './Card'
+import SearchInput from './SearchInput'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 搜索页面的导航
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNav(props) {
+  const { tagOptions, categoryOptions } = props
+  const cRef = useRef(null)
+  const { locale } = useGlobal()
+  useEffect(() => {
+    // 自动聚焦到搜索框
+    cRef?.current?.focus()
+  }, [])
+
+  return <>
+    <div className="my-6 px-2">
+        <SearchInput cRef={cRef} {...props} />
+        {/* 分类 */}
+        <Card className="w-full mt-4">
+            <div className="dark:text-gray-200 mb-5 mx-3">
+                <i className="mr-4 fas fa-th" />
+                {locale.COMMON.CATEGORY}:
+            </div>
+            <div id="category-list" className="duration-200 flex flex-wrap mx-8">
+                {categoryOptions?.map(category => {
+                  return (
+                      <Link
+                          key={category.name}
+                          href={`/category/${category.name}`}
+                          passHref
+                          legacyBehavior>
+                          <div
+                              className={
+                                  ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-indigo-400 hover:text-white'
+                              }
+                          >
+                              <i className="mr-4 fas fa-folder" />
+                              {category.name}({category.count})
+                          </div>
+                      </Link>
+                  )
+                })}
+            </div>
+        </Card>
+        {/* 标签 */}
+        <Card className="w-full mt-4">
+            <div className="dark:text-gray-200 mb-5 ml-4">
+                <i className="mr-4 fas fa-tag" />
+                {locale.COMMON.TAGS}:
+            </div>
+            <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
+                {tagOptions?.map(tag => {
+                  return (
+                        <div key={tag.name} className="p-2">
+                            <TagItemMini key={tag.name} tag={tag} />
+                        </div>
+                  )
+                })}
+            </div>
+        </Card>
+    </div>
+</>
+}

themes/hexo/components/SideRight.js

@@ -10,8 +10,22 @@ import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Announcement from './Announcement'
 import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
 
 const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
+const FaceBookPage = dynamic(
+  () => {
+    let facebook = <></>
+    try {
+      facebook = import('@/components/FacebookPage')
+    } catch (err) {
+      console.error(err)
+    }
+    return facebook
+  },
+  { ssr: false }
+)
+
 /**
  * Hexo主题右侧栏
  * @param {*} props
@@ -20,7 +34,7 @@ const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
 export default function SideRight(props) {
   const {
     post, currentCategory, categories, latestPosts, tags,
-    currentTag, showCategory, showTag, slot, notice
+    currentTag, showCategory, showTag, rightAreaSlot, notice
   } = props
 
   const { locale } = useGlobal()
@@ -57,7 +71,10 @@ export default function SideRight(props) {
         {post && post.toc && post.toc.length > 1 && <Card>
           <Catalog toc={post.toc} />
         </Card>}
-        {slot}
+
+        {rightAreaSlot}
+        <FaceBookPage/>
+        <Live2D />
       </div>
 
     </div>

themes/hexo/components/SlotBar.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+
+/**
+ * 博客列表上方嵌入条
+ * @param {*} props
+ * @returns
+ */
+export default function SlotBar(props) {
+  const { tag, category } = props
+
+  if (tag) {
+    return <div className="cursor-pointer px-3 py-2 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
+              <Link key={tag} href={`/tag/${encodeURIComponent(tag.name)}`} passHref
+                  className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
+                  <div className='font-light dark:text-gray-400 dark:hover:text-white'> #{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+              </Link>
+          </div>
+  } else if (category) {
+    return <div className="cursor-pointer text-lg px-5 py-1 mb-2 font-light hover:text-indigo-700 dark:hover:text-indigo-400 transform dark:text-white">
+              <i className="mr-1 far fa-folder-open" />  {category}
+          </div>
+  }
+  return <></>
+}