{/* 文章列表 */}
-
+
{postsToShow.map(post => (
))}
@@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
{
handleGetMore()
}}
- className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
+ className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
> {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
diff --git a/components/Collapse.js b/components/Collapse.js
new file mode 100644
index 00000000..baca44cc
--- /dev/null
+++ b/components/Collapse.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react'
+
+const Collapse = props => {
+ const collapseRef = useRef(null)
+ const collapseSection = element => {
+ const sectionHeight = element.scrollHeight
+ requestAnimationFrame(function () {
+ element.style.height = sectionHeight + 'px'
+ requestAnimationFrame(function () {
+ element.style.height = 0 + 'px'
+ })
+ })
+ }
+ const expandSection = element => {
+ const sectionHeight = element.scrollHeight
+ element.style.height = sectionHeight + 'px'
+ const clearTime = setTimeout(() => {
+ element.style.height = '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/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index eda4cfdf..38df8131 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -6,27 +6,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons'
import BLOG from 'blog.config'
-const MenuButtonGroup = ({ allowCollapse = false }) => {
+const MenuButtonGroup = ({ allowCollapse = false, postCount }) => {
const { locale } = useGlobal()
const router = useRouter()
+ const archiveSlot =
{postCount}
+
const links = [
{ id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
- { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.menu.showArchive },
- { id: 2, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
- { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
+ { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory },
+ { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag },
+ { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: BLOG.menu.showArchive },
{ id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout }
]
- return