样式微调，主题切换功能

components/ThemeSwitch.js

@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { ALL_THEME } from '@/themes'
 import React from 'react'
 import { Draggable } from './Draggable'
 /**
@@ -6,15 +7,24 @@ import { Draggable } from './Draggable'
  * @returns 主题切换
  */
 export function ThemeSwitch() {
-  const { theme, switchTheme } = useGlobal()
+  const { theme, changeTheme } = useGlobal()
+
+  const onSelectChange = (e) => {
+    changeTheme(e.target.value)
+  }
 
   return (<>
         <Draggable>
             <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
-                    <i className="fas fa-palette mr-1 cursor-move" />
-                    <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div>
-                    <i className='fas fa-arrows cursor-move pl-2' title='click to change theme' alt='click to change theme' />
+                    <i className='fas fa-arrows cursor-move px-2' />
+                    {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
+                    <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase'>
+                        {ALL_THEME.map(t => {
+                          const selected = t === theme
+                          return <option key={t} value={t} selected={selected}>{t}</option>
+                        })}
+                    </select>
                 </div>
             </div>
         </Draggable>

themes/matery/LayoutCategory.js

@@ -2,14 +2,35 @@ import BlogPostListScroll from './components/BlogPostListScroll'
 import BlogPostListPage from './components/BlogPostListPage'
 import LayoutBase from './LayoutBase'
 import BLOG from '@/blog.config'
+import Link from 'next/link'
+import HeaderArticle from './components/HeaderArticle'
 
 export const LayoutCategory = props => {
-  const { category } = props
-  return <LayoutBase {...props}>
-        <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}
+  const { category, categories } = props
+  return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+
+        <div className='inner-wrapper'>
+
+            <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+
+                <div className='flex justify-center flex-wrap'>
+                    {categories.map(e => {
+                      const selected = e.name === category
+                      return (
+                            <Link key={e.name} href={`/category/${e.name}`} passHref>
+                                <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
+                                    <i className={`mr-4 fas  ${selected ? 'fa-folder-open' : 'fa-folder'}`}/>
+                                    {e.name}({e.count})
+                                </div>
+                            </Link>
+                      )
+                    })}
+                </div>
+            </div>
+
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+
         </div>
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+
     </LayoutBase>
 }

themes/matery/LayoutCategoryIndex.js

@@ -1,35 +1,32 @@
-import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
-import Card from './components/Card'
+import HeaderArticle from './components/HeaderArticle'
 import LayoutBase from './LayoutBase'
 
 export const LayoutCategoryIndex = props => {
   const { categories } = props
-  const { locale } = useGlobal()
+
   return (
-    <LayoutBase {...props}>
-      <Card className="w-full min-h-screen">
-        <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">
-          {categories.map(category => {
-            return (
-              <Link key={category.name} href={`/category/${category.name}`} passHref>
-                <div
-                  className={
-                    ' duration-300 dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400'
-                  }
-                >
-                  <i className="mr-4 fas fa-folder" />
-                  {category.name}({category.count})
+        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+
+            <div className='inner-wrapper'>
+
+                <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+
+                    <div className='flex justify-center flex-wrap'>
+                        {categories.map(e => {
+                          return (
+                                <Link key={e.name} href={`/category/${e.name}`} passHref>
+                                    <div className='duration-300 text-md whitespace-nowrap dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400' >
+                                        <i className={'mr-4 fas fa-folder'} />
+                                        {e.name}({e.count})
+                                    </div>
+                                </Link>
+                          )
+                        })}
+                    </div>
                 </div>
-              </Link>
-            )
-          })}
-        </div>
-      </Card>
-    </LayoutBase>
+
+            </div>
+        </LayoutBase>
   )
 }

themes/matery/LayoutTag.js

@@ -14,9 +14,9 @@ export const LayoutTag = (props) => {
 
   return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
 
-        <div className='inner-wrapper drop-shadow-xl'>
+        <div className='inner-wrapper'>
 
-            <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+            <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
 
                 <div className="dark:text-gray-200 py-5 text-center  text-2xl">
                     <i className="fas fa-tags" />  {locale.COMMON.TAGS}
@@ -33,8 +33,10 @@ export const LayoutTag = (props) => {
                     })}
                 </div>
             </div>
+
+            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+
         </div>
 
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
     </LayoutBase>
 }

themes/matery/components/ArticleInfo.js

@@ -28,15 +28,14 @@ export const ArticleInfo = (props) => {
                     passHref
                 >
                     <a className="cursor-pointer whitespace-nowrap">
-                        <i className='far fa-calendar-minus fa-fw'/>发布日期: {date}
+                        <i className='far fa-calendar-minus fa-fw'/> 发布日期: {date}
                     </a>
                 </Link>
                 <span className='whitespace-nowrap'>
                     <i className='far fa-calendar-check fa-fw' /> 更新日期: {post.lastEditedTime}
                 </span>
                 <span className="hidden busuanzi_container_page_pv font-light mr-2">
-                    <i className='mr-1 fas fa-eye' />
-                    <span className="busuanzi_value_page_pv" />
+                    <i className='mr-1 fas fa-eye' /><span className="busuanzi_value_page_pv" />
                 </span>
                 <WordCount />
             </>)}

themes/matery/components/WordCount.js

@@ -10,14 +10,15 @@ export default function WordCount() {
   })
 
   return <span id='wordCountWrapper' className='flex gap-3 font-light'>
-        <span className='flex whitespace-nowrap'>
-            <i className='mr-1 fas fa-file-word' />
-            <span>文章字数</span>
-            <span id='wordCount'>0</span></span>
-        <span className='flex whitespace-nowrap'>
+        <span className='flex whitespace-nowrap items-center'>
+            <i className='pl-1 pr-2 fas fa-file-word' />
+            <span>文章字数</span>&nbsp;
+            <span id='wordCount'>0</span>
+        </span>
+        <span className='flex whitespace-nowrap items-center'>
             <i className='mr-1 fas fa-clock' />
             <span>阅读时长:</span>
-            <span id='readTime'>0</span> 分钟
+            <span id='readTime'>0</span>分钟
         </span>
     </span>
 }