主题微调

components/DebugPanel.js

@@ -1,9 +1,10 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { useRouter } from 'next/router'
 import Select from './Select'
+import { ALL_THEME } from '@/lib/theme'
 /**
  *
  * @returns 调试面板
@@ -13,9 +14,8 @@ export function DebugPanel () {
   const GlobalConfig = useGlobal()
   const router = useRouter()
   const { theme, setTheme } = GlobalConfig
-  const allThemes = Object.keys(ThemeMap)
   const themeOptions = []
-  allThemes.forEach(t => {
+  ALL_THEME.forEach(t => {
     themeOptions.push({ value: t, text: t })
   })
 
@@ -24,18 +24,10 @@ export function DebugPanel () {
   }
 
   function switchTheme () {
-    const currentIndex = allThemes.indexOf(theme)
-    const newIndex = currentIndex < allThemes.length - 1 ? currentIndex + 1 : 0
-    changeTheme(allThemes[newIndex])
+    const currentIndex = ALL_THEME.indexOf(theme)
+    const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
+    changeTheme(ALL_THEME[newIndex])
   }
-
-  useEffect(() => {
-    const theme = router.query.theme
-    if (theme && allThemes.indexOf(theme) > -1) {
-      changeTheme(theme)
-    }
-  })
-
   /**
    * 切换主题
    */
@@ -59,14 +51,10 @@ export function DebugPanel () {
   return (
     <>
       {/* 调试按钮 */}
-      <div
-        className={`${
-          show ? 'right-96' : ''
-        } fixed right-0 bottom-36 duration-200 z-50`}
-      >
+      <div>
         <div
           style={{ writingMode: 'vertical-lr' }}
-          className="bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer"
+          className={`bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-36 duration-200 z-50`}
           onClick={toggleShow}
         >
           {show
@@ -119,7 +107,6 @@ export function DebugPanel () {
           </div>
           <div className="text-xs">
             {Object.keys(ThemeMap[theme].THEME_CONFIG).map(k => (
-              <>
                 <div key={k} className="justify-between flex py-1">
                   <span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
                     {k}
@@ -128,7 +115,6 @@ export function DebugPanel () {
                     {filterResult(ThemeMap[theme].THEME_CONFIG[k] + '')}
                   </span>
                 </div>
-              </>
             ))}
           </div>
         </div>

lib/global.js

@@ -1,8 +1,9 @@
 import lang from './lang'
 import { useContext, createContext, useState } from 'react'
 import Router from 'next/router'
-import { initDarkMode } from './theme'
+import { ALL_THEME, initDarkMode } from './theme'
 import BLOG from '@/blog.config'
+
 const GlobalContext = createContext()
 let hasInit = false
 
@@ -17,6 +18,7 @@ export function GlobalContextProvider ({ children }) {
   const [isDarkMode, updateDarkMode] = useState(false)
   const [onLoading, changeLoadingState] = useState(false)
   const [theme, setTheme] = useState(BLOG.THEME)
+
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
   })
@@ -31,8 +33,13 @@ export function GlobalContextProvider ({ children }) {
       hasInit = true
       initLocale(locale, updateLocale)
       initDarkMode(isDarkMode, updateDarkMode)
+      // 读取浏览器参数中的主题
+      const userTheme = Router?.router?.query?.theme
+      if (userTheme && ALL_THEME.indexOf(userTheme) > -1) {
+        setTheme(userTheme)
+      }
     }
-  }, 100)
+  }, 50)
 
   return (
     <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode, theme, setTheme }}>

lib/theme.js

@@ -1,6 +1,7 @@
 import cookie from 'react-cookies'
 import BLOG from '@/blog.config'
 
+export const ALL_THEME = ['next', 'fukasawa', 'hexo', 'empty', 'medium']
 /**
  * 初始化主题
  * @param isDarkMode

themes/Empty/LayoutBase.js

@@ -28,7 +28,7 @@ const LayoutBase = props => {
       </div>
       {/* 内容主体 */}
       <main id="wrapper" className="flex justify-center flex-1 pb-12">
-        <div className="max-w-6xl">{children}</div>
+        <div className="max-w-6xl px-3">{children}</div>
       </main>
     </div>
   )

themes/Empty/LayoutIndex.js

@@ -5,7 +5,6 @@ export const LayoutIndex = props => {
   const { posts } = props
   return (
     <LayoutBase {...props}>
-      Index
       {posts.map(p => (
         <div key={p.id} className='border my-12'>
           <Link href={`/article/${p.slug}`}>

themes/Empty/LayoutSearch.js

@@ -1,6 +1,42 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import LayoutBase from './LayoutBase'
 
-export const LayoutSearch = (props) => {
-  return <LayoutBase {...props}>
-  </LayoutBase>
+export const LayoutSearch = props => {
+  const { keyword, posts } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+  let handleTextColor = false
+  useEffect(() => {
+    setTimeout(() => {
+      if (currentSearch && !handleTextColor) {
+        const container = document.getElementById('container')
+        if (container && container.innerHTML) {
+          const re = new RegExp(`${currentSearch}`, 'gim')
+          container.innerHTML = container.innerHTML.replace(
+            re,
+            `<span class='text-red-500 border-b border-dashed'>${currentSearch}</span>`
+          )
+          handleTextColor = true
+        }
+      }
+    }, 100)
+  })
+
+  return (
+    <LayoutBase {...props}>
+      <h2>Search</h2>
+      <div id="container">
+        {posts.map(p => (
+          <div key={p.id} className="border my-12">
+            <Link href={`/article/${p.slug}`}>
+              <a className="underline cursor-pointer">{p.title}</a>
+            </Link>
+            <div>{p.summary}</div>
+          </div>
+        ))}
+      </div>
+    </LayoutBase>
+  )
 }

themes/Fukasawa/LayoutBase.js

@@ -28,7 +28,7 @@ const LayoutBase = (props) => {
     <div className='flex'>
       <AsideLeft {...props}/>
       <main id='wrapper' className='flex w-full py-8 justify-center'>
-        <div className='2xl:max-w-6xl md:max-w-3xl w-full'>
+        <div className='2xl:max-w-6xl md:max-w-4xl w-full'>
           <div> {headerSlot} </div>
           <div>{children}</div>
         </div>

themes/Hexo/components/BlogPostCard.js

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer hover:underline text-3xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>

themes/Medium/components/BlogPostCard.js

@@ -15,7 +15,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
+            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
               {post.title}
             </a>
           </Link>

themes/NEXT/components/BlogPostCard.js

@@ -17,7 +17,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer font-bold hover:underline text-3xl flex ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>