From 180b0245bddfc4749bbe2e1d31d76692e4266708 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 11:40:29 +0800 Subject: [PATCH 01/14] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=87=E7=BA=A2?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/notion/getAllPosts.js | 1 - pages/search/[keyword].js | 6 ++---- themes/NEXT/LayoutSearch.js | 14 ++++++++++++-- themes/NEXT/components/BlogPostCard.js | 9 ++++----- 4 files changed, 18 insertions(+), 12 deletions(-) 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/pages/search/[keyword].js b/pages/search/[keyword].js index 90a2bd62..3f6517bc 100644 --- a/pages/search/[keyword].js +++ b/pages/search/[keyword].js @@ -110,18 +110,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/themes/NEXT/LayoutSearch.js b/themes/NEXT/LayoutSearch.js index 34a48e47..0a1c5fcc 100644 --- a/themes/NEXT/LayoutSearch.js +++ b/themes/NEXT/LayoutSearch.js @@ -2,11 +2,21 @@ import LayoutBase from './LayoutBase' import StickyBar from './components/StickyBar' import BlogPostListScroll from './components/BlogPostListScroll' import { useGlobal } from '@/lib/global' +import { useEffect } from 'react' export const LayoutSearch = (props) => { const { locale } = useGlobal() - const { posts } = props - + const { posts, keyword } = props + useEffect(() => { + setTimeout(() => { + const container = document.getElementById('container') + if (container && container.innerHTML) { + const re = new RegExp(`${keyword}`, 'gim') + container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + } + }, + 100) + }) return ( diff --git a/themes/NEXT/components/BlogPostCard.js b/themes/NEXT/components/BlogPostCard.js index 2e104601..2a0d7614 100644 --- a/themes/NEXT/components/BlogPostCard.js +++ b/themes/NEXT/components/BlogPostCard.js @@ -12,8 +12,8 @@ const BlogPostCard = ({ post, showSummary }) => { const { locale } = useGlobal() const showPreview = CONFIG_NEXT.POST_LIST_PREVIEW && post.blockMap return ( - -
+ +
@@ -47,9 +47,8 @@ const BlogPostCard = ({ post, showSummary }) => { {/* 搜索结果 */} {post.results &&

- {post.results.map(r => ...)} -

- } + {post.results.map(r => {r})} +

} {showPreview && post?.blockMap &&
Date: Thu, 3 Mar 2022 12:28:19 +0800 Subject: [PATCH 02/14] =?UTF-8?q?Medium=E4=B8=BB=E9=A2=98=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=A0=87=E7=BA=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Medium/LayoutBase.js | 6 ++-- themes/Medium/LayoutSearch.js | 25 ++++++++++----- themes/Medium/components/SearchInput.js | 42 +++++++++++++------------ 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js index f3e3b69d..1e06c4aa 100644 --- a/themes/Medium/LayoutBase.js +++ b/themes/Medium/LayoutBase.js @@ -9,6 +9,7 @@ import TopNavBar from './components/TopNavBar' import SearchInput from './components/SearchInput' import BottomMenuBar from './components/BottomMenuBar' import { useGlobal } from '@/lib/global' +import { useRouter } from 'next/router' /** * 基础布局 采用左右两侧布局，移动端使用顶部导航栏 @@ -19,9 +20,10 @@ import { useGlobal } from '@/lib/global' const LayoutBase = props => { const { children, meta, showInfoCard = true, slotRight, slotTop } = props const { locale } = useGlobal() + const router = useRouter() return ( -
+
{/* 桌面端左侧菜单 */} @@ -41,7 +43,7 @@ const LayoutBase = props => { {slotRight}
- + {router.pathname !== '/search' && } {showInfoCard && } {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && }
diff --git a/themes/Medium/LayoutSearch.js b/themes/Medium/LayoutSearch.js index c29d9637..59a15491 100644 --- a/themes/Medium/LayoutSearch.js +++ b/themes/Medium/LayoutSearch.js @@ -4,21 +4,30 @@ import { useGlobal } from '@/lib/global' import TagGroups from './components/TagGroups' import CategoryGroup from './components/CategoryGroup' import BlogPostListScroll from './components/BlogPostListScroll' +import { useEffect } from 'react' export const LayoutSearch = (props) => { const { locale } = useGlobal() + const { keyword } = props + useEffect(() => { + setTimeout(() => { + const container = document.getElementById('container') + if (container && container.innerHTML) { + const re = new RegExp(`${keyword}`, 'gim') + container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + } + }, + 100) + }) return -
-
- {locale.NAV.SEARCH} -
- - +
{locale.NAV.SEARCH}
+
- - +
+ +
} diff --git a/themes/Medium/components/SearchInput.js b/themes/Medium/components/SearchInput.js index baf6f859..505a085d 100644 --- a/themes/Medium/components/SearchInput.js +++ b/themes/Medium/components/SearchInput.js @@ -1,8 +1,9 @@ import { useRouter } from 'next/router' import { useImperativeHandle, useRef, useState } from 'react' +let lock = false const SearchInput = ({ currentTag, currentSearch, cRef, className }) => { - const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '') + // const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '') const [onLoading, setLoadingState] = useState(false) const router = useRouter() const searchInputRef = useRef() @@ -14,12 +15,15 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => { } }) - const handleSearch = (key) => { + const handleSearch = () => { + const key = searchInputRef.current.value + if (key && key !== '') { setLoadingState(true) - router.push({ pathname: '/search', query: { s: key } }).then(r => { - setLoadingState(false) - }) + // router.push({ pathname: '/search/' + key }).then(r => { + // setLoadingState(false) + // }) + location.href = '/search/' + key } else { router.push({ pathname: '/' }).then(r => { }) @@ -34,13 +38,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => { } const cleanSearch = () => { searchInputRef.current.value = '' - setSearchKey('') } - let lock = false + const [showClean, setShowClean] = useState(false) const updateSearchKey = (val) => { - if (!lock) { - setSearchKey(val) + if (lock) { + return + } + searchInputRef.current.value = val + + if (val) { + setShowClean(true) + } else { + setShowClean(false) } } function lockSearchInput () { @@ -61,15 +71,15 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => { onCompositionUpdate={lockSearchInput} onCompositionEnd={unLockSearchInput} onChange={e => updateSearchKey(e.target.value)} - defaultValue={searchKey} + defaultValue={currentSearch} />
{ handleSearch(searchKey) }}> + onClick={handleSearch}>
- {(searchKey && searchKey.length && + {(showClean &&
@@ -77,12 +87,4 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
} -function getSearchKey () { - const router = useRouter() - if (router.query && router.query.s) { - return router.query.s - } - return null -} - export default SearchInput From 10ede276711dcaf53891d8ac20be55b06c587378 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 12:34:00 +0800 Subject: [PATCH 03/14] =?UTF-8?q?Hexo=20=E4=B8=BB=E9=A2=98=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/search/[keyword].js | 5 +++++ pages/search/index.js | 3 +++ themes/Hexo/LayoutSearch.js | 21 +++++++++++++++++++-- themes/Hexo/components/SideRight.js | 2 +- 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/pages/search/[keyword].js b/pages/search/[keyword].js index 3f6517bc..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, 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/Hexo/LayoutSearch.js b/themes/Hexo/LayoutSearch.js index 3b26ad57..c9ffc4b3 100644 --- a/themes/Hexo/LayoutSearch.js +++ b/themes/Hexo/LayoutSearch.js @@ -1,9 +1,26 @@ +import { useRouter } from 'next/router' +import { useEffect } from 'react' import BlogPostListPage from './components/BlogPostListPage' import LayoutBase from './LayoutBase' 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/Hexo/components/SideRight.js b/themes/Hexo/components/SideRight.js index 423481f6..3aafeb80 100644 --- a/themes/Hexo/components/SideRight.js +++ b/themes/Hexo/components/SideRight.js @@ -45,7 +45,7 @@ export default function SideRight (props) { - +
From 5711d85f0a1189e19ebfc59ddd68b5aad1c32d53 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 12:36:11 +0800 Subject: [PATCH 04/14] =?UTF-8?q?fukasawa=20=E6=90=9C=E7=B4=A2=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Fukasawa/LayoutSearch.js | 17 ++++++++++++++++- themes/Fukasawa/components/AsideLeft.js | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) 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..3f1047d7 100644 --- a/themes/Fukasawa/components/AsideLeft.js +++ b/themes/Fukasawa/components/AsideLeft.js @@ -19,7 +19,7 @@ function AsideLeft (props) {
- +
From ba45f11d55aceffc40843ae98042d1ce86760e42 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 12:39:40 +0800 Subject: [PATCH 05/14] =?UTF-8?q?fukasawa=20=E8=8F=9C=E5=8D=95=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Fukasawa/components/GroupMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/Fukasawa/components/GroupMenu.js b/themes/Fukasawa/components/GroupMenu.js index 79fccdef..8b5f5204 100644 --- a/themes/Fukasawa/components/GroupMenu.js +++ b/themes/Fukasawa/components/GroupMenu.js @@ -24,7 +24,7 @@ function GroupMenu ({ customNav }) { if (link.show) { const selected = (router.pathname === link.to) || (router.asPath === link.to) return -
{link.name}
From 7a46c08131bd9c1b54fc352e44b8bf333b656e89 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 15:08:19 +0800 Subject: [PATCH 06/14] =?UTF-8?q?DarkMode=20=E6=A8=A1=E5=9D=97=E9=87=8D?= =?UTF-8?q?=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 8 ++++---- lib/theme.js | 20 +++++++++---------- themes/Hexo/components/Header.js | 4 ++-- themes/NEXT/components/DarkModeButton.js | 14 ++++++------- themes/NEXT/components/FloatDarkModeButton.js | 17 ++++++++-------- themes/NEXT/components/Header.js | 4 ++-- 6 files changed, 33 insertions(+), 34 deletions(-) diff --git a/lib/global.js b/lib/global.js index a9e3cac5..55222219 100644 --- a/lib/global.js +++ b/lib/global.js @@ -1,7 +1,7 @@ import lang from './lang' import { useContext, createContext, useState, useEffect } from 'react' import Router from 'next/router' -import { initTheme, loadUserThemeFromCookies } from './theme' +import { initTheme, loadDarkModeFromCookies } from './theme' const GlobalContext = createContext() /** @@ -12,7 +12,7 @@ const GlobalContext = createContext() */ export function GlobalContextProvider ({ children }) { const [locale, changeLocale] = useState(generateLocaleDict('en-US')) - const [theme, changeTheme] = useState(loadUserThemeFromCookies()) + const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies()) const [onLoading, changeLoadingState] = useState(false) Router.events.on('routeChangeStart', (...args) => { changeLoadingState(true) @@ -24,12 +24,12 @@ export function GlobalContextProvider ({ children }) { // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作 useEffect(() => { - initTheme(theme, changeTheme) + initTheme(isDarkMode, updateDarkMode) initLocale(locale, changeLocale) }) return ( - + {children} ) diff --git a/lib/theme.js b/lib/theme.js index b1865298..9cff0061 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -3,27 +3,27 @@ import cookie from 'react-cookies' /** * 初始化主题 * @param theme 用户默认主题state - * @param changeTheme 更改主题ChangeState函数 + * @param updateDarkMode 更改主题ChangeState函数 * @description 读取cookie中存的用户主题 */ -export const initTheme = (theme, changeTheme) => { +export const initTheme = (isDarkMode, updateDarkMode) => { // 若未指定主题，则从时间和浏览器偏好中决定初始主题 - if (!theme) { + if (!isDarkMode) { 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' + isDarkMode = true } else { - theme = 'light' + isDarkMode = false } } if (typeof window !== 'undefined') { const htmlElement = document.getElementsByTagName('html') htmlElement.className = '' - changeTheme(theme) - saveTheme(theme) - htmlElement.classList?.add(theme) + updateDarkMode(isDarkMode) + saveDarkModeToCookies(isDarkMode) + htmlElement.classList?.add(isDarkMode) } } @@ -31,7 +31,7 @@ export const initTheme = (theme, changeTheme) => { * 读取默认主题 * @returns {*} */ -export const loadUserThemeFromCookies = () => { +export const loadDarkModeFromCookies = () => { return cookie.load('theme') } @@ -39,6 +39,6 @@ export const loadUserThemeFromCookies = () => { * 保存默认主题 * @param newTheme */ -export const saveTheme = (newTheme) => { +export const saveDarkModeToCookies = (newTheme) => { cookie.save('theme', newTheme, { path: '/' }) } diff --git a/themes/Hexo/components/Header.js b/themes/Hexo/components/Header.js index f177ee0d..25c06f1c 100644 --- a/themes/Hexo/components/Header.js +++ b/themes/Hexo/components/Header.js @@ -14,7 +14,7 @@ let autoScroll = false */ export default function Header () { const [typed, changeType] = useState() - const { theme } = useGlobal() + const { isDarkMode } = useGlobal() useEffect(() => { scrollTrigger() @@ -76,7 +76,7 @@ export default function Header () { } const updateTopNav = () => { - if (theme !== 'dark') { + if (!isDarkMode) { const stickyNavElement = document.getElementById('sticky-nav') if (window.scrollY < window.innerHeight) { stickyNavElement?.classList?.add('dark') diff --git a/themes/NEXT/components/DarkModeButton.js b/themes/NEXT/components/DarkModeButton.js index f70b1428..8205cca7 100644 --- a/themes/NEXT/components/DarkModeButton.js +++ b/themes/NEXT/components/DarkModeButton.js @@ -1,18 +1,18 @@ import { useGlobal } from '@/lib/global' -import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' +import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme' const DarkModeButton = () => { - const { changeTheme } = useGlobal() - const userTheme = loadUserThemeFromCookies() + const { updateDarkMode } = useGlobal() + const isDarkMode = loadDarkModeFromCookies() // 用户手动设置主题 const handleChangeDarkMode = () => { - const newTheme = (userTheme === 'light' ? 'dark' : 'light') - saveTheme(newTheme) - changeTheme(newTheme) + const newTheme = (isDarkMode ? 'dark' : 'light') + saveDarkModeToCookies(newTheme) + updateDarkMode(newTheme) } return
-
} diff --git a/themes/NEXT/components/FloatDarkModeButton.js b/themes/NEXT/components/FloatDarkModeButton.js index 2e610a2f..2a7b5865 100644 --- a/themes/NEXT/components/FloatDarkModeButton.js +++ b/themes/NEXT/components/FloatDarkModeButton.js @@ -1,5 +1,5 @@ import { useGlobal } from '@/lib/global' -import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' +import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme' import CONFIG_NEXT from '../config_next' export default function FloatDarkModeButton () { @@ -7,16 +7,15 @@ export default function FloatDarkModeButton () { return <> } - const { changeTheme } = useGlobal() - const userTheme = loadUserThemeFromCookies() + const { isDarkMode, updateDarkMode } = useGlobal() // 用户手动设置主题 const handleChangeDarkMode = () => { - const newTheme = userTheme === 'light' ? 'dark' : 'light' - saveTheme(newTheme) - changeTheme(newTheme) + const newStatus = !isDarkMode + saveDarkModeToCookies(newStatus) + updateDarkMode(newStatus) const htmlElement = document.getElementsByTagName('html')[0] - htmlElement.classList?.remove(userTheme) - htmlElement.classList?.add(newTheme) + htmlElement.classList?.remove(newStatus ? 'light' : 'dark') + htmlElement.classList?.add(newStatus ? 'dark' : 'light') } return ( @@ -27,7 +26,7 @@ export default function FloatDarkModeButton () { >
) diff --git a/themes/NEXT/components/Header.js b/themes/NEXT/components/Header.js index 4f04f58f..363dc6c1 100644 --- a/themes/NEXT/components/Header.js +++ b/themes/NEXT/components/Header.js @@ -27,7 +27,7 @@ export default function Header () { ) } }) - const { theme } = useGlobal() + const { isDarkMode } = useGlobal() const autoScrollEnd = () => { if (autoScroll) { @@ -61,7 +61,7 @@ export default function Header () { } const updateTopNav = () => { - if (theme !== 'dark') { + if (!isDarkMode) { const stickyNavElement = document.getElementById('sticky-nav') if (window.scrollY < window.innerHeight) { stickyNavElement.classList.add('dark') From 3453bf9b11d77681c1eee50599b364eb83d2b0ad Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 15:10:42 +0800 Subject: [PATCH 07/14] =?UTF-8?q?Locale=20=E6=A8=A1=E5=9D=97=E9=87=8D?= =?UTF-8?q?=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/global.js b/lib/global.js index 55222219..77898d29 100644 --- a/lib/global.js +++ b/lib/global.js @@ -11,7 +11,7 @@ const GlobalContext = createContext() * @constructor */ export function GlobalContextProvider ({ children }) { - const [locale, changeLocale] = useState(generateLocaleDict('en-US')) + const [locale, updateLocale] = useState(generateLocaleDict('en-US')) const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies()) const [onLoading, changeLoadingState] = useState(false) Router.events.on('routeChangeStart', (...args) => { @@ -25,7 +25,7 @@ export function GlobalContextProvider ({ children }) { // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作 useEffect(() => { initTheme(isDarkMode, updateDarkMode) - initLocale(locale, changeLocale) + initLocale(locale, updateLocale) }) return ( From fe4007bbca86ad8f6d7e441843856f9cd5de0818 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 15:56:55 +0800 Subject: [PATCH 08/14] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E5=A4=9C?= =?UTF-8?q?=E9=97=B4=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 17 +++++++---- lib/theme.js | 30 ++++++++++--------- pages/_document.js | 2 +- themes/NEXT/components/FloatDarkModeButton.js | 2 +- 4 files changed, 29 insertions(+), 22 deletions(-) diff --git a/lib/global.js b/lib/global.js index 77898d29..860d37f1 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 Router from 'next/router' -import { initTheme, loadDarkModeFromCookies } from './theme' +import { initDarkMode } from './theme' const GlobalContext = createContext() +let hasInit = false /** * 全局变量Provider，包括语言本地化、样式主题、搜索词 @@ -12,7 +13,7 @@ const GlobalContext = createContext() */ export function GlobalContextProvider ({ children }) { const [locale, updateLocale] = useState(generateLocaleDict('en-US')) - const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies()) + const [isDarkMode, updateDarkMode] = useState(false) const [onLoading, changeLoadingState] = useState(false) Router.events.on('routeChangeStart', (...args) => { changeLoadingState(true) @@ -23,10 +24,14 @@ export function GlobalContextProvider ({ children }) { }) // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作 - useEffect(() => { - initTheme(isDarkMode, updateDarkMode) - initLocale(locale, updateLocale) - }) + setTimeout(() => { + console.log('初始化', hasInit, isDarkMode) + if (!hasInit) { + hasInit = true + initLocale(locale, updateLocale) + initDarkMode(isDarkMode, updateDarkMode) + } + }, 1000) return ( diff --git a/lib/theme.js b/lib/theme.js index 9cff0061..ba888dba 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -2,31 +2,33 @@ import cookie from 'react-cookies' /** * 初始化主题 - * @param theme 用户默认主题state + * @param + * @param isDarkMode * @param updateDarkMode 更改主题ChangeState函数 * @description 读取cookie中存的用户主题 */ -export const initTheme = (isDarkMode, updateDarkMode) => { - // 若未指定主题，则从时间和浏览器偏好中决定初始主题 +export const initDarkMode = (isDarkMode, updateDarkMode) => { if (!isDarkMode) { - const date = new Date() - const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches - const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) - if (useDark) { - isDarkMode = true - } else { - isDarkMode = false - } + isDarkMode = isPreferDark() } if (typeof window !== 'undefined') { - const htmlElement = document.getElementsByTagName('html') - htmlElement.className = '' updateDarkMode(isDarkMode) saveDarkModeToCookies(isDarkMode) - htmlElement.classList?.add(isDarkMode) + document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light') } } +/** + * 是否优先深色模式 + * @returns {*} + */ +export function isPreferDark () { + // 系统深色模式或时间是夜间时，强行置为夜间模式 + const date = new Date() + const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + return prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) +} + /** * 读取默认主题 * @returns {*} 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/themes/NEXT/components/FloatDarkModeButton.js b/themes/NEXT/components/FloatDarkModeButton.js index 2a7b5865..87e10983 100644 --- a/themes/NEXT/components/FloatDarkModeButton.js +++ b/themes/NEXT/components/FloatDarkModeButton.js @@ -1,5 +1,5 @@ import { useGlobal } from '@/lib/global' -import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme' +import { saveDarkModeToCookies } from '@/lib/theme' import CONFIG_NEXT from '../config_next' export default function FloatDarkModeButton () { From 7df84fa0dc61cff070dc54951b4bf32f8322834b Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 16:03:22 +0800 Subject: [PATCH 09/14] =?UTF-8?q?Fukasawa=E9=80=82=E9=85=8D=E5=A4=9C?= =?UTF-8?q?=E9=97=B4=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Fukasawa/components/AsideLeft.js | 6 +++--- themes/Fukasawa/components/Catalog.js | 4 ++-- themes/Fukasawa/components/GroupMenu.js | 4 ++-- themes/Fukasawa/components/Logo.js | 2 +- themes/Fukasawa/components/SearchInput.js | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/themes/Fukasawa/components/AsideLeft.js b/themes/Fukasawa/components/AsideLeft.js index 3f1047d7..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
@@ -22,8 +22,8 @@ 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
-
目录
+
目录