diff --git a/components/Collapse.js b/components/Collapse.js index a787bfa2..99629604 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useImperativeHandle } from 'react' /** * 折叠面板组件，支持水平折叠、垂直折叠 @@ -6,12 +6,27 @@ import React from 'react' * @returns */ const Collapse = props => { - const collapseRef = React.useRef(null) + const { collapseRef } = props + const ref = React.useRef(null) const type = props.type || 'vertical' + + useImperativeHandle(collapseRef, () => { + return { + /** + * 当子元素高度变化时，可调用此方法更新折叠组件的高度 + * @param {*} param0 + */ + updateCollapseHeight: ({ height, increase }) => { + ref.current.style.height = ref.current.scrollHeight + ref.current.style.height = 'auto' + } + } + }) + /** - * 折叠 - * @param {*} element - */ + * 折叠 + * @param {*} element + */ const collapseSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -34,9 +49,9 @@ const Collapse = props => { } /** - * 展开 - * @param {*} element - */ + * 展开 + * @param {*} element + */ const expandSection = element => { const sectionHeight = element.scrollHeight const sectionWidth = element.scrollWidth @@ -58,22 +73,20 @@ const Collapse = props => { clearTimeout(clearTime) } - const updateHeight = () => { - collapseRef.current.style.height = 'auto' - } - - React.useEffect(() => { + useEffect(() => { if (props.isOpen) { - expandSection(collapseRef.current) + expandSection(ref.current) } else { - collapseSection(collapseRef.current) + collapseSection(ref.current) } + // 通知父组件高度变化 + props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen }) }, [props.isOpen]) return ( -
- {props.children} -
+
+ {props.children} +
) } Collapse.defaultProps = { isOpen: false } diff --git a/components/FlutteringRibbon.js b/components/FlutteringRibbon.js index a615d533..301fbd23 100644 --- a/components/FlutteringRibbon.js +++ b/components/FlutteringRibbon.js @@ -1,10 +1,21 @@ /* eslint-disable */ import React from 'react' - +const id = 'canvasFlutteringRibbon' export const FlutteringRibbon = () => { + const destroyRibbon = ()=>{ + const ribbon = document.getElementById(id) + if(ribbon && ribbon.parentNode){ + ribbon.parentNode.removeChild(ribbon) + } + } + React.useEffect(() => { createFlutteringRibbon() + return () => destroyRibbon() + }, []) + return <> + } /** @@ -125,6 +136,7 @@ function createFlutteringRibbon() { init: function () { try { ;(this._canvas = document.createElement('canvas')), + (this._canvas.id = id), (this._canvas.style.display = 'block'), (this._canvas.style.position = 'fixed'), (this._canvas.style.margin = '0'), diff --git a/components/Nest.js b/components/Nest.js index 781cb2bf..74fa85e3 100644 --- a/components/Nest.js +++ b/components/Nest.js @@ -1,10 +1,19 @@ /* eslint-disable */ -import React from 'react' - +import { useEffect } from 'react' +const id = 'canvasNestCreated' export const Nest = () => { - React.useEffect(() => { + const destroyNest = ()=>{ + const nest = document.getElementById(id) + if(nest && nest.parentNode){ + nest.parentNode.removeChild(nest) + } + } + + useEffect(() => { createNest() + return () => destroyNest() }, []) + return <> } /** @@ -65,7 +74,7 @@ function createNest() { m(o) } var i = document.createElement('canvas') - i.id = 'canvasNestCreated' + i.id = id var a = (function () { const t = e return { diff --git a/components/Ribbon.js b/components/Ribbon.js index d96e3591..2c6855fc 100644 --- a/components/Ribbon.js +++ b/components/Ribbon.js @@ -1,10 +1,20 @@ /* eslint-disable */ -import React from 'react' +import { useEffect } from 'react' +const id = 'canvasRibbon' export const Ribbon = () => { - React.useEffect(() => { + const destroyRibbon = ()=>{ + const ribbon = document.getElementById(id) + if(ribbon && ribbon.parentNode){ + ribbon.parentNode.removeChild(ribbon) + } + } + + useEffect(() => { createRibbon() + return () => destroyRibbon() }, []) + return <> } /** @@ -29,6 +39,7 @@ function createRibbon() { a = window.innerWidth, l = window.innerHeight, d = e.s + i.id= id let r, s const u = Math let h = 0 diff --git a/components/Sakura.js b/components/Sakura.js index 3f69cc25..e814362f 100644 --- a/components/Sakura.js +++ b/components/Sakura.js @@ -1,10 +1,19 @@ /* eslint-disable */ -import React from 'react' - +import { useEffect } from 'react' +const id = 'canvas_sakura' export const Sakura = () => { - React.useEffect(() => { + const destroySakura = ()=>{ + const sakura = document.getElementById(id) + if(sakura && sakura.parentNode){ + sakura.parentNode.removeChild(sakura) + } + } + + useEffect(() => { createSakura({}) + return () => destroyRibbon() }, []) + return <> } /** @@ -129,7 +138,7 @@ function createSakura() { 'style', 'position: fixed;left: 0;top: 0;pointer-events: none;' ) - canvas.setAttribute('id', 'canvas_sakura') + canvas.setAttribute('id', id) document.getElementsByTagName('body')[0].appendChild(canvas) cxt = canvas.getContext('2d') var sakuraList = new SakuraList() @@ -165,15 +174,12 @@ function createSakura() { stop = requestAnimationFrame(asd) } } - window.onresize = function () { - var canvasSnow = document.getElementById('canvas_snow') - } img.onload = function () { startSakura() } function stopp() { if (staticx) { - var child = document.getElementById('canvas_sakura') + var child = document.getElementById(id) child.parentNode.removeChild(child) window.cancelAnimationFrame(stop) staticx = false diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js index 44d97f2f..e2fcf242 100644 --- a/lib/notion/getNotionData.js +++ b/lib/notion/getNotionData.js @@ -95,8 +95,13 @@ function getCustomNav({ allPages }) { return customNav } -function getCustomMenu({ collectionData }) { - const menuPages = collectionData.filter(post => (post.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) && post.status === 'Published') +/** + * 获取自定义菜单 + * @param {*} allPages + * @returns + */ +function getCustomMenu({ allPages }) { + const menuPages = allPages.filter(post => (post.type === BLOG.NOTION_PROPERTY_NAME.type_menu || post.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) && post.status === BLOG.NOTION_PROPERTY_NAME.status_publish) const menus = [] if (menuPages && menuPages.length > 0) { menuPages.forEach(e => { @@ -216,14 +221,12 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { // 文章计数 let postCount = 0 const allPages = collectionData.filter(post => { - if (post.type === 'Post' && post.status === 'Published') { + if (post.type === BLOG.NOTION_PROPERTY_NAME.type_post && post.status === BLOG.NOTION_PROPERTY_NAME.status_publish) { postCount++ } return post && - post.type && - (post.type === 'Post' || post.type === 'Page') && - (post.status === 'Published' || post.status === 'Invisible') && - (!post.slug.startsWith('http')) + (!post?.slug?.startsWith('http')) && + (post?.status === BLOG.NOTION_PROPERTY_NAME.status_publish || post?.status === BLOG.NOTION_PROPERTY_NAME.status_invisible) }) // Sort by date @@ -241,7 +244,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) { const siteInfo = getBlogInfo({ collection, block }) const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') }) // 新的菜单 - const customMenu = getCustomMenu({ collectionData }) + const customMenu = await getCustomMenu({ allPages }) const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 }) return { diff --git a/themes/example/components/DropMenu.js b/themes/example/components/DropMenu.js new file mode 100644 index 00000000..f2c2c802 --- /dev/null +++ b/themes/example/components/DropMenu.js @@ -0,0 +1,38 @@ +import Link from 'next/link' +import { useState } from 'react' + +export const DropMenu = ({ link }) => { + const [show, changeShow] = useState(false) + const hasSubMenu = link?.subMenus?.length > 0 + + return
  • changeShow(true)} onMouseOut={() => changeShow(false)} > + + {!hasSubMenu && +
    + + {link?.name} + {hasSubMenu && } + +
    + } + + {hasSubMenu && +
    + {link?.name} + +
    + } + + {/* 子菜单 */} + {hasSubMenu && } + +
    • +} diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js index 9e05646b..7fa8cf09 100644 --- a/themes/example/components/Nav.js +++ b/themes/example/components/Nav.js @@ -1,6 +1,7 @@ +import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' -import Link from 'next/link' import CONFIG_EXAMPLE from '../config_example' +import { DropMenu } from './DropMenu' /** * 菜单导航 @@ -8,8 +9,9 @@ import CONFIG_EXAMPLE from '../config_example' * @returns */ export const Nav = (props) => { - const { customNav } = props + const { customNav, customMenu } = props const { locale } = useGlobal() + let links = [ { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_EXAMPLE.MENU_SEARCH }, { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_EXAMPLE.MENU_ARCHIVE }, @@ -21,23 +23,22 @@ export const Nav = (props) => { links = links.concat(customNav) } + // 如果 开启自定义菜单，则不再使用 Page生成菜单。 + if (BLOG.CUSTOM_MENU) { + links = customMenu + } + + if (!links || links.length === 0) { + return null + } + return (