diff --git a/.gitignore b/.gitignore index e2267b04..f5b2d6fe 100644 --- a/.gitignore +++ b/.gitignore @@ -33,10 +33,13 @@ yarn-error.log* # vercel .vercel -# sitemap -/public/robots.txt -/public/sitemap.xml +# dev /data.json /yarn.lock .idea .vscode + + +# sitemap +/public/robots.txt +/public/sitemap.xml \ No newline at end of file diff --git a/Nobelium-Logo.svg b/Nobelium-Logo.svg deleted file mode 100644 index 8275314e..00000000 --- a/Nobelium-Logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/README.md b/README.md index 1e7ff7f4..d805890d 100644 --- a/README.md +++ b/README.md @@ -17,11 +17,7 @@

-演示地址：[https://www.tangly1024.com/](https://www.tangly1024.com/) - -
截图 - -
+演示地址：[https://tangly1024.com/](https://tangly1024.com/) ## 亮点 ✨ @@ -37,8 +33,10 @@ **🚙  全功能，完全不操心** -- 评论、宽页面、搜索和标签 -- 订阅、网站统计、Web Vital 分析…… 还有更多功能待你发现 +- 评论、搜索、标签、分类 +- 订阅、网站统计 +- 本地化多语言 +- 服务端渲染、优秀的SEO **🎨  美观，轻松自定义** @@ -46,30 +44,54 @@ - 使用 Tailwind CSS，轻松实现二次开发 **🕸  网址美观、搜索引擎优化** +- 更多特性、欢迎移步[我的博客](https://tangly1024.com/article/notion-next)查看 + +## 更新日志 +请移步 [更新文档](https://docs.tangly1024.com/zh/changelog)查看 ## 快速起步 - 给这个项目点个小星星 😉 -- 将 [这个 Notion 模板](https://www.notion.so/68be9021bca34b8e89f0246f27e608df) 制作副本，并分享这个页面给所有人 +- 将 [这个 Notion 模板](https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5) 制作副本，并分享这个页面给所有人 - [Fork](https://github.com/tangly1024/NotionNext/fork) 这个项目 -- 在 `blog.config.js` 配置相关选项 -- _(可选)_ 用自己的图片替换 `/public` 文件夹里的 `avatar.svg`、`favicon.svg` 和 `favicon.ico` +- _(可选)_ 用自己的图片替换 `/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) + - **稍微等等就可以访问了！** 简单吗? -## 技术细节 -- **生成**: Next.js SSG 和 Incremental Static Regeneration -- **页面渲染**: [React-notion-x](https://github.com/NotionX/react-notion-x) -- **样式**: Tailwind CSS 和 `@tailwindcss/jit` compiler -- **评论**: Gitalk,Cusdis,Utterances +## 快速开发 + +```bash +yarn # 安装依赖 + +yarn run dev # 本地开发 + +yarn run build # 本地打包编译 + +yarn run start # 本地启动NextJS服务 + +``` + +## 引用技术 + +- **框架**: 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) ## 页面样式主题 -- 仿照 [fukasawa](https://andersnoren.se/themes/fukasawa) +- 仿照 [fukasawa](https://andersnoren.se/themes/fukasawa) 分支-https://github.com/tangly1024/NotionNext/tree/theme-Fukasawa +
fukasawa截图 + +
+- 仿照 [youtube] 主题 分支-https://github.com/tangly1024/NotionNext/tree/themw-youtube +
youtube截图 + +
## License diff --git a/blog.config.js b/blog.config.js index 5566220e..d35bb178 100644 --- a/blog.config.js +++ b/blog.config.js @@ -1,50 +1,68 @@ const BLOG = { - title: '塘里博客', - author: 'tangly1024', - email: 'tlyong1992@hotmail.com', - link: 'https://tangly1024.com', - description: '唐风集里，收卷波澜', - lang: 'zh-CN', // ['zh-CN','en-US'] + title: '小唐笔记', // 站点标题 + description: '分享编程技术与记录生活', // 站点描述 + author: 'tangly1024', // 作者 + bio: '一个普通的干饭人🍚', // 作者简介 + email: 'tlyong1992@hotmail.com', // 联系邮箱 + link: 'https://tangly1024.com', // 网站地址 + keywords: ['Notion', '写作', '博客'], // 网站关键词 + home: { // 首页 + showHomeBanner: false, // 首页是否显示大图及标语 [true,false] + homeBannerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字 + 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. + notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！ + notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public appearance: 'auto', // ['light', 'dark', 'auto'], - font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono'] - lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc + font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family + lightBackground: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc darkBackground: '#111827', // use hex value, don't forget '#' path: '', // leave this empty unless you want to deploy in a folder since: 2020, // if leave this empty, current year will be used. - postsPerPage: 9, + postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载 + postsPerPage: 6, // post counts per page sortByDate: false, - showAbout: true, // WIP - showArchive: true, // WIP - autoCollapsedNavBar: false, // the automatically collapsed navigation bar - socialLink: 'https://weibo.com/u/2245301913', - seo: { - keywords: ['Blog', 'Website', 'Notion'], - googleSiteVerification: '' // Remove the value or replace it with your own google site verification code + topNavType: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定顶部、固定底部滑动时自动折叠，不固定 + menu: { // 菜单栏设置 + showAbout: false, // 显示关于 + showCategory: true, // 显示分类 + showTag: true, // 显示标签 + showArchive: true, // 显示归档 + showSearch: true // 显示搜索 }, - notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // DO NOT CHANGE THIS！！！ - notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public - analytics: { - provider: 'ga', // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it. - ackeeConfig: { - tracker: '', // e.g 'https://ackee.tangly1024.net/tracker.js' - dataAckeeServer: '', // e.g https://ackee.tangly1024.net , don't end with a slash - domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b' - }, - gaConfig: { - measurementId: 'G-5EV4HZD0XX' // e.g: G-XXXXXXXXXX - }, - baidyAnalytics: 'f683ef76f06bb187cbed5546f6f28f28', // e.g only need xxxxx -> https://hm.baidu.com/hm.js?xxxxx - busuanzi: true // see http://busuanzi.ibruce.info/ + widget: { // 挂件及组件设置 + 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: false, // 显示回底 + showDarkMode: false, // 显示日间/夜间模式切换 + showToc: true, // 移动端显示悬浮目录 + showShareBar: false, // 文章分享功能 + showRelatePosts: true, // 相关文章推荐 + showCopyRight: true, // 文章版权声明 + showLatestPost: false, // 右侧边栏显示最近更新 + showCategoryList: false, // 右侧边栏显示文章分类列表 + showTagList: false // 右侧边栏显示标签分类列表 }, - comment: { - // support provider: gitalk, utterances, cusdis - provider: 'cusdis', // leave it empty if you don't need any comment plugin + socialLink: { // 社交链接，如不需要展示可以留空白，例如 weibo:'' + weibo: 'https://weibo.com/tangly1024', + twitter: 'https://twitter.com/troy1024_1', + github: 'https://github.com/tangly1024', + telegram: 'https://t.me/tangly_1024' + }, + comment: { // 评论插件，支持 gitalk, utterances, cusdis + 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: { @@ -54,11 +72,31 @@ const BLOG = { }, utterancesConfig: { repo: 'tangly1024/NotionNext' + }, + gitter: '', // gitter聊天室 + DaoVoiceId: '', // DaoVoice http://dashboard.daovoice.io/get-started + TidioId: '' // https://www.tidio.com/ + }, + // --- 高级设置 + analytics: { // 文章访问量统计 + busuanzi: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/ + provider: 'ga', // 支持 Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it. + baiduAnalytics: 'f683ef76f06bb187cbed5546f6f28f28', // e.g only need xxxxx -> https://hm.baidu.com/hm.js?[xxxxx] + cnzzAnalytics: '', // 站长统计id only need xxxxxxxx -> https://s9.cnzz.com/z_stat.php?id=[xxxxxxxx]&web_id=[xxxxxxx] + gaConfig: { + measurementId: 'G-68EK0W049N' // e.g: G-XXXXXXXXXX + }, + ackeeConfig: { + tracker: '', // e.g 'https://ackee.tangly1024.net/tracker.js' + dataAckeeServer: '', // e.g https://ackee.tangly1024.net , don't end with a slash + domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b' } }, - isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables) - googleAdsenseId: 'ca-pub-2708419466378217', - DaoVoiceId: '' // DaoVoice http://dashboard.daovoice.io/get-started + seo: { + googleSiteVerification: '' // Remove the value or replace it with your own google site verification code + }, + googleAdsenseId: 'ca-pub-2708419466378217', // 谷歌广告ID + isProd: process.env.VERCEL_ENV === 'production'// distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables) } // export default BLOG module.exports = BLOG diff --git a/components/BlogPost.js b/components/BlogPost.js deleted file mode 100644 index e66580ed..00000000 --- a/components/BlogPost.js +++ /dev/null @@ -1,31 +0,0 @@ -import BLOG from '@/blog.config' -import TagItem from '@/components/TagItem' - -const BlogPost = ({ post }) => { - return ( -
- {/* 封面图 */} - {post.page_cover && post.page_cover.length > 1 && ( - - {post.title} - - )} - -
- - {post.title} - -

{post.summary}

-
- {post.tags.map(tag => ( - - ))} -
-
-
- ) -} - -export default BlogPost diff --git a/components/BlogPostMini.js b/components/BlogPostMini.js deleted file mode 100644 index 0b2b8264..00000000 --- a/components/BlogPostMini.js +++ /dev/null @@ -1,24 +0,0 @@ -import BLOG from '@/blog.config' - -const BlogPostMini = ({ post }) => { - return ( - - {/* 封面图 */} - {post.page_cover && post.page_cover.length > 1 && ( - {post.title} - )} - -
- - {post.title} - - {/*

{post.summary}

*/} - {/*

{BLOG.link}/article/{post.slug}

*/} -
- - ) -} - -export default BlogPostMini diff --git a/components/Busuanzi.js b/components/Busuanzi.js new file mode 100644 index 00000000..a2456a75 --- /dev/null +++ b/components/Busuanzi.js @@ -0,0 +1,17 @@ +import busuanzi from '@/lib/busuanzi' +import { useRouter } from 'next/router' +import { useEffect } from 'react' + +export default function Busuanzi () { + const router = useRouter() + useEffect(() => { + const busuanziRouteChange = url => { + busuanzi.fetch() + } + router.events.on('routeChangeComplete', busuanziRouteChange) + return () => { + router.events.off('routeChangeComplete', busuanziRouteChange) + } + }, [router.events]) + return null +} diff --git a/components/Comment.js b/components/Comment.js index 2b19538b..5e49f4d3 100644 --- a/components/Comment.js +++ b/components/Comment.js @@ -1,8 +1,8 @@ import BLOG from '@/blog.config' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' -import { useTheme } from '@/lib/theme' -import { useEffect, useState } from 'react' +import { useGlobal } from '@/lib/global' +import 'gitalk/dist/gitalk.css' const GitalkComponent = dynamic( () => { @@ -25,46 +25,48 @@ const CusdisComponent = dynamic( const Comment = ({ frontMatter }) => { const router = useRouter() - const { theme } = useTheme() + const { theme } = useGlobal() - return
-
留下评论
- - {/* 评论插件 */} - {BLOG.comment.provider === 'gitalk' && ( - - )} - {BLOG.comment.provider === 'utterances' && ( - - )} - {BLOG.comment.provider === 'cusdis' && ( - <> - + )} + {/* 代码统计 */} {BLOG.isProd && (<> - {/* GoogleAdsense */} - {BLOG.googleAdsenseId && ( -