diff --git a/blog.config.js b/blog.config.js index f3ed4d7c..43231e3c 100644 --- a/blog.config.js +++ b/blog.config.js @@ -28,8 +28,8 @@ const BLOG = { FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115 FONT_URL: [// 字体CSS 例如 https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css 'https://fonts.googleapis.com/css?family=Bitter&display=swap', - 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap', - 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap' + 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap', + 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap' ], FONT_SANS: [// 无衬线字体 例如'LXGW WenKai' 'Bitter', '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"', 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..7898b3cc 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 () => destroySakura() }, []) + 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/components/SideBarDrawer.js b/components/SideBarDrawer.js index 47052db9..0949cda2 100644 --- a/components/SideBarDrawer.js +++ b/components/SideBarDrawer.js @@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => { } } - return