d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
新增字数统计功能
This commit is contained in:
tangly1024
2021-12-17 16:42:52 +08:00
parent 395f402896
commit d4d969a10d
3 changed files with 127 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
components/ArticleDetail.js
View File

@@ -23,11 +23,7 @@ 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 { useRef } from 'react'
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
import { useEffect, useRef } from 'react'
/**
*
@@ -40,85 +36,90 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
const url = BLOG.link + useRouter().asPath
const { locale } = useGlobal()
const date = formatDate(post?.date?.start_date || post.createdTime, BLOG.lang)
return (
<>
<Progress targetRef={targetRef} />
<div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0">
<div className="max-w-5xl mx-auto w-screen md:w-full ">
<article
itemScope
itemType="https://schema.org/Movie"
className="rounded-xl shadow-md duration-300 hover:shadow-2xl animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 py-10 lg:px-52 px-5 dark:border-gray-700 bg-white dark:bg-gray-900"
useEffect(() => {
countWords()
})
return (<>
<div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0 max-w-5xl mx-auto w-screen md:w-full ">
<article itemScope itemType="https://schema.org/Movie"
className="rounded-xl shadow-md duration-300 hover:shadow-2xl animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 lg:px-48 dark:border-gray-700 bg-white dark:bg-gray-900"
>
{post.type && !post.type.includes('Page') && post?.page_cover && (
<>
<header className="w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
<Image
src={post?.page_cover}
loading="eager"
objectFit="cover"
layout="fill"
alt={post.title}
/>
</header>
</>
)}
{/* 文章Title */}
<h2 className="font-bold text-2xl text-black dark:text-white font-serif pt-10">
{' '}
{post.title}
</h2>
<hr className="mt-4" />
<section className="flex-nowrap flex mt-1 dark:text-white font-light">
<Link href={`/category/${post.category}`} passHref>
<a className="cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white">
<FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
{post.category}
</a>
</Link>
{post.type[0] !== 'Page' && (
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="pl-1 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10">
{date}
</a>
</Link>
)}
<header>
{post.type && !post.type.includes('Page') && post?.page_cover && (
<div className="w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
<Image
src={post?.page_cover}
loading="eager"
objectFit="cover"
layout="fill"
alt={post.title}
/>
</div>
)}
{/* 文章Title */}
<h2 className="font-bold text-2xl text-black dark:text-white font-serif pt-10">
{' '}
{post.title}
</h2>
<hr className="mt-4" />
<section className="flex-nowrap flex mt-1 dark:text-white font-light">
<Link href={`/category/${post.category}`} passHref>
<a className="cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white">
<FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
{post.category}
</a>
</Link>
{post.type[0] !== 'Page' && (
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="pl-1 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10">
{date}
</a>
</Link>
)}
<div id="busuanzi_container_page_pv" className="hidden">
<FontAwesomeIcon
icon={faEye}
className="text-gray-500 dark:text-gray-400 mt-3 ml-5"
/>
&nbsp;
<span
id="busuanzi_value_page_pv"
className="text-gray-500 dark:text-gray-400 leading-6"
></span>
</div>
</section>
<div id="busuanzi_container_page_pv" className="hidden">
<FontAwesomeIcon
icon={faEye}
className="text-gray-500 dark:text-gray-400 mt-3 ml-5"
/>
&nbsp;
<span
id="busuanzi_value_page_pv"
className="text-gray-500 dark:text-gray-400 leading-6"
></span>
</div>
</section>
<section className="px-1 py-2 my-1 text-sm font-light bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
{post.summary}
</section>
<section className="px-1 py-2 my-1 text-sm font-light text-gray-600 dark:text-gray-400">
{post.summary}
</section>
<section className='flex justify-end py-2 pl-1 dark:text-white items-center font-light italic text-sm'>
本文共<strong id='wordCount'>0</strong>字，阅读需要约<strong id='readTime'>0</strong>分钟
</section>
</header>
{/* Notion文章主体 */}
{blockMap && (
<NotionRenderer
className={`${BLOG.font}`}
recordMap={blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
)}
<section id='notion-article'>
{blockMap && (
<NotionRenderer
className={`${BLOG.font}`}
recordMap={blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
)}
</section>
{/* 推荐文章 */}
<RecommendPosts currentPost={post} recommendPosts={recommendPosts} />
@@ -170,19 +171,57 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
<div className="mt-5 shadow-lg rounded-xl w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
<Comment frontMatter={post} />
</div>
</div>
</div>
{/* 悬浮目录按钮 */}
<div className="block lg:hidden">
<TocDrawerButton
onClick={() => {
drawerRight.current.handleSwitchVisible()
}}
/>
{/* 目录侧边栏 */}
<TocDrawerButton onClick={() => { drawerRight.current.handleSwitchVisible() }} />
<TocDrawer post={post} cRef={drawerRight} />
</div>
</>
)
<Progress targetRef={targetRef} />
</>)
}
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标签和&nbsp;之类的特殊符合
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
}

2
components/BlogAround.js
View File

@@ -11,7 +11,7 @@ export default function BlogAround ({ prev, next }) {
if (!prev || !next) {
return <></>
}
return <section className='text-gray-800 mb-8 lg:mb-32 border-t dark:text-gray-300 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
return <section className='text-gray-800 border-t dark:text-gray-300 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
<Link href={`/article/${prev.slug}`} passHref>
<a className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
<FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}

1
pages/archive/index.js
View File

@@ -56,7 +56,6 @@ const Index = ({ allPosts, tags, categories }) => {
() => {
if (window) {
const anchor = window.location.hash
console.log('滚动', anchor)
if (anchor) {
setTimeout(() => {
const anchorElement = document.getElementById(anchor.substring(1))