theme-game 微调

themes/game/components/BlogListPage.js

@@ -1,13 +1,25 @@
+import { siteConfig } from '@/lib/config'
 import { GameListIndexCombine } from './GameListIndexCombine'
-
+import PaginationSimple from './PaginationSimple'
+/**
+ * 分页博客列表
+ * @param {*} props
+ * @returns
+ */
 export const BlogListPage = props => {
+  const { page = 1, postCount } = props
+  const totalPage = Math.ceil(
+    postCount / parseInt(siteConfig('POSTS_PER_PAGE'))
+  )
+  const showNext = page < totalPage
+
   return (
     <>
       <div id='posts-wrapper' className='my-4 select-none'>
         <GameListIndexCombine {...props} />
       </div>
 
-      {/* 这里不显示分页组件，首页只展示部分即可 */}
+      <PaginationSimple page={page} showNext={showNext} />
     </>
   )
 }

themes/game/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 mt-4 px-2'>
+        <i className='mr-2 fas fa-tag' />
+        {locale.COMMON.TAGS}:{tag}
+      </div>
+    )
+  } else if (category) {
+    return (
+      <div className='flex items-center text-xl mt-4 px-2'>
+        <i className='mr-2 fas fa-th' />
+        {locale.COMMON.CATEGORY}:{category}
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}

themes/game/components/DarkModeButton.js

@@ -23,7 +23,9 @@ const DarkModeButton = props => {
     <div
       onClick={toggleDarkMode}
       className={`${className || ''} flex items-center`}>
-      <i className={`fas mr-2 ${isDarkMode ? 'fa-sun' : 'fa-moon px-0.5'}`} />
+      <i
+        className={`w-6 mr-2 fas ${isDarkMode ? 'fa-sun' : 'fa-moon px-0.5'}`}
+      />
       {isDarkMode ? 'Dark Mode' : 'Light Mode'}{' '}
     </div>
   )

themes/game/components/MenuItemDrop.js

@@ -3,43 +3,66 @@ import { useState } from 'react'
 
 export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
-  //   const show = true
-  //   const changeShow = () => {}
   if (!link || !link.show) {
     return null
   }
 
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <li className='mx-3 my-2' >
-        <div className='cursor-pointer ' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}>
-            {!hasSubMenu &&
-                <div className="block text-black dark:text-gray-50 nav" >
-                    <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} >
-                        {link?.icon && <i className={link?.icon} />} {link?.name}
-                    </Link>
+  return (
+    <li>
+      <div
+        className='cursor-pointer relative'
+        onMouseOver={() => changeShow(true)}
+        onMouseOut={() => changeShow(false)}>
+        {!hasSubMenu && (
+          <div className='dark:text-gray-50 nav hover:scale-105 transition-transform duration-200'>
+            <Link
+              href={link?.to}
+              className='flex flex-nowrap'
+              target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
+              <div className='w-6 mr-2 text-center'>
+                {link?.icon && <i className={link?.icon} />}
+              </div>
+              {link?.name}
+            </Link>
+          </div>
+        )}
+
+        {hasSubMenu && (
+          <div className='dark:text-gray-50 nav'>
+            {link?.icon && <i className={`${link?.icon} w-6 text-center`} />}{' '}
+            {link?.name}
+            <i
+              className={`absolute right-0 top-0 px-2 h-full flex items-center fas fa-chevron-left duration-500 transition-all ${show ? ' rotate-180' : ''} `}></i>
+          </div>
+        )}
+
+        {/* 子菜单 */}
+        {hasSubMenu && (
+          <ul
+            className={`${show ? 'visible opacity-100 -left-5 ml-40' : 'invisible opacity-0 -left-4 '} rounded shadow-md z-30 -mt-2 py-2 px-4 absolute top-0 hover:scale-105 transition-all duration-200 border-gray-100  bg-white  dark:bg-black`}>
+            {link.subMenus.map((sLink, index) => {
+              return (
+                <div
+                  key={index}
+                  className='text-gray-700 dark:text-gray-200  tracking-widest transition-all duration-200 '>
+                  <Link
+                    href={sLink.to}
+                    target={
+                      link?.to?.indexOf('http') === 0 ? '_blank' : '_self'
+                    }>
+                    <span className='text-sm text-nowrap font-extralight'>
+                      {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                      {sLink.title}
+                    </span>
+                  </Link>
                 </div>
-            }
-
-            {hasSubMenu &&
-                <div className='block text-black dark:text-gray-50 nav'>
-                    {link?.icon && <i className={link?.icon} />} {link?.name}
-                    <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
-                </div>
-            }
-
-            {/* 子菜单 */}
-            {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-                {link.subMenus.map((sLink, index) => {
-                  return <div key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                        <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} >
-                            <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                        </Link>
-                    </div>
-                })}
-            </ul>}
-
-        </div>
-
+              )
+            })}
+          </ul>
+        )}
+      </div>
     </li>
+  )
 }

themes/game/components/MenuList.js

@@ -47,21 +47,25 @@ export const MenuList = props => {
   }
 
   return (
-    <ul>
-      <li className='py-4 px-2 font-bold'>
+    <ul
+      className={`dark:text-white p-4 space-y-4 shadow-md hover:shadow-xl transition-shadow duration-200 bg-white dark:bg-hexo-black-gray my-4 rounded-md`}>
+      <li>
         <button
-          className='flex items-center gap-2'
+          className='flex items-center hover:scale-105 transition-transform duration-200'
           onClick={() => {
             setSideBarVisible(true)
           }}>
-          <i className='fas fa-search' />
+          <i className='fas fa-search w-6 mr-2' />
           <span>Search</span>
         </button>
-        <button className='flex items-center gap-2'>
+      </li>
+      <li>
+        <button className='flex items-center hover:scale-105 transition-transform duration-200'>
           {/* 切换深色模式 */}
-          <DarkModeButton className='text-center py-4' />
+          <DarkModeButton className='text-center' />
         </button>
       </li>
+      {links?.length > 0 && <hr />}
 
       {links?.map(
         (link, index) =>

themes/game/components/PaginationSimple.js

@@ -0,0 +1,54 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 简易翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationSimple = ({ page, showNext }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const currentPage = +page
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
+
+  return (
+    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel='prev'
+        className={`${
+          currentPage === 1 ? 'invisible' : 'visible'
+        } text-center w-full duration-200 px-4 py-2 hover:border-black dark:border-hexo-black-gray border-b-2 hover:font-bold`}>
+        ←{locale.PAGINATION.PREV}
+      </Link>
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel='next'
+        className={`${
+          showNext ? 'visible' : 'invisible'
+        } text-center w-full duration-200 px-4 py-2 hover:border-black dark:border-hexo-black-gray border-b-2 hover:font-bold`}>
+        {locale.PAGINATION.NEXT}→
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple

themes/game/components/PostInfo.js

@@ -33,7 +33,7 @@ export default function PostInfo(props) {
           <>
             <nav className='flex my-2 items-start text-gray-500 dark:text-gray-400'>
               {post?.tags && (
-                <div className='flex flex-nowrap max-w-full overflow-x-auto article-tags'>
+                <div className='flex flex-wrap max-w-full overflow-x-auto article-tags'>
                   {post?.tags.map(tag => (
                     <TagItem key={tag} tag={tag} />
                   ))}

themes/game/components/SearchNavBar.js

@@ -1,17 +0,0 @@
-import SearchInput from './SearchInput'
-import Tags from './Tags'
-
-/**
- * 搜索页面上方嵌入内容
- * @param {*} props
- * @returns
- */
-export default function SearchNavBar(props) {
-  return (<>
-    <div className='pb-12'>
-        <SearchInput {...props} />
-    </div>
-
-    <Tags {...props}/>
-    </>)
-}

themes/game/components/SideBarDrawer.js

@@ -26,7 +26,9 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
       onClose && onClose()
     }
     const sideBarDrawer = window.document.getElementById('sidebar-drawer')
-    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+    const sideBarDrawerBackground = window.document.getElementById(
+      'sidebar-drawer-background'
+    )
 
     if (showStatus) {
       sideBarDrawer?.classList.replace('-ml-96', 'ml-0')
@@ -41,7 +43,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     <div id='sidebar-wrapper' className={`top-0 ${className}`}>
       <div
         id='sidebar-drawer'
-        className={`${isOpen ? 'ml-0 visible opacity-100' : '-ml-96 invisible opacity-0'} w-96  bg-black shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+        className={`${isOpen ? 'ml-0 visible opacity-100' : '-ml-96 invisible opacity-0'} w-96 bg-[#83FFE7] dark:bg-black shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
         {children}
       </div>
 

themes/game/index.js

@@ -13,6 +13,7 @@ import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
+import BlogPostBar from './components/BlogPostBar'
 import { Footer } from './components/Footer'
 import FullScreen from './components/FullScreen'
 import { GameListIndexCombine } from './components/GameListIndexCombine'
@@ -23,7 +24,6 @@ import GroupTag from './components/GroupTag'
 import Header from './components/Header'
 import { MenuList } from './components/MenuList'
 import PostInfo from './components/PostInfo'
-import SearchNavBar from './components/SearchNavBar'
 import SideBarContent from './components/SideBarContent'
 import SideBarDrawer from './components/SideBarDrawer'
 import CONFIG from './config'
@@ -96,11 +96,10 @@ const LayoutBase = props => {
           <div className='w-52 hidden xl:block relative z-10'>
             <div className='py-4 px-2 sticky top-0 h-screen flex flex-col justify-between'>
               <div className='select-none'>
+                {/* 抬头logo等 */}
                 <Header />
-                <nav
-                  className={` dark:text-white bg-white dark:bg-hexo-black-gray my-4 rounded-md px-2`}>
-                  <MenuList {...props} />
-                </nav>
+                {/* 菜单栏 */}
+                <MenuList {...props} />
               </div>
 
               {/* 左侧广告栏目 */}
@@ -179,7 +178,7 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
-  const { posts, tag } = props
+  const { posts } = props
   const { filterKey } = useGameGlobal()
   let filteredBlogPosts = []
   if (filterKey && posts) {
@@ -194,11 +193,11 @@ const LayoutPostList = props => {
 
   return (
     <>
-      {tag && <SearchNavBar {...props} />}
+      <BlogPostBar {...props} />
       {siteConfig('POST_LIST_STYLE') === 'page' ? (
-        <BlogListPage posts={filteredBlogPosts} />
+        <BlogListPage posts={filteredBlogPosts} {...props} />
       ) : (
-        <BlogListScroll posts={filteredBlogPosts} />
+        <BlogListScroll posts={filteredBlogPosts} {...props} />
       )}
     </>
   )
@@ -240,7 +239,6 @@ const LayoutSearch = props => {
 
   return (
     <>
-      <SearchNavBar {...props} />
       {siteConfig('POST_LIST_STYLE') === 'page' ? (
         <BlogListPage {...props} posts={filteredBlogPosts} />
       ) : (
@@ -410,7 +408,7 @@ const LayoutSlug = props => {
               </div>
 
               {/* 游戏资讯 */}
-              <div className='game-info dark:text-white py-4 px-2 mt-8 md:mt-0'>
+              <div className='game-info dark:text-white py-4 px-2 md:px-0 mt-8 md:mt-0'>
                 {/* 关联游戏 */}
                 <div className='w-full'>
                   <GameListRelate posts={relateGames} />
@@ -512,15 +510,14 @@ const LayoutTagIndex = props => {
 }
 
 export {
-    Layout404,
-    LayoutArchive,
-    LayoutBase,
-    LayoutCategoryIndex,
-    LayoutIndex,
-    LayoutPostList,
-    LayoutSearch,
-    LayoutSlug,
-    LayoutTagIndex,
-    CONFIG as THEME_CONFIG
+  Layout404,
+  LayoutArchive,
+  LayoutBase,
+  LayoutCategoryIndex,
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
-