From 6b9bc9560042588315020a45cb41635fb2f910ee Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 12 Feb 2022 11:22:06 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feature:=20=E5=A2=9E=E5=8A=A0=E7=9B=AE?= =?UTF-8?q?=E5=BD=95=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Medium/LayoutBase.js | 5 +- themes/Medium/LayoutSlug.js | 4 +- themes/Medium/components/Catalog.js | 88 ++++++++++++++++++++++++++++ themes/Medium/components/Progress.js | 43 ++++++++++++++ 4 files changed, 137 insertions(+), 3 deletions(-) create mode 100644 themes/Medium/components/Catalog.js create mode 100644 themes/Medium/components/Progress.js diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js index 1ee367d0..5772a5e4 100644 --- a/themes/Medium/LayoutBase.js +++ b/themes/Medium/LayoutBase.js @@ -13,10 +13,10 @@ import CONFIG_MEDIUM from './config_medium' * @constructor */ const LayoutBase = props => { - const { children, meta, showInfoCard = true } = props + const { children, meta, showInfoCard = true, slotRight } = props return ( -
+
@@ -28,6 +28,7 @@ const LayoutBase = props => {
{ CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && } + { slotRight }
} diff --git a/themes/Medium/components/SocialButton.js b/themes/Medium/components/SocialButton.js index 71f43da2..54b31158 100644 --- a/themes/Medium/components/SocialButton.js +++ b/themes/Medium/components/SocialButton.js @@ -10,8 +10,7 @@ import React from 'react' * @constructor */ const SocialButton = () => { - return
-
+ return
{BLOG.CONTACT_GITHUB && } @@ -31,6 +30,5 @@ const SocialButton = () => {
-
} export default SocialButton From 22c9ca095b3f00655a25e47466beaa3457826b29 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 13 Feb 2022 11:50:11 +0800 Subject: [PATCH 05/12] =?UTF-8?q?feature:=20=E6=A0=87=E7=AD=BE=20=E5=88=86?= =?UTF-8?q?=E7=B1=BB=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Medium/LayoutCategory.js | 4 ++-- themes/Medium/LayoutTag.js | 4 ++-- themes/Medium/components/LogoBar.js | 10 ---------- 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/themes/Medium/LayoutCategory.js b/themes/Medium/LayoutCategory.js index 3a4bb0e9..caa5c5a8 100644 --- a/themes/Medium/LayoutCategory.js +++ b/themes/Medium/LayoutCategory.js @@ -1,8 +1,8 @@ import LayoutBase from './LayoutBase' +import BlogPostListPage from './components/BlogPostListPage' export const LayoutCategory = (props) => { - const { category } = props return - Category - {category} + } diff --git a/themes/Medium/LayoutTag.js b/themes/Medium/LayoutTag.js index 5cfacb20..d0d5b556 100644 --- a/themes/Medium/LayoutTag.js +++ b/themes/Medium/LayoutTag.js @@ -1,8 +1,8 @@ import LayoutBase from './LayoutBase' +import BlogPostListPage from './components/BlogPostListPage' export const LayoutTag = (props) => { - const { tag } = props return - Tag - {tag} + } diff --git a/themes/Medium/components/LogoBar.js b/themes/Medium/components/LogoBar.js index 2643a269..c4fb5b1d 100644 --- a/themes/Medium/components/LogoBar.js +++ b/themes/Medium/components/LogoBar.js @@ -2,23 +2,13 @@ import BLOG from '@/blog.config' import Link from 'next/link' export default function LogoBar () { - // const { locale } = useGlobal() - return
{BLOG.TITLE} - {/* */} - {/* {locale.NAV.ABOUT} */} - {/* */}
- {/* {BLOG.CONTACT_EMAIL && */} - {/*
*/} - {/* */} - {/*
*/} - {/* } */}
} From 75d6a04d5026543615257514d2bfe94560267649 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sun, 13 Feb 2022 13:22:58 +0800 Subject: [PATCH 06/12] =?UTF-8?q?=E5=88=86=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Medium/LayoutCategory.js | 4 +- themes/Medium/LayoutSearch.js | 3 +- themes/Medium/LayoutTag.js | 4 +- themes/Medium/components/BlogPostCard.js | 3 +- themes/Medium/components/BlogPostListPage.js | 22 +--- .../Medium/components/BlogPostListScroll.js | 106 ++++++++++++++++++ 6 files changed, 115 insertions(+), 27 deletions(-) create mode 100644 themes/Medium/components/BlogPostListScroll.js diff --git a/themes/Medium/LayoutCategory.js b/themes/Medium/LayoutCategory.js index caa5c5a8..070184d0 100644 --- a/themes/Medium/LayoutCategory.js +++ b/themes/Medium/LayoutCategory.js @@ -1,8 +1,8 @@ import LayoutBase from './LayoutBase' -import BlogPostListPage from './components/BlogPostListPage' +import BlogPostListScroll from './components/BlogPostListScroll' export const LayoutCategory = (props) => { return - + } diff --git a/themes/Medium/LayoutSearch.js b/themes/Medium/LayoutSearch.js index cd66e5e8..4fcbfee6 100644 --- a/themes/Medium/LayoutSearch.js +++ b/themes/Medium/LayoutSearch.js @@ -4,6 +4,7 @@ import SearchInput from './components/SearchInput' import { useGlobal } from '@/lib/global' import TagGroups from './components/TagGroups' import CategoryGroup from './components/CategoryGroup' +import BlogPostListScroll from './components/BlogPostListScroll' export const LayoutSearch = (props) => { const { locale } = useGlobal() @@ -19,6 +20,6 @@ export const LayoutSearch = (props) => {
- + } diff --git a/themes/Medium/LayoutTag.js b/themes/Medium/LayoutTag.js index d0d5b556..fe99c6b0 100644 --- a/themes/Medium/LayoutTag.js +++ b/themes/Medium/LayoutTag.js @@ -1,8 +1,8 @@ import LayoutBase from './LayoutBase' -import BlogPostListPage from './components/BlogPostListPage' +import BlogPostListScroll from './components/BlogPostListScroll' export const LayoutTag = (props) => { return - + } diff --git a/themes/Medium/components/BlogPostCard.js b/themes/Medium/components/BlogPostCard.js index 76ab1933..ee9014e5 100644 --- a/themes/Medium/components/BlogPostCard.js +++ b/themes/Medium/components/BlogPostCard.js @@ -4,7 +4,7 @@ import { faAngleRight } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import Link from 'next/link' import React from 'react' -import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x' +import { Code, Collection, Equation, NotionRenderer } from 'react-notion-x' import CONFIG_MEDIUM from '../config_medium' const BlogPostCard = ({ post, showSummary }) => { @@ -36,7 +36,6 @@ const BlogPostCard = ({ post, showSummary }) => { components={{ equation: Equation, code: Code, - collectionRow: CollectionRow, collection: Collection }} /> diff --git a/themes/Medium/components/BlogPostListPage.js b/themes/Medium/components/BlogPostListPage.js index 0c6b56b8..bac8ab88 100644 --- a/themes/Medium/components/BlogPostListPage.js +++ b/themes/Medium/components/BlogPostListPage.js @@ -13,17 +13,7 @@ import { useRouter } from 'next/router' * @constructor */ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { - let filteredPosts = Object.assign(posts) - const searchKey = getSearchKey() - if (searchKey) { - filteredPosts = posts.filter(post => { - const tagContent = post.tags ? post.tags.join(' ') : '' - const searchContent = post.title + post.summary + tagContent - return searchContent.toLowerCase().includes(searchKey.toLowerCase()) - }) - } - const filteredPostsCount = filteredPosts.length - const totalPage = Math.ceil(filteredPostsCount / BLOG.POSTS_PER_PAGE) + const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE) if (!posts || posts.length === 0) { return @@ -31,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { return (
{/* 文章列表 */} - {filteredPosts.map(post => ( + {posts.map(post => ( ))} @@ -40,12 +30,4 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => { } } -function getSearchKey () { - const router = useRouter() - if (router.query && router.query.s) { - return router.query.s - } - return null -} - export default BlogPostListPage diff --git a/themes/Medium/components/BlogPostListScroll.js b/themes/Medium/components/BlogPostListScroll.js new file mode 100644 index 00000000..1b2334cc --- /dev/null +++ b/themes/Medium/components/BlogPostListScroll.js @@ -0,0 +1,106 @@ +import BLOG from '@/blog.config' +import BlogPostCard from './BlogPostCard' +import BlogPostListEmpty from './BlogPostListEmpty' +import { useGlobal } from '@/lib/global' +import throttle from 'lodash.throttle' +import React, { useCallback, useEffect, useRef, useState } from 'react' +import { useRouter } from 'next/router' + +/** + * 博客列表滚动分页 + * @param posts 所有文章 + * @param tags 所有标签 + * @returns {JSX.Element} + * @constructor + */ +const BlogPostListScroll = ({ posts = [], currentSearch }) => { + const postsPerPage = BLOG.POSTS_PER_PAGE + const [page, updatePage] = useState(1) + let filteredPosts = Object.assign(posts) + const searchKey = getSearchKey() + if (searchKey) { + filteredPosts = posts.filter(post => { + const tagContent = post.tags ? post.tags.join(' ') : '' + const searchContent = post.title + post.summary + tagContent + return searchContent.toLowerCase().includes(searchKey.toLowerCase()) + }) + } + const postsToShow = getPostByPage(page, filteredPosts, postsPerPage) + + let hasMore = false + if (filteredPosts) { + const totalCount = filteredPosts.length + hasMore = page * postsPerPage < totalCount + } + + const handleGetMore = () => { + if (!hasMore) return + updatePage(page + 1) + } + + // 监听滚动自动分页加载 + const scrollTrigger = useCallback(throttle(() => { + const scrollS = window.scrollY + window.outerHeight + const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 + if (scrollS > clientHeight + 100) { + handleGetMore() + } + }, 500)) + + // 监听滚动 + useEffect(() => { + window.addEventListener('scroll', scrollTrigger) + return () => { + window.removeEventListener('scroll', scrollTrigger) + } + }) + + const targetRef = useRef(null) + const { locale } = useGlobal() + + if (!postsToShow || postsToShow.length === 0) { + return + } else { + return
+ + {/* 文章列表 */} +
+ {postsToShow.map(post => ( + + ))} +
+ +
+
{ + handleGetMore() + }} + 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} 😰`}
+
+
+ } +} + +/** + * 获取从第1页到指定页码的文章 + * @param page 第几页 + * @param totalPosts 所有文章 + * @param postsPerPage 每页文章数量 + * @returns {*} + */ +const getPostByPage = function (page, totalPosts, postsPerPage) { + return totalPosts.slice( + 0, + postsPerPage * page + ) +} + +function getSearchKey () { + const router = useRouter() + if (router.query && router.query.s) { + return router.query.s + } + return null +} + +export default BlogPostListScroll From ad736e1ef933c15d2c135d9ad4aa3430d29e272c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Mon, 14 Feb 2022 09:03:53 +0800 Subject: [PATCH 07/12] =?UTF-8?q?=E7=9B=AE=E5=BD=95=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E6=9D=A1=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Medium/LayoutSlug.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js index c0dd5a93..366049e7 100644 --- a/themes/Medium/LayoutSlug.js +++ b/themes/Medium/LayoutSlug.js @@ -56,7 +56,7 @@ export const LayoutSlug = (props) => { } }) - const slotRight = post?.toc &&
+ const slotRight = post?.toc && post?.toc?.length > 3 &&
return

{post?.title}

From 6c8c0133fdf37098aa57c045d468e996180aae81 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 15 Feb 2022 11:31:14 +0800 Subject: [PATCH 08/12] =?UTF-8?q?=E5=9B=9E=E9=A1=B6=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Medium/LayoutBase.js | 7 +++---- themes/Medium/components/BottomMenuBar.js | 2 +- themes/Medium/components/Catalog.js | 4 ++-- themes/Medium/components/Footer.js | 2 +- themes/Medium/components/JumpToTopButton.js | 4 ++-- 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js index 3cd0f7bb..087d2589 100644 --- a/themes/Medium/LayoutBase.js +++ b/themes/Medium/LayoutBase.js @@ -25,14 +25,13 @@ const LayoutBase = props => {
- {/* 桌面端左侧菜单 */} {/* */} -
+
{/* 移动端顶部菜单 */} -
+
{children}
@@ -51,8 +50,8 @@ const LayoutBase = props => {
{/* 移动端底部 */} -
+
) } diff --git a/themes/Medium/components/BottomMenuBar.js b/themes/Medium/components/BottomMenuBar.js index 6e8e0c71..f81af654 100644 --- a/themes/Medium/components/BottomMenuBar.js +++ b/themes/Medium/components/BottomMenuBar.js @@ -6,7 +6,7 @@ import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton' export default function BottomMenuBar ({ className }) { return ( -
+
diff --git a/themes/Medium/components/Catalog.js b/themes/Medium/components/Catalog.js index 9ae655a1..b1dc71ba 100644 --- a/themes/Medium/components/Catalog.js +++ b/themes/Medium/components/Catalog.js @@ -2,8 +2,7 @@ import React from 'react' import throttle from 'lodash.throttle' import { uuidToId } from 'notion-utils' import Progress from './Progress' -// import { cs } from 'react-notion-x' - +import JumpToTopButton from './JumpToTopButton' /** * 目录导航组件 * @param toc @@ -79,6 +78,7 @@ const Catalog = ({ toc }) => { ) })} +
} diff --git a/themes/Medium/components/Footer.js b/themes/Medium/components/Footer.js index d9aac814..57ad7797 100644 --- a/themes/Medium/components/Footer.js +++ b/themes/Medium/components/Footer.js @@ -9,7 +9,7 @@ const Footer = ({ title }) => { const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-' return (