From ff89e16ee29241d1971a8fa99266954c797e85c1 Mon Sep 17 00:00:00 2001 From: anime Date: Mon, 23 Dec 2024 20:10:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=8E=9F=E7=94=9F=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=AD=97=E6=95=B0=E7=BB=9F=E8=AE=A1=E5=92=8C=E9=98=85=E8=AF=BB?= =?UTF-8?q?=E6=97=B6=E9=95=BF):=20=E7=BB=9F=E4=B8=80=E4=BD=BF=E7=94=A8Word?= =?UTF-8?q?Count=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit d8180e1a783ad50c501b741adc72f2747896bdc1) --- components/WordCount.js | 74 +++++-------------------- lib/plugins/wordCount.js | 27 +++++++++ lib/utils/post.js | 8 ++- themes/heo/components/PostHeader.js | 10 ++-- themes/matery/components/ArticleInfo.js | 68 ++++++++++++----------- themes/matery/components/WordCount.js | 68 ----------------------- themes/next/components/ArticleDetail.js | 4 +- themes/next/components/WordCount.js | 62 --------------------- 8 files changed, 91 insertions(+), 230 deletions(-) create mode 100644 lib/plugins/wordCount.js delete mode 100644 themes/matery/components/WordCount.js delete mode 100644 themes/next/components/WordCount.js diff --git a/components/WordCount.js b/components/WordCount.js index 7f7066cf..af808251 100644 --- a/components/WordCount.js +++ b/components/WordCount.js @@ -1,67 +1,23 @@ import { useGlobal } from '@/lib/global' -import { useEffect } from 'react' /** * 字数统计 * @returns */ -export default function WordCount() { +export default function WordCount({ wordCount, readTime }) { const { locale } = useGlobal() - useEffect(() => { - countWords() - }) - - return - - - 0 - - - - - 0 {locale.COMMON.MINUTE} - + return ( + + + + {locale.COMMON.WORD_COUNT}  + {wordCount} + + + + {locale.COMMON.READ_TIME}≈  + {readTime} {locale.COMMON.MINUTE} + -} - -/** - * 更新字数统计和阅读时间 - */ -function countWords() { - const articleText = deleteHtmlTag(document.querySelector('#article-wrapper #notion-article')?.innerHTML) - const wordCount = fnGetCpmisWords(articleText) - // 阅读速度 300-500每分钟 - document.getElementById('wordCount').innerHTML = wordCount - document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1 - const wordCountWrapper = document.getElementById('wordCountWrapper') - wordCountWrapper.classList.remove('hidden') -} - -// 去除html标签 -function deleteHtmlTag(str) { - if (!str) { - return '' - } - str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和 之类的特殊符合 - return str -} - -// 用word方式计算正文字数 -function fnGetCpmisWords(str) { - if (!str) { - return 0 - } - 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 -} + ) +} \ No newline at end of file diff --git a/lib/plugins/wordCount.js b/lib/plugins/wordCount.js new file mode 100644 index 00000000..156c8b85 --- /dev/null +++ b/lib/plugins/wordCount.js @@ -0,0 +1,27 @@ +/** + * 更新字数统计和阅读时间 + */ +export function countWords(pageContentText) { + const wordCount = fnGetCpmisWords(pageContentText) + // 阅读速度 300-500每分钟 + const readTime = Math.floor(wordCount / 400) + 1 + return { wordCount, readTime } +} + +// 用word方式计算正文字数 +function fnGetCpmisWords(str) { + if (!str) { + return 0 + } + 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/lib/utils/post.js b/lib/utils/post.js index efcb2904..be16cc1d 100644 --- a/lib/utils/post.js +++ b/lib/utils/post.js @@ -10,6 +10,7 @@ import { getPageContentText } from '@/pages/search/[keyword]' import { getAiSummary } from '@/lib/plugins/aiSummary' import BLOG from '@/blog.config' import { uploadDataToAlgolia } from '@/lib/plugins/algolia' +import { countWords } from '@/lib/plugins/wordCount' /** * 获取文章的关联推荐文章列表，目前根据标签关联性筛选 @@ -115,7 +116,10 @@ export async function processPostData(props, from) { key => props.post.blockMap.block[key]?.value?.parent_id === props.post.id ) props.post.toc = getPageTableOfContents(props.post, props.post.blockMap) - + const pageContentText = getPageContentText(props.post, props.post.blockMap) + const { wordCount, readTime } = countWords(pageContentText) + props.post.wordCount = wordCount + props.post.readTime = readTime const aiSummaryAPI = siteConfig('AI_SUMMARY_API') if (aiSummaryAPI) { const post = props.post @@ -131,7 +135,7 @@ export async function processPostData(props, from) { for (let heading of post.toc) { content += heading.text + ' ' } - content += getPageContentText(post, post.blockMap) + content += pageContentText const combinedText = post.title + ' ' + content const truncatedText = combinedText.slice(0, wordLimit) aiSummary = await getAiSummary( diff --git a/themes/heo/components/PostHeader.js b/themes/heo/components/PostHeader.js index e4452e92..88711b50 100644 --- a/themes/heo/components/PostHeader.js +++ b/themes/heo/components/PostHeader.js @@ -31,9 +31,8 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) { height: 100%; top: 0; left: 0; - box-shadow: 110px -130px 500px 100px ${isDarkMode - ? '#CA8A04' - : '#0060e0'} inset; + box-shadow: 110px -130px 500px 100px + ${isDarkMode ? '#CA8A04' : '#0060e0'} inset; } `} @@ -105,7 +104,10 @@ export default function PostHeader({ post, siteInfo, isDarkMode }) {
- +
{post?.type !== 'Page' && ( <> diff --git a/themes/matery/components/ArticleInfo.js b/themes/matery/components/ArticleInfo.js index af3fa823..010d5e85 100644 --- a/themes/matery/components/ArticleInfo.js +++ b/themes/matery/components/ArticleInfo.js @@ -1,46 +1,48 @@ import Link from 'next/link' import { useGlobal } from '@/lib/global' import TagItemMiddle from './TagItemMiddle' -import WordCount from './WordCount' import { formatDateFmt } from '@/lib/utils/formatDate' +import WordCount from '@/components/WordCount' -export const ArticleInfo = (props) => { +export const ArticleInfo = props => { const { post } = props const { locale } = useGlobal() return ( -
-
- {post.tagItems && ( -
- {post.tagItems.map(tag => ( - - ))} -
- )} -
+
+
+ {post.tagItems && ( +
+ {post.tagItems.map(tag => ( + + ))} +
+ )} +
-
- {post?.type !== 'Page' && (<> - - - {locale.COMMON.POST_TIME}: {post?.publishDay} - - - - {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay} - - - - - - )} -
- -
+
+ {post?.type !== 'Page' && ( + <> + + {' '} + {locale.COMMON.POST_TIME}: {post?.publishDay} + + + + {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedDay} + + + + + + + + )} +
+
) } diff --git a/themes/matery/components/WordCount.js b/themes/matery/components/WordCount.js deleted file mode 100644 index d7d7c02b..00000000 --- a/themes/matery/components/WordCount.js +++ /dev/null @@ -1,68 +0,0 @@ -import { useGlobal } from '@/lib/global' -import { useEffect } from 'react' - -/** - * 字数统计 - * @returns - */ -export default function WordCount() { - const { locale } = useGlobal() - useEffect(() => { - countWords() - }) - - return - - - {locale.COMMON.WORD_COUNT}  - 0 - - - - - 0 {locale.COMMON.MINUTE} - - -} - -/** - * 更新字数统计和阅读时间 - */ -function countWords() { - const articleText = deleteHtmlTag(document.querySelector('#article-wrapper #notion-article')?.innerHTML) - const wordCount = fnGetCpmisWords(articleText) - // 阅读速度 300-500每分钟 - document.getElementById('wordCount').innerHTML = wordCount - document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1 - const wordCountWrapper = document.getElementById('wordCountWrapper') - wordCountWrapper.classList.remove('hidden') -} - -// 去除html标签 -function deleteHtmlTag(str) { - if (!str) { - return '' - } - str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和 之类的特殊符合 - return str -} - -// 用word方式计算正文字数 -function fnGetCpmisWords(str) { - if (!str) { - return 0 - } - 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/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js index 61bcdb2f..902cf6a6 100644 --- a/themes/next/components/ArticleDetail.js +++ b/themes/next/components/ArticleDetail.js @@ -14,7 +14,7 @@ import ArticleCopyright from './ArticleCopyright' import BlogAround from './BlogAround' import RecommendPosts from './RecommendPosts' import TagItem from './TagItem' -import WordCount from './WordCount' +import WordCount from '@/components/WordCount' /** * @@ -92,7 +92,7 @@ export default function ArticleDetail(props) { )}
- +
)} diff --git a/themes/next/components/WordCount.js b/themes/next/components/WordCount.js deleted file mode 100644 index 6cfd1cc6..00000000 --- a/themes/next/components/WordCount.js +++ /dev/null @@ -1,62 +0,0 @@ -import { useGlobal } from '@/lib/global' -import { useEffect } from 'react' - -/** - * 字数统计 - * @returns - */ -export default function WordCount() { - useEffect(() => { - countWords() - }) - - const { locale } = useGlobal() - - return
- - {locale.COMMON.WORD_COUNT}≈ - 0  |  {locale.COMMON.READ_TIME} ≈ 0 {locale.COMMON.MINUTE} -
-} - -/** - * 更新字数统计和阅读时间 - */ -function countWords() { - const articleText = deleteHtmlTag(document.querySelector('#article-wrapper #notion-article')?.innerHTML) - const wordCount = fnGetCpmisWords(articleText) - // 阅读速度 300-500每分钟 - document.getElementById('wordCount').innerHTML = wordCount - document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1 - const wordCountWrapper = document.getElementById('wordCountWrapper') - wordCountWrapper.classList.remove('hidden') -} - -// 去除html标签 -function deleteHtmlTag(str) { - if (!str) { - return '' - } - str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和 之类的特殊符合 - return str -} - -// 用word方式计算正文字数 -function fnGetCpmisWords(str) { - if (!str) { - return 0 - } - 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 -}