From 44df05243cb693a5dfbb0a0206096674ab214d35 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Mon, 20 Dec 2021 15:39:05 +0800 Subject: [PATCH] =?UTF-8?q?Feature:=20=E4=B8=89=E5=88=97=E6=8E=92=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ArticleDetail.js | 50 ++------------ components/BlogPostCard.js | 6 +- components/BlogPostListScroll.js | 2 +- components/CategoryGroup.js | 4 +- components/FloatDarkModeButton.js | 2 +- components/JumpToTopButton.js | 2 +- components/LatestPostsGroup.js | 11 ++- components/LoadingCover.js | 2 +- components/MenuButtonGroup.js | 2 +- components/SideArea.js | 60 +++++------------ components/SideAreaRight.js | 108 ++++++++++++++++++++++++++++++ components/StickyBar.js | 2 +- components/TagGroups.js | 2 +- components/TagItemMini.js | 2 +- components/TocDrawerButton.js | 2 +- components/WordCount.js | 56 ++++++++++++++++ layouts/BaseLayout.js | 43 ++++++------ lib/global.js | 4 +- lib/notion/getAllTags.js | 4 +- pages/archive/index.js | 2 +- 20 files changed, 230 insertions(+), 136 deletions(-) create mode 100644 components/SideAreaRight.js create mode 100644 components/WordCount.js diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js index aeb733ee..010e8c15 100644 --- a/components/ArticleDetail.js +++ b/components/ArticleDetail.js @@ -23,7 +23,8 @@ import { useGlobal } from '@/lib/global' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons' import BlogAround from '@/components/BlogAround' -import { useEffect, useRef } from 'react' +import { useRef } from 'react' +import WordCount from './WordCount' /** * @@ -37,10 +38,6 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n const { locale } = useGlobal() const date = formatDate(post?.date?.start_date || post.createdTime, BLOG.lang) - useEffect(() => { - countWords() - }) - return (<>
- 本文共0字，阅读需要约0分钟 +
@@ -181,7 +178,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
{/* 评论互动 */} -
+
@@ -199,42 +196,3 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n const mapPageUrl = id => { return 'https://www.notion.so/' + id.replace(/-/g, '') } - -/** - * 更新字数统计和阅读时间 - */ -function countWords () { - if (window) { - const articleElement = document.getElementById('notion-article') - if (articleElement) { - const articleText = deleteHtmlTag(articleElement.innerHTML) - const wordCount = fnGetCpmisWords(articleText) - // 阅读速度 300-500每分钟 - document.getElementById('wordCount').innerHTML = wordCount - document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) - } - } -} - -// 去除html标签 -function deleteHtmlTag (str) { - str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和 之类的特殊符合 - return str -} - -// 用word方式计算正文字数 -function fnGetCpmisWords (str) { - let sLen = 0 - try { - // eslint-disable-next-line no-irregular-whitespace - str = str.replace(/(\r\n+|\s+|　+)/g, '龘') - // eslint-disable-next-line no-control-regex - str = str.replace(/[\x00-\xff]/g, 'm') - str = str.replace(/m+/g, '*') - str = str.replace(/龘+/g, '') - sLen = str.length - } catch (e) { - - } - return sLen -} diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js index 05a7ced7..2a1f5dbf 100644 --- a/components/BlogPostCard.js +++ b/components/BlogPostCard.js @@ -8,7 +8,7 @@ import TagItemMini from './TagItemMini' const BlogPostCard = ({ post, tags }) => { return ( -
@@ -41,8 +41,8 @@ const BlogPostCard = ({ post, tags }) => { {post?.page_cover && ( -
- {post.title} +
+ {post.title}
)} diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index 29a86a47..351c4927 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -64,7 +64,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer glassmorphism 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 ? '继续加载' : '加载完了😰'}
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js index b21547ce..7c2759bb 100644 --- a/components/CategoryGroup.js +++ b/components/CategoryGroup.js @@ -10,9 +10,9 @@ const CategoryGroup = ({ currentCategory, categories }) => { const selected = currentCategory === category return + ' rounded-xl text-md w-full items-center duration-300 dark:hover:text-blue-400 hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}> {category}({categories[category]}) diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js index a22abdf2..e09b79c3 100644 --- a/components/FloatDarkModeButton.js +++ b/components/FloatDarkModeButton.js @@ -32,7 +32,7 @@ export default function FloatDarkModeButton () { onClick={handleChangeDarkMode} className={ (show ? 'animate__fadeInRight ' : 'hidden lg:block') + - ' px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-5 bottom-36 z-10 duration-200 text-xs cursor-pointer rounded-xl' + + ' px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-3 bottom-36 z-10 duration-200 text-xs cursor-pointer rounded-xl' + ' text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200' } > diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js index 9297da01..792d9c93 100644 --- a/components/JumpToTopButton.js +++ b/components/JumpToTopButton.js @@ -37,7 +37,7 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => { return () => document.removeEventListener('scroll', scrollListener) }, [show]) - return (
+ return (
window.scrollTo({ top: 0, behavior: 'smooth' })} className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-xl glassmorphism py-1 cursor-pointer '}>
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js index c254b93b..5ead6bd2 100644 --- a/components/LatestPostsGroup.js +++ b/components/LatestPostsGroup.js @@ -1,6 +1,7 @@ -import Link from 'next/link' import BLOG from '@/blog.config' -import { formatDateFmt } from '@/lib/formatDate' +import { faFileAlt } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import Link from 'next/link' import { useRouter } from 'next/router' /** @@ -32,13 +33,11 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => { return ( -
+ {post.title}
-
- {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')} -
) diff --git a/components/LoadingCover.js b/components/LoadingCover.js index 2eacf0c6..1bbc0de1 100644 --- a/components/LoadingCover.js +++ b/components/LoadingCover.js @@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faSpinner } from '@fortawesome/free-solid-svg-icons' export default function LoadingCover () { - return (
+ return (
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index f564c40a..d6736511 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -28,7 +28,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => { if (link.show) { const selected = (router.pathname === link.to) || (router.asPath === link.to) return -
diff --git a/components/SideArea.js b/components/SideArea.js index 0766d359..7f945890 100644 --- a/components/SideArea.js +++ b/components/SideArea.js @@ -1,15 +1,13 @@ -import React from 'react' -import MenuButtonGroup from '@/components/MenuButtonGroup' -import InfoCard from '@/components/InfoCard' -import TagGroups from '@/components/TagGroups' -import LatestPostsGroup from '@/components/LatestPostsGroup' import CategoryGroup from '@/components/CategoryGroup' +import InfoCard from '@/components/InfoCard' +import MenuButtonGroup from '@/components/MenuButtonGroup' import SearchInput from '@/components/SearchInput' -import Link from 'next/link' -import { useGlobal } from '@/lib/global' import Toc from '@/components/Toc' +import { useGlobal } from '@/lib/global' +import { faAngleDoubleRight, faThList } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons' +import Link from 'next/link' +import React from 'react' /** * 侧边平铺 @@ -26,36 +24,26 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => { const { locale } = useGlobal() - return