From 42c3a24b4e3e68ad851169fa02e284758bd4cc3c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 11 May 2022 12:24:36 +0800 Subject: [PATCH 01/12] =?UTF-8?q?Medium=E4=B8=BB=E9=A2=98=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components => components}/Collapse.js | 2 +- themes/fukasawa/components/TopNav.js | 2 +- themes/medium/LayoutSearch.js | 2 +- themes/medium/components/GroupMenu.js | 43 ++++++++++++ themes/medium/components/TopNavBar.js | 68 ++++++++++++------- 5 files changed, 90 insertions(+), 27 deletions(-) rename {themes/fukasawa/components => components}/Collapse.js (88%) create mode 100644 themes/medium/components/GroupMenu.js diff --git a/themes/fukasawa/components/Collapse.js b/components/Collapse.js similarity index 88% rename from themes/fukasawa/components/Collapse.js rename to components/Collapse.js index 7607b732..e3da9dae 100644 --- a/themes/fukasawa/components/Collapse.js +++ b/components/Collapse.js @@ -28,7 +28,7 @@ const Collapse = props => { } }, [props.isOpen]) return ( -
+
{props.children}
) diff --git a/themes/fukasawa/components/TopNav.js b/themes/fukasawa/components/TopNav.js index 8f9bf89e..ae900604 100644 --- a/themes/fukasawa/components/TopNav.js +++ b/themes/fukasawa/components/TopNav.js @@ -1,5 +1,5 @@ import { useState } from 'react' -import Collapse from './Collapse' +import Collapse from '@/components/Collapse' import GroupMenu from './GroupMenu' import Logo from './Logo' import SearchInput from './SearchInput' diff --git a/themes/medium/LayoutSearch.js b/themes/medium/LayoutSearch.js index e708eb5c..1b329b1c 100644 --- a/themes/medium/LayoutSearch.js +++ b/themes/medium/LayoutSearch.js @@ -17,7 +17,7 @@ export const LayoutSearch = (props) => { container.innerHTML = container.innerHTML.replace(re, `${keyword}`) } }, - 100) + 100) }) return
diff --git a/themes/medium/components/GroupMenu.js b/themes/medium/components/GroupMenu.js new file mode 100644 index 00000000..534f2c78 --- /dev/null +++ b/themes/medium/components/GroupMenu.js @@ -0,0 +1,43 @@ +import React from 'react' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useGlobal } from '@/lib/global' +import CONFIG_MEDIUM from '../config_medium' + +function GroupMenu ({ customNav }) { + const { locale } = useGlobal() + const router = useRouter() + + let links = [ + { name: locale.NAV.INDEX, to: '/' || '/', show: true }, + { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY }, + { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG }, + { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE }, + { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH } + ] + + if (customNav) { + links = links.concat(customNav) + } + + return +} + +export default GroupMenu diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js index 2c48ec7b..1ade1b77 100644 --- a/themes/medium/components/TopNavBar.js +++ b/themes/medium/components/TopNavBar.js @@ -1,40 +1,60 @@ import Link from 'next/link' import { useRouter } from 'next/router' import LogoBar from './LogoBar' - +import React from 'react' +import Collapse from '@/components/Collapse' +import GroupMenu from './GroupMenu' /** * 顶部导航栏 + 菜单 * @param {} param0 * @returns */ -export default function TopNavBar (props) { +export default function TopNavBar(props) { const { className, customNav } = props const router = useRouter() + const [isOpen, changeShow] = React.useState(false) + + const toggleMenuOpen = () => { + changeShow(!isOpen) + } return
-
- + +
+ +
+ - {/* 顶部菜单 */} -
- {customNav && customNav.map(link => { - if (link.show) { - const selected = (router.pathname === link.to) || (router.asPath === link.to) - return - -
- -
{link.name}
+ + + {/* 顶部菜单 */} +
+ {customNav && customNav.map(link => { + if (link.show) { + const selected = (router.pathname === link.to) || (router.asPath === link.to) + return + +
+ +
{link.name}
+
+ {link.slot} + + + } else { + return null + } + })} +
+
-
} From 95b5299567be9e029ba8c95882ef70479182bb8b Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 11 May 2022 12:45:15 +0800 Subject: [PATCH 02/12] =?UTF-8?q?=E5=B0=81=E8=A3=85=E6=8A=98=E5=8F=A0?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Collapse.js | 60 +++++++++++++++++++++------ components/CollapseLeft.js | 38 ----------------- themes/fukasawa/components/TopNav.js | 6 +-- themes/hexo/components/TopNav.js | 2 +- themes/medium/components/TopNavBar.js | 2 +- themes/next/components/TopNav.js | 2 +- 6 files changed, 54 insertions(+), 56 deletions(-) delete mode 100644 components/CollapseLeft.js diff --git a/components/Collapse.js b/components/Collapse.js index e3da9dae..798e2b86 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -1,25 +1,60 @@ -import React, { useEffect, useRef } from 'react' +import React from 'react' +/** + * 折叠面板组件，支持水平折叠、垂直折叠 + * @param {type:['horizontal','vertical'],isOpen} props + * @returns + */ const Collapse = props => { - const collapseRef = useRef(null) + const collapseRef = React.useRef(null) + const type = props.type || 'vertical' const collapseSection = element => { const sectionHeight = element.scrollHeight + const sectionWidth = element.scrollWidth + requestAnimationFrame(function () { - element.style.height = sectionHeight + 'px' - requestAnimationFrame(function () { - element.style.height = 0 + 'px' - }) + switch (type) { + case 'horizontal': + element.style.width = sectionWidth + 'px' + requestAnimationFrame(function () { + element.style.width = 0 + 'px' + }) + break + case 'vertical': + element.style.height = sectionHeight + 'px' + requestAnimationFrame(function () { + element.style.height = 0 + 'px' + }) + } }) } + + /** + * 展开 + * @param {*} element + */ const expandSection = element => { const sectionHeight = element.scrollHeight - element.style.height = sectionHeight + 'px' - const clearTime = setTimeout(() => { - element.style.height = 'auto' - }, 400) + const sectionWidth = element.scrollWidth + let clearTime = 0 + switch (type) { + case 'horizontal': + element.style.width = sectionWidth + 'px' + clearTime = setTimeout(() => { + element.style.width = 'auto' + }, 400) + break + case 'vertical': + element.style.height = sectionHeight + 'px' + clearTime = setTimeout(() => { + element.style.height = 'auto' + }, 400) + } + clearTimeout(clearTime) } - useEffect(() => { + + React.useEffect(() => { const element = collapseRef.current if (props.isOpen) { expandSection(element) @@ -27,8 +62,9 @@ const Collapse = props => { collapseSection(element) } }, [props.isOpen]) + return ( -
+
{props.children}
) diff --git a/components/CollapseLeft.js b/components/CollapseLeft.js deleted file mode 100644 index 56d86525..00000000 --- a/components/CollapseLeft.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { useEffect, useRef } from 'react' - -const Collapse = props => { - const collapseRef = useRef(null) - const collapseSection = element => { - const sectionWidth = element.scrollWidth - requestAnimationFrame(function () { - element.style.width = sectionWidth + 'px' - requestAnimationFrame(function () { - element.style.width = 0 + 'px' - }) - }) - } - const expandSection = element => { - const sectionWidth = element.scrollWidth - element.style.width = sectionWidth + 'px' - const clearTime = setTimeout(() => { - element.style.width = 'auto' - }, 400) - clearTimeout(clearTime) - } - useEffect(() => { - const element = collapseRef.current - if (props.isOpen) { - expandSection(element) - } else { - collapseSection(element) - } - }, [props.isOpen]) - return ( -
- {props.children} -
- ) -} -Collapse.defaultProps = { isOpen: false } - -export default Collapse diff --git a/themes/fukasawa/components/TopNav.js b/themes/fukasawa/components/TopNav.js index ae900604..7653c8da 100644 --- a/themes/fukasawa/components/TopNav.js +++ b/themes/fukasawa/components/TopNav.js @@ -20,7 +20,7 @@ const TopNav = props => { {/* 导航栏 */} - +
diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js index 1ade1b77..5b66bcab 100644 --- a/themes/medium/components/TopNavBar.js +++ b/themes/medium/components/TopNavBar.js @@ -19,7 +19,7 @@ export default function TopNavBar(props) { } return
- +
diff --git a/themes/next/components/TopNav.js b/themes/next/components/TopNav.js index c56daf17..f8b815c1 100644 --- a/themes/next/components/TopNav.js +++ b/themes/next/components/TopNav.js @@ -109,7 +109,7 @@ const TopNav = (props) => {
- +
From b409391ee7f6d52afd73a0fceee6b55681a193c9 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 11 May 2022 13:26:43 +0800 Subject: [PATCH 03/12] =?UTF-8?q?=E5=A4=9C=E9=97=B4=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DarkModeButton.js | 21 ++++++++++++ components/ThemeSwitch.js | 3 +- themes/example/LayoutBase.js | 4 +-- themes/example/components/BlogList.js | 10 +++--- themes/example/components/Footer.js | 40 +++++------------------ themes/example/components/Header.js | 2 +- themes/example/components/Nav.js | 4 +-- themes/example/components/SideBar.js | 4 +-- themes/example/components/Title.js | 2 +- themes/fukasawa/components/AsideLeft.js | 4 +++ themes/medium/components/BottomMenuBar.js | 2 +- themes/medium/components/Footer.js | 2 ++ themes/medium/components/TopNavBar.js | 4 +-- themes/next/components/DarkModeButton.js | 16 +++++---- themes/next/components/Footer.js | 2 ++ 15 files changed, 63 insertions(+), 57 deletions(-) create mode 100644 components/DarkModeButton.js diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js new file mode 100644 index 00000000..a4d36989 --- /dev/null +++ b/components/DarkModeButton.js @@ -0,0 +1,21 @@ +import { useGlobal } from '@/lib/global' +import { saveDarkModeToCookies } from '@/lib/theme' + +const DarkModeButton = (props) => { + const { isDarkMode, updateDarkMode } = useGlobal() + // 用户手动设置主题 + const handleChangeDarkMode = () => { + const newStatus = !isDarkMode + saveDarkModeToCookies(newStatus) + updateDarkMode(newStatus) + const htmlElement = document.getElementsByTagName('html')[0] + htmlElement.classList?.remove(newStatus ? 'light' : 'dark') + htmlElement.classList?.add(newStatus ? 'dark' : 'light') + } + + return
+ +
+} +export default DarkModeButton diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js index 12d81812..f766599c 100644 --- a/components/ThemeSwitch.js +++ b/components/ThemeSwitch.js @@ -9,8 +9,7 @@ export function ThemeSwitch () { return (
- - 切换主题：{theme} + {theme}
) diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js index 1f357ad8..c99582f4 100644 --- a/themes/example/LayoutBase.js +++ b/themes/example/LayoutBase.js @@ -15,7 +15,7 @@ import JumpToTopButton from './components/JumpToTopButton' const LayoutBase = props => { const { children, meta } = props return ( -
+
{/* 顶栏LOGO */}
@@ -24,7 +24,7 @@ const LayoutBase = props => {