diff --git a/README.md b/README.md index 3df2f387..d805890d 100644 --- a/README.md +++ b/README.md @@ -44,20 +44,21 @@ - 使用 Tailwind CSS，轻松实现二次开发 **🕸  网址美观、搜索引擎优化** +- 更多特性、欢迎移步[我的博客](https://tangly1024.com/article/notion-next)查看 + +## 更新日志 +请移步 [更新文档](https://docs.tangly1024.com/zh/changelog)查看 -## 更多特性 -欢迎移步[我的博客](https://tangly1024.com/article/notion-next)查看 ## 快速起步 - 给这个项目点个小星星 😉 - 将 [这个 Notion 模板](https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5) 制作副本，并分享这个页面给所有人 - [Fork](https://github.com/tangly1024/NotionNext/fork) 这个项目 -- 在 `blog.config.js` 配置相关选项，更多关于配置的说明，请移步[NotionNext文档](https://docs.tangly1024.com/zh) - _(可选)_ 用自己的图片替换 `/public` 文件夹里的 `avatar.jpg`、`favicon.svg` 和 `favicon.ico` - 在 [Vercel](https://vercel.com) 上部署这个项目, 设定一下环境变量： - `NOTION_PAGE_ID`: 你刚刚分享出去的 Notion 页面网址中的页面 ID，通常是网址中工作区地址后的 32 位字符串 - - `NOTION_ACCESS_TOKEN`（可选）: 如果你决定不分享你的数据库，你可以使用 token 来让网页从 Notion 数据库中抓取数据。你可以在你的浏览器 cookies 中找到它，名称是 `token_v2'。 - - Notion token 的有效期只有 180 天，请确保在 Vercel Dashboard 上手动更新，我们可能会在未来切换到官方 API 来解决这个问题。此外，如果数据库是非公开到，Notion 中的图片可能无法正常显示到网页上。 +- 在 `blog.config.js` 配置相关选项，更多关于配置的说明，请移步[NotionNext文档](https://docs.tangly1024.com/zh) + - **稍微等等就可以访问了！** 简单吗? @@ -76,10 +77,10 @@ yarn run start # 本地启动NextJS服务 ## 引用技术 -- **生成**: Next.js SSG 和 Incremental Static Regeneration -- **页面渲染**: [React-notion-x](https://github.com/NotionX/react-notion-x) -- **样式**: Tailwind CSS 和 `@tailwindcss/jit` compiler -- **评论**: Gitalk,Cusdis,Utterances +- **框架**: Next.js +- **渲染**: [React-notion-x](https://github.com/NotionX/react-notion-x) +- **样式**: [Tailwind CSS](https://www.tailwindcss.cn/) 和 `@tailwindcss/jit` compiler +- **评论**: Gitalk, Cusdis, Utterances - **图标**：[fontawesome](https://fontawesome.com/v5.15/icons?d=gallery) ## 页面样式主题 diff --git a/blog.config.js b/blog.config.js index 059ad0a9..d35bb178 100644 --- a/blog.config.js +++ b/blog.config.js @@ -12,6 +12,7 @@ const BLOG = { homeBannerImage: './bg_image.jpg', // 背景图地址 showPostCover: false, // 文章列表显示封面图 showPreview: true, // 列表展示文章预览 + previewLines: 12, // 预览文章的篇幅 showSummary: false // 显示用户自定义摘要 }, lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more. @@ -38,8 +39,8 @@ const BLOG = { showPet: false, // 是否显示宠物挂件 petLink: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models showToTop: true, // 是否显示回顶 - showToBottom: true, // 显示回底 - showDarkMode: true, // 显示日间/夜间模式切换 + showToBottom: false, // 显示回底 + showDarkMode: false, // 显示日间/夜间模式切换 showToc: true, // 移动端显示悬浮目录 showShareBar: false, // 文章分享功能 showRelatePosts: true, // 相关文章推荐 @@ -55,13 +56,13 @@ const BLOG = { telegram: 'https://t.me/tangly_1024' }, comment: { // 评论插件，支持 gitalk, utterances, cusdis - provider: '', // 不需要则留空白 + provider: 'gitalk', // 不需要则留空白 gitalkConfig: { repo: 'NotionNext', // The repository of store comments owner: 'tangly1024', admin: ['tangly1024'], - clientID: 'be7864a16b693e256f8f', - clientSecret: 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2', + clientID: process.env.GITALK_ID || 'be7864a16b693e256f8f', + clientSecret: process.env.GITALK_SECRET || 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2', distractionFreeMode: false }, cusdisConfig: { diff --git a/components/Analytics.js b/components/Analytics.js index fbd23538..c7655654 100644 --- a/components/Analytics.js +++ b/components/Analytics.js @@ -13,10 +13,10 @@ export default function Analytics ({ postCount }) {
{postCount}{locale.COMMON.POSTS} - {/* */} - {/* | {locale.COMMON.VISITORS} */} - - | {locale.COMMON.VIEWS} + + | {locale.COMMON.VISITORS} + {/* + | {locale.COMMON.VIEWS} */}
} diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js index 097a5242..e099dc48 100644 --- a/components/ArticleDetail.js +++ b/components/ArticleDetail.js @@ -4,8 +4,6 @@ import Comment from '@/components/Comment' import RecommendPosts from '@/components/RecommendPosts' import ShareBar from '@/components/ShareBar' import TagItem from '@/components/TagItem' -import TocDrawer from '@/components/TocDrawer' -import TocDrawerButton from '@/components/TocDrawerButton' import formatDate from '@/lib/formatDate' import { useGlobal } from '@/lib/global' import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons' @@ -22,7 +20,6 @@ import 'prismjs/components/prism-typescript' import { useEffect, useRef } from 'react' import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x' import ArticleCopyright from './ArticleCopyright' -import Live2D from './Live2D' import WordCount from './WordCount' /** @@ -31,8 +28,6 @@ import WordCount from './WordCount' * @returns */ export default function ArticleDetail ({ post, recommendPosts, prev, next }) { - const targetRef = useRef(null) - const drawerRight = useRef(null) const url = BLOG.link + useRouter().asPath const { locale } = useGlobal() const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE) @@ -55,144 +50,132 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) { } }) - return (<> -
-
+ return (
+
-
- {post.type && !post.type.includes('Page') && post?.page_cover && ( -
- {/* eslint-disable-next-line @next/next/no-img-element */} - {post.title} - {/*
- {post.title} -
*/} -
- )} - - {/* 文章Title */} -
- {post.title} -
- -
-
- - - - {post.category} - - - | - - {post.type[0] !== 'Page' && (<> - - - {date} - - - | - )} - -
- -   - - | -
-
-
- -
- -
- - {/*
*/} - -
- - {/* Notion文章主体 */} -
- {post.blockMap && ( - + {post.type && !post.type.includes('Page') && post?.page_cover && ( +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {post.title} + {/*
+ {post.title} - )} -
+
*/} +
+ )} -
- {/* 文章内嵌广告 */} - -
- - {/* 版权声明 */} - - - {/* 推荐文章 */} - - - {/* 标签列表 */} -
- {post.tagItems && ( -
-
- {locale.COMMON.TAGS}： -
- {post.tagItems.map(tag => ( - - ))} -
- )} -
- -
-
- - - - - - {/* 评论互动 */} -
- + {/* 文章Title */} +
+ {post.title}
-
- {/* 悬浮目录按钮 */} -
- { drawerRight.current.handleSwitchVisible() }} /> - -
+
+
+ + + + {post.category} + + + | - {/* 宠物 */} - + {post.type[0] !== 'Page' && (<> + + + {date} + + + | + )} - ) +
+ +   + + | +
+
+
+ +
+ +
+ + {/*
*/} + + + + {/* Notion文章主体 */} +
+ {post.blockMap && ( + + )} +
+ +
+ {/* 文章内嵌广告 */} + +
+ + {/* 版权声明 */} + + + {/* 推荐文章 */} + + + {/* 标签列表 */} +
+ {post.tagItems && ( +
+
+ {locale.COMMON.TAGS}： +
+ {post.tagItems.map(tag => ( + + ))} +
+ )} +
+ +
+
+ + + + + + {/* 评论互动 */} +
+ +
+ ) } const mapPageUrl = id => { diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js index 6811ff93..9ef97a0b 100644 --- a/components/BlogPostCard.js +++ b/components/BlogPostCard.js @@ -1,27 +1,29 @@ import BLOG from '@/blog.config' +import { useGlobal } from '@/lib/global' +import { faAngleRight, faFolder } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import Image from 'next/image' import Link from 'next/link' import React from 'react' -import Image from 'next/image' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faAngleDoubleRight, faFolder } from '@fortawesome/free-solid-svg-icons' -import TagItemMini from './TagItemMini' import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x' -import { useGlobal } from '@/lib/global' +import Card from './Card' +import TagItemMini from './TagItemMini' const BlogPostCard = ({ post, showSummary }) => { const { locale } = useGlobal() + const showPreview = BLOG.home?.showPreview && post.blockMap return ( -
+ +
-
+
- + {post.title} - + + ) } diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index 07fd9be1..1c378bfa 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -55,7 +55,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home return
{/* 文章列表 */} -
+
{postsToShow.map(post => ( ))} @@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl 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 ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
diff --git a/components/Card.js b/components/Card.js new file mode 100644 index 00000000..d24c046e --- /dev/null +++ b/components/Card.js @@ -0,0 +1,9 @@ +const Card = ({ children, headerSlot, className }) => { + return
+ <>{headerSlot} +
+ {children} +
+
+} +export default Card diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js index 7b521616..e768757f 100644 --- a/components/CategoryGroup.js +++ b/components/CategoryGroup.js @@ -12,7 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => { + ' text-sm w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'}> {category}({categories[category]}) diff --git a/components/Collapse.js b/components/Collapse.js new file mode 100644 index 00000000..7607b732 --- /dev/null +++ b/components/Collapse.js @@ -0,0 +1,38 @@ +import React, { useEffect, useRef } from 'react' + +const Collapse = props => { + const collapseRef = useRef(null) + const collapseSection = element => { + const sectionHeight = element.scrollHeight + requestAnimationFrame(function () { + element.style.height = sectionHeight + 'px' + requestAnimationFrame(function () { + element.style.height = 0 + 'px' + }) + }) + } + const expandSection = element => { + const sectionHeight = element.scrollHeight + element.style.height = sectionHeight + 'px' + const clearTime = setTimeout(() => { + element.style.height = 'auto' + }, 400) + clearTimeout(clearTime) + } + useEffect(() => { + const element = collapseRef.current + if (props.isOpen) { + expandSection(element) + } else { + collapseSection(element) + } + }, [props.isOpen]) + return ( +
+ {props.children} +
+ ) +} +Collapse.defaultProps = { isOpen: false } + +export default Collapse diff --git a/components/Comment.js b/components/Comment.js index ea747509..5e49f4d3 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -2,6 +2,7 @@ import BLOG from '@/blog.config' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import { useGlobal } from '@/lib/global' +import 'gitalk/dist/gitalk.css' const GitalkComponent = dynamic( () => { diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js index ae082836..6a286fcd 100644 --- a/components/FloatDarkModeButton.js +++ b/components/FloatDarkModeButton.js @@ -1,27 +1,13 @@ -import { useEffect, useState } from 'react' +import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' +import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import BLOG from '@/blog.config' -import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' export default function FloatDarkModeButton () { if (!BLOG.widget?.showDarkMode) { return <> } - const [show, switchShow] = useState(false) - const scrollListener = () => { - const scrollY = window.pageYOffset - const shouldShow = scrollY > 100 - if (shouldShow !== show) { - switchShow(shouldShow) - } - } - useEffect(() => { - scrollListener() - document.addEventListener('scroll', scrollListener) - return () => document.removeEventListener('scroll', scrollListener) - }, [show]) const { changeTheme } = useGlobal() const userTheme = loadUserThemeFromCookies() @@ -37,12 +23,8 @@ export default function FloatDarkModeButton () { return (