From cf88cb2188f8963d50338d7bd4b6c244f249b374 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 14 Oct 2021 14:50:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4=E3=80=81?= =?UTF-8?q?=E6=8E=92=E7=89=88=E8=B0=83=E6=95=B4=E3=80=81=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E7=9B=AE=E5=BD=95=E6=8A=BD=E5=B1=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- components/Container.js | 1 - components/Drawer.js | 18 +++++--- components/DrawerRight.js | 52 +++++++++++++++++++++++ components/InfoCard.js | 27 ++++++++++++ components/JumpToTop.js | 2 +- components/MenuButtonGroup.js | 19 ++++----- components/RightAside.js | 68 ------------------------------ components/ShareButton.js | 2 +- components/SideBar.js | 24 +++++++---- components/TagList.js | 34 +++++++++++++++ components/{Tags.js => TagsBar.js} | 9 ++-- components/TocBar.js | 5 +-- components/TopNav.js | 27 ++++-------- layouts/ArticleLayout.js | 48 ++++++++++++++------- layouts/IndexLayout.js | 12 ++---- layouts/PageLayout.js | 13 +++--- pages/article/[slug].js | 2 +- 18 files changed, 212 insertions(+), 153 deletions(-) create mode 100644 components/DrawerRight.js create mode 100644 components/InfoCard.js delete mode 100644 components/RightAside.js create mode 100644 components/TagList.js rename components/{Tags.js => TagsBar.js} (84%) diff --git a/README.md b/README.md index d8eff560..3f1a441c 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ - **页面渲染**: [React-notion-x](https://github.com/NotionX/react-notion-x) - **样式**: Tailwind CSS 和 `@tailwindcss/jit` compiler - **评论**: Gitalk,Cusdis,Utterances -- **图标**：[fontawesome](https://fontawesome.com/v5.15/icons?d=gallery) +- **图标**：[fontawesome](https://fontawesome.com/v4.7/icons/?d=gallery) ## 页面样式主题 - 仿照 [fukasawa](https://andersnoren.se/themes/fukasawa) diff --git a/components/Container.js b/components/Container.js index 018d3e39..47e60477 100644 --- a/components/Container.js +++ b/components/Container.js @@ -34,7 +34,6 @@ const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) = return (
- {children}
) diff --git a/components/Drawer.js b/components/Drawer.js index 6f98a6f2..dc9f0db0 100644 --- a/components/Drawer.js +++ b/components/Drawer.js @@ -3,14 +3,16 @@ import BLOG from '@/blog.config' import SearchInput from '@/components/SearchInput' import MenuButtonGroup from '@/components/MenuButtonGroup' import TocBar from '@/components/TocBar' -import React, { forwardRef, useImperativeHandle, useState } from 'react' +import React, { useImperativeHandle, useState } from 'react' +import InfoCard from '@/components/InfoCard' +import TagList from '@/components/TagList' /** * 抽屉面板，可以从侧面拉出 * @returns {JSX.Element} * @constructor */ -const Drawer = ({ post, currentTag, cRef }) => { +const Drawer = ({ post, currentTag, cRef, tags }) => { // 暴露给父组件 通过cRef.current.handleMenuClick 调用 useImperativeHandle(cRef, () => { return { @@ -22,6 +24,7 @@ const Drawer = ({ post, currentTag, cRef }) => { const handleMenuClick = () => { switchShowDrawer(!showDrawer) } + console.log(post) return
{
+ {/* 菜单 */} - {post && ( -
- + {tags && ( +
+ {/* 标签云 */} +
+ 标签 + +
)}
diff --git a/components/DrawerRight.js b/components/DrawerRight.js new file mode 100644 index 00000000..8d76e406 --- /dev/null +++ b/components/DrawerRight.js @@ -0,0 +1,52 @@ +import TocBar from '@/components/TocBar' +import React, { useImperativeHandle, useState } from 'react' + +/** + * 右侧边栏 + * @param toc + * @param post + * @returns {JSX.Element} + * @constructor + */ +const DrawerRight = ({ post, cRef }) => { +// 暴露给父组件 通过cRef.current.handleMenuClick 调用 + useImperativeHandle(cRef, () => { + return { + handleMenuClick: () => handleMenuClick() + } + }) + const [showDrawer, switchShowDrawer] = useState(false) + const handleMenuClick = () => { + switchShowDrawer(!showDrawer) + } + + console.log(post) + return
+
+
+ {/* LOGO */} +
+
文章目录 +
+
+ +
+
+
+ + {/* 侧边菜单 */} +
+
+ +
+
+
+ {/* 背景蒙版 */} +
+
+} +export default DrawerRight diff --git a/components/InfoCard.js b/components/InfoCard.js new file mode 100644 index 00000000..02b89289 --- /dev/null +++ b/components/InfoCard.js @@ -0,0 +1,27 @@ +import BLOG from '@/blog.config' +import Image from 'next/image' +import React from 'react' +import Router from 'next/router' + +const InfoCard = () => { + return <> +
+
+
{ Router.push('/') }}> + {BLOG.author} +
+

{BLOG.author}

+

{BLOG.description}

+

 Fuzhou,China

+
+
+ +} + +export default InfoCard diff --git a/components/JumpToTop.js b/components/JumpToTop.js index 6b939dcd..2e81e8fa 100644 --- a/components/JumpToTop.js +++ b/components/JumpToTop.js @@ -33,7 +33,7 @@ const JumpToTop = ({ targetRef, showPercent = true }) => { return (
+ className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster shadow-lg'}>
window.scrollTo({ top: 0, behavior: 'smooth' })}> diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index d0538693..c84487b9 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -1,20 +1,19 @@ import React from 'react' import { useLocale } from '@/lib/locale' -import Link from 'next/link' const MenuButtonGroup = ({ allowCollapse = false }) => { const locale = useLocale() const links = [ - { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true }, + // { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true }, { id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true }, - { id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true }, - { id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true }, - { id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }, - { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true }, - { id: 6, icon: 'fa-map-marker', name: 'Fuzhou', to: '#', show: true }, { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true }, - { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true }, - { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true } + { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true }, + { id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }, + { id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true }, + { id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true } + // { id: 6, icon: 'fa-map-marker', name: 'Fuzhou', to: '#', show: true }, + // { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true }, + // { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true } ] return
} diff --git a/components/TagList.js b/components/TagList.js new file mode 100644 index 00000000..7edce65e --- /dev/null +++ b/components/TagList.js @@ -0,0 +1,34 @@ +import Link from 'next/link' + +/** + * 标签组 + * @param tags + * @param currentTag + * @returns {JSX.Element} + * @constructor + */ +const TagList = ({ tags, currentTag }) => { + if (!tags) return <> + return ( +
+ {Object.keys(tags).map(key => { + const selected = key === currentTag + return ( + + + + {`${key} (${tags[key]})`} + + + + ) + })} +
+ ) +} + +export default TagList diff --git a/components/Tags.js b/components/TagsBar.js similarity index 84% rename from components/Tags.js rename to components/TagsBar.js index 97706fda..0365aefa 100644 --- a/components/Tags.js +++ b/components/TagsBar.js @@ -7,9 +7,11 @@ import Link from 'next/link' * @returns {JSX.Element} * @constructor */ -const Tags = ({ tags, currentTag }) => { +const TagsBar = ({ tags, currentTag }) => { if (!tags) return <> - return (
+ return ( +
+
@@ -38,7 +40,8 @@ const Tags = ({ tags, currentTag }) => {
+
) } -export default Tags +export default TagsBar diff --git a/components/TocBar.js b/components/TocBar.js index 4130ea77..79fcf724 100644 --- a/components/TocBar.js +++ b/components/TocBar.js @@ -51,10 +51,7 @@ const TocBar = ({ toc }) => { }, throttleMs)) return
-
- 文章目录 -
-