From 0c727d5fe20d1c48637b3cd2e3d987ca0f35c472 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 16 Mar 2022 09:26:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DebugPanel.js | 30 +++++------------ lib/global.js | 11 +++++-- lib/theme.js | 1 + themes/Empty/LayoutBase.js | 2 +- themes/Empty/LayoutIndex.js | 1 - themes/Empty/LayoutSearch.js | 42 ++++++++++++++++++++++-- themes/Fukasawa/LayoutBase.js | 2 +- themes/Hexo/components/BlogPostCard.js | 2 +- themes/Medium/components/BlogPostCard.js | 2 +- themes/NEXT/components/BlogPostCard.js | 2 +- 10 files changed, 62 insertions(+), 33 deletions(-) diff --git a/components/DebugPanel.js b/components/DebugPanel.js index e0641876..40f82f54 100644 --- a/components/DebugPanel.js +++ b/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 ( <> {/* 调试按钮 */} -
+
{show @@ -119,7 +107,6 @@ export function DebugPanel () {
{Object.keys(ThemeMap[theme].THEME_CONFIG).map(k => ( - <>
{k} @@ -128,7 +115,6 @@ export function DebugPanel () { {filterResult(ThemeMap[theme].THEME_CONFIG[k] + '')}
- ))}
diff --git a/lib/global.js b/lib/global.js index 7a2acb84..d1357434 100644 --- a/lib/global.js +++ b/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 ( diff --git a/lib/theme.js b/lib/theme.js index b11fb8fb..c8a8dffa 100644 --- a/lib/theme.js +++ b/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 diff --git a/themes/Empty/LayoutBase.js b/themes/Empty/LayoutBase.js index edb5a992..004a12e5 100644 --- a/themes/Empty/LayoutBase.js +++ b/themes/Empty/LayoutBase.js @@ -28,7 +28,7 @@ const LayoutBase = props => {
{/* 内容主体 */}
-
{children}
+
{children}
) diff --git a/themes/Empty/LayoutIndex.js b/themes/Empty/LayoutIndex.js index c47fffa5..39072ba2 100644 --- a/themes/Empty/LayoutIndex.js +++ b/themes/Empty/LayoutIndex.js @@ -5,7 +5,6 @@ export const LayoutIndex = props => { const { posts } = props return ( - Index {posts.map(p => (
diff --git a/themes/Empty/LayoutSearch.js b/themes/Empty/LayoutSearch.js index fb9244c3..52b61ba2 100644 --- a/themes/Empty/LayoutSearch.js +++ b/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 - +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, + `${currentSearch}` + ) + handleTextColor = true + } + } + }, 100) + }) + + return ( + +

Search

+
+ {posts.map(p => ( +
+ + {p.title} + +
{p.summary}
+
+ ))} +
+ + ) } diff --git a/themes/Fukasawa/LayoutBase.js b/themes/Fukasawa/LayoutBase.js index 39603acb..479e26b3 100644 --- a/themes/Fukasawa/LayoutBase.js +++ b/themes/Fukasawa/LayoutBase.js @@ -28,7 +28,7 @@ const LayoutBase = (props) => {
-
+
{headerSlot}
{children}
diff --git a/themes/Hexo/components/BlogPostCard.js b/themes/Hexo/components/BlogPostCard.js index e0672bf1..1937a355 100644 --- a/themes/Hexo/components/BlogPostCard.js +++ b/themes/Hexo/components/BlogPostCard.js @@ -14,7 +14,7 @@ const BlogPostCard = ({ post, showSummary }) => {
- + {post.title} diff --git a/themes/Medium/components/BlogPostCard.js b/themes/Medium/components/BlogPostCard.js index c3e2a1df..9932078d 100644 --- a/themes/Medium/components/BlogPostCard.js +++ b/themes/Medium/components/BlogPostCard.js @@ -15,7 +15,7 @@ const BlogPostCard = ({ post, showSummary }) => {
- + {post.title} diff --git a/themes/NEXT/components/BlogPostCard.js b/themes/NEXT/components/BlogPostCard.js index 2a0d7614..e5f8ad72 100644 --- a/themes/NEXT/components/BlogPostCard.js +++ b/themes/NEXT/components/BlogPostCard.js @@ -17,7 +17,7 @@ const BlogPostCard = ({ post, showSummary }) => {