diff --git a/lib/global.js b/lib/global.js index a9e3cac5..5032f2cb 100644 --- a/lib/global.js +++ b/lib/global.js @@ -1,8 +1,9 @@ import lang from './lang' -import { useContext, createContext, useState, useEffect } from 'react' +import { useContext, createContext, useState } from 'react' import Router from 'next/router' -import { initTheme, loadUserThemeFromCookies } from './theme' +import { initDarkMode } from './theme' const GlobalContext = createContext() +let hasInit = false /** * 全局变量Provider，包括语言本地化、样式主题、搜索词 @@ -11,8 +12,8 @@ const GlobalContext = createContext() * @constructor */ export function GlobalContextProvider ({ children }) { - const [locale, changeLocale] = useState(generateLocaleDict('en-US')) - const [theme, changeTheme] = useState(loadUserThemeFromCookies()) + const [locale, updateLocale] = useState(generateLocaleDict('en-US')) + const [isDarkMode, updateDarkMode] = useState(false) const [onLoading, changeLoadingState] = useState(false) Router.events.on('routeChangeStart', (...args) => { changeLoadingState(true) @@ -23,13 +24,17 @@ export function GlobalContextProvider ({ children }) { }) // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作 - useEffect(() => { - initTheme(theme, changeTheme) - initLocale(locale, changeLocale) - }) + setTimeout(() => { + console.log('初始化', hasInit, isDarkMode) + if (!hasInit) { + hasInit = true + initLocale(locale, updateLocale) + initDarkMode(isDarkMode, updateDarkMode) + } + }, 1000) return ( - + {children} ) diff --git a/lib/notion/getAllPosts.js b/lib/notion/getAllPosts.js index ffde6490..cfbbafa8 100644 --- a/lib/notion/getAllPosts.js +++ b/lib/notion/getAllPosts.js @@ -49,7 +49,6 @@ export async function getAllPosts ({ notionPageData, from, pageType }) { }) if (!posts || posts.length === 0) { - console.warn('文章列表为空') const cacheKey = 'page_block_' + BLOG.NOTION_PAGE_ID await delCacheData(cacheKey) } diff --git a/lib/theme.js b/lib/theme.js index b1865298..8c7013ad 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -1,37 +1,45 @@ import cookie from 'react-cookies' +import BLOG from '@/blog.config' /** * 初始化主题 - * @param theme 用户默认主题state - * @param changeTheme 更改主题ChangeState函数 + * @param isDarkMode + * @param updateDarkMode 更改主题ChangeState函数 * @description 读取cookie中存的用户主题 */ -export const initTheme = (theme, changeTheme) => { - // 若未指定主题，则从时间和浏览器偏好中决定初始主题 - if (!theme) { - const date = new Date() - const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches - const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) - if (useDark) { - theme = 'dark' - } else { - theme = 'light' - } +export const initDarkMode = (isDarkMode, updateDarkMode) => { + if (!isDarkMode) { + isDarkMode = isPreferDark() } if (typeof window !== 'undefined') { - const htmlElement = document.getElementsByTagName('html') - htmlElement.className = '' - changeTheme(theme) - saveTheme(theme) - htmlElement.classList?.add(theme) + updateDarkMode(isDarkMode) + saveDarkModeToCookies(isDarkMode) + document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light') } } +/** + * 是否优先深色模式 + * @returns {*} + */ +export function isPreferDark () { + if (BLOG.APPEARANCE === 'dark') { + return true + } + if (BLOG.APPEARANCE === 'auto') { + // 系统深色模式或时间是夜间时，强行置为夜间模式 + const date = new Date() + const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + return prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) + } + return false +} + /** * 读取默认主题 * @returns {*} */ -export const loadUserThemeFromCookies = () => { +export const loadDarkModeFromCookies = () => { return cookie.load('theme') } @@ -39,6 +47,6 @@ export const loadUserThemeFromCookies = () => { * 保存默认主题 * @param newTheme */ -export const saveTheme = (newTheme) => { +export const saveDarkModeToCookies = (newTheme) => { cookie.save('theme', newTheme, { path: '/' }) } diff --git a/pages/_document.js b/pages/_document.js index 5a62d753..4a4cb812 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -11,7 +11,7 @@ class MyDocument extends Document { render () { return ( - + diff --git a/pages/search/[keyword].js b/pages/search/[keyword].js index 90a2bd62..4bc6166e 100644 --- a/pages/search/[keyword].js +++ b/pages/search/[keyword].js @@ -4,6 +4,11 @@ import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' import { getDataFromCache } from '@/lib/cache/cache_manager' +/** + * 服务端搜索 + * @param {*} param0 + * @returns + */ export async function getServerSideProps ({ params: { keyword } }) { const { allPosts, @@ -110,18 +115,16 @@ async function filterByMemCache (allPosts, keyword) { // console.log('搜索是否命中缓存', page !== null, indexContent) post.results = [] let hitCount = 0 - const re = new RegExp(`${keyword}`, 'gim') for (const i in indexContent) { const c = indexContent[i] const index = c.toLowerCase().indexOf(keyword.toLowerCase()) - const referText = c?.replace(re, `${keyword}`) if (index > -1) { hit = true hitCount += 1 - post.results.push(`${referText}`) + post.results.push(c) } else { if ((post.results.length - 1) / hitCount < 3 || i === 0) { - post.results.push(`${referText}`) + post.results.push(c) } } } diff --git a/pages/search/index.js b/pages/search/index.js index ef7cae89..fb1ffc89 100644 --- a/pages/search/index.js +++ b/pages/search/index.js @@ -4,6 +4,9 @@ import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' import { useRouter } from 'next/router' +/** + * 浏览器前端搜索 + */ export async function getStaticProps () { const { allPosts, diff --git a/themes/Fukasawa/LayoutSearch.js b/themes/Fukasawa/LayoutSearch.js index 8112f850..727e9595 100644 --- a/themes/Fukasawa/LayoutSearch.js +++ b/themes/Fukasawa/LayoutSearch.js @@ -1,8 +1,23 @@ import LayoutBase from './LayoutBase' import BlogListPage from './components/BlogListPage' +import { useRouter } from 'next/router' +import { useEffect } from 'react' export const LayoutSearch = (props) => { - return + const { keyword } = props + const router = useRouter() + const currentSearch = keyword || router?.query?.s + useEffect(() => { + setTimeout(() => { + const container = document.getElementById('container') + if (container && container.innerHTML) { + const re = new RegExp(`${currentSearch}`, 'gim') + container.innerHTML = container.innerHTML.replace(re, `${currentSearch}`) + } + }, + 100) + }) + return } diff --git a/themes/Fukasawa/components/AsideLeft.js b/themes/Fukasawa/components/AsideLeft.js index a596ae27..116e5244 100644 --- a/themes/Fukasawa/components/AsideLeft.js +++ b/themes/Fukasawa/components/AsideLeft.js @@ -9,7 +9,7 @@ import Catalog from './Catalog' function AsideLeft (props) { const { tags, currentTag, categories, currentCategory, post } = props - return
+ return
@@ -19,11 +19,11 @@ function AsideLeft (props) {
- +
-
-
+
+
{ BLOG.DESCRIPTION }
diff --git a/themes/Fukasawa/components/Catalog.js b/themes/Fukasawa/components/Catalog.js index c433e0d1..f5150983 100644 --- a/themes/Fukasawa/components/Catalog.js +++ b/themes/Fukasawa/components/Catalog.js @@ -51,7 +51,7 @@ const Catalog = ({ toc }) => { }, throttleMs)) return
-
目录
+
目录