diff --git a/blog.config.js b/blog.config.js index 09582ff9..6e73df2a 100644 --- a/blog.config.js +++ b/blog.config.js @@ -1,70 +1,58 @@ const BLOG = { - title: '小唐笔记', - author: 'tangly1024', - email: 'tlyong1992@hotmail.com', - link: 'https://tangly1024.com', - description: '分享编程技术与记录生活', - keywords: ['Notion', '写作', '博客'], + 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' // 首图 + homeBannerImage: './bg_image.jpg' // 背景图地址 }, 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 tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family - lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc + 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. + postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载 postsPerPage: 6, // post counts per page sortByDate: false, autoCollapsedNavBar: true, // the automatically collapsed navigation bar - menu: { // menu config - showAbout: false, - showCategory: true, - showTag: true, - showArchive: true, - showSearch: true + menu: { // 菜单栏设置 + showAbout: false, // 显示关于 + showCategory: true, // 显示分类 + showTag: true, // 显示标签 + showArchive: true, // 显示归档 + showSearch: true // 显示搜索 }, - widget: { + 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: true, - showDarkMode: true, - showToc: true, - showShareBar: false, - showRelatePosts: false, - showCopyRight: false, - showLatestPost: false, - showCategoryList: false, - showTagList: 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, // 显示日间/夜间模式切换 + showToc: true, // 移动端显示悬浮目录 + showShareBar: false, // 文章分享功能 + showRelatePosts: false, // 关联文章推荐 + showCopyRight: false, // 显示版权声明 + showLatestPost: false, // 右侧边栏显示最近更新 + showCategoryList: false, // 右侧边栏显示文章分类列表 + showTagList: false // 右侧边栏显示标签分类列表 }, - socialLink: { // 社交链接 + socialLink: { // 社交链接，如不需要展示可以留空白，例如 weibo:'' weibo: 'https://weibo.com/tangly1024', twitter: 'https://twitter.com/troy1024_1', github: 'https://github.com/tangly1024', telegram: 'https://t.me/tangly_1024' }, - 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-68EK0W049N' // e.g: G-XXXXXXXXXX - }, - baiduAnalytics: 'f683ef76f06bb187cbed5546f6f28f28', // e.g only need xxxxx -> https://hm.baidu.com/hm.js?[xxxxx] - busuanzi: true, // 展示网站阅读量访问数 see http://busuanzi.ibruce.info/ - cnzzAnalytics: '' // 站长统计id only need xxxxxxxx -> https://s9.cnzz.com/z_stat.php?id=[xxxxxxxx]&web_id=[xxxxxxx] - }, - comment: { // support provider: gitalk, utterances, cusdis - provider: '', // leave it empty if you don't need any comment plugin + comment: { // 评论插件，支持 gitalk, utterances, cusdis + provider: '', // 不需要则留空白 gitalkConfig: { repo: 'NotionNext', // The repository of store comments owner: 'tangly1024', @@ -84,6 +72,21 @@ const BLOG = { 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' + } + }, seo: { googleSiteVerification: '' // Remove the value or replace it with your own google site verification code }, diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js index fa6d3298..e8e75094 100644 --- a/components/ArticleDetail.js +++ b/components/ArticleDetail.js @@ -51,7 +51,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n const attachZoomRef = attachZoom return (<> -
+
diff --git a/components/BlogPostListPage.js b/components/BlogPostListPage.js index fe5fb6b0..d4217107 100644 --- a/components/BlogPostListPage.js +++ b/components/BlogPostListPage.js @@ -1,5 +1,5 @@ import BlogPostCard from '@/components/BlogPostCard' -import Pagination from '@/components/Pagination' +import PaginationNumber from './PaginationNumber' import BLOG from '@/blog.config' import { useRouter } from 'next/router' @@ -29,7 +29,7 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => { } // 处理分页 - const totalPages = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage) + const totalPage = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage) const postsToShow = filteredBlogPosts.slice( BLOG.postsPerPage * (page - 1), BLOG.postsPerPage * page @@ -43,28 +43,18 @@ const BlogPostListPage = ({ page = 1, posts = [], tags }) => { if (!postsToShow || postsToShow.length === 0) { return } else { - return
- {(!page || page === 1) && (
)} - - {(page && page !== 1) && ( -
-
- {page && page !== 1 && (页 {page} / {totalPages})} -
-
- )} - -
+ return ( +
{/* 文章列表 */} -
+
{postsToShow.map(post => ( ))}
- +
-
+ ) } } diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index e272ed49..ead487ca 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -53,7 +53,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory, if (!postsToShow || postsToShow.length === 0) { return } else { - return
+ return
{/* 文章列表 */}
diff --git a/components/CategoryList.js b/components/CategoryList.js index 1f7ed378..cc876f82 100644 --- a/components/CategoryList.js +++ b/components/CategoryList.js @@ -1,7 +1,7 @@ import Link from 'next/link' import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faFolder, faFolderOpen, faThList } from '@fortawesome/free-solid-svg-icons' +import { faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons' import { useGlobal } from '@/lib/global' const CategoryList = ({ currentCategory, categories }) => { @@ -11,7 +11,7 @@ const CategoryList = ({ currentCategory, categories }) => { const { locale } = useGlobal() return
    -
  • {locale.COMMON.CATEGORY}
    • +
  • {locale.COMMON.CATEGORY}
    • {Object.keys(categories).map(category => { const selected = category === currentCategory return ( diff --git a/components/InfoCard.js b/components/InfoCard.js index d7a148af..d9529357 100644 --- a/components/InfoCard.js +++ b/components/InfoCard.js @@ -9,7 +9,7 @@ const InfoCard = ({ postCount }) => {
    { Router.push('/about') }}> {BLOG.title} { className='rounded-full' />
    -
    {BLOG.title}
    -
    {BLOG.description}
    +
    {BLOG.author}
    +
    {BLOG.bio}
    diff --git a/components/Live2D.js b/components/Live2D.js index eef9f7e2..e6d924ef 100644 --- a/components/Live2D.js +++ b/components/Live2D.js @@ -3,7 +3,11 @@ import BLOG from '@/blog.config' let hasLoad = false export default function Live2D () { - if (BLOG.widget?.showPet && typeof window !== 'undefined' && !hasLoad) { + if (!BLOG.widget?.showPet) { + return <> + } + + if (typeof window !== 'undefined' && !hasLoad) { initLive2D() hasLoad = true } diff --git a/components/Logo.js b/components/Logo.js index 0b98e685..bc8a2104 100644 --- a/components/Logo.js +++ b/components/Logo.js @@ -4,10 +4,10 @@ import React from 'react' const Logo = () => { return -
    - Tangly - 1024 -
    +
    +
    {BLOG.title}
    +
    {BLOG.description}
    +
    } export default Logo diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index 5dc10959..50e93f32 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -20,9 +20,9 @@ const MenuButtonGroup = ({ allowCollapse = false }) => { {links.map(link => { if (link.show) { const selected = (router.pathname === link.to) || (router.asPath === link.to) - return + return + (selected ? 'bg-gray-200 text-black' : ' ')} >
    @@ -30,7 +30,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {     } else { - return <> + return null } })} diff --git a/components/PaginationNumber.js b/components/PaginationNumber.js new file mode 100644 index 00000000..d7f36f59 --- /dev/null +++ b/components/PaginationNumber.js @@ -0,0 +1,95 @@ +import BLOG from '@/blog.config' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons' + +/** + * 数字翻页插件 + * @param page 当前页码 + * @param showNext 是否有下一页 + * @returns {JSX.Element} + * @constructor + */ +const PaginationNumber = ({ page, showNext, totalPage }) => { + const router = useRouter() + const currentPage = +page + const pages = generatePages(page, currentPage, totalPage) + + return ( +
    + + {/* 上一页 */} + + + + + {pages} + + {/* 下一页 */} + + + +
    + ) +} + +function getPageElement (page, currentPage) { + console.log(page, currentPage) + return +
    + {page} +
    + +} +function generatePages (page, currentPage, totalPage) { + const pages = [] + const startPage = 1 // 分组开始页码 + const groupCount = 5 // 页码分组 + if (totalPage <= 10) { + for (let i = 1; i <= totalPage; i++) { + pages.push(getPageElement(i, page)) + } + } else { + pages.push(getPageElement(1, page)) + + let pageLength = 0 + if (groupCount + startPage > totalPage) { + pageLength = totalPage + } else { + pageLength = groupCount + startPage + } + + if (currentPage >= groupCount) { + pages.push(
    ...
    ) + } + + for (let i = startPage; i < pageLength; i++) { + if (i <= totalPage - 1 && i > 1) { + pages.push(getPageElement(i, page)) + } + } + + if (totalPage - startPage >= groupCount + 1) { + pages.push(
    ...
    ) + } + + pages.push(getPageElement(totalPage, page)) + } + return pages +} +export default PaginationNumber diff --git a/components/Pagination.js b/components/PaginationSimple.js similarity index 92% rename from components/Pagination.js rename to components/PaginationSimple.js index 6753987e..5a2b7064 100644 --- a/components/Pagination.js +++ b/components/PaginationSimple.js @@ -4,13 +4,13 @@ import { useRouter } from 'next/router' import { useGlobal } from '@/lib/global' /** - * 翻页插件 + * 简易翻页插件 * @param page 当前页码 * @param showNext 是否有下一页 * @returns {JSX.Element} * @constructor */ -const Pagination = ({ page, showNext }) => { +const PaginationSimple = ({ page, showNext }) => { const { locale } = useGlobal() const router = useRouter() const currentPage = +page @@ -39,4 +39,4 @@ const Pagination = ({ page, showNext }) => { ) } -export default Pagination +export default PaginationSimple diff --git a/components/SearchDrawer.js b/components/SearchDrawer.js index a63d73d8..d21dc3b4 100644 --- a/components/SearchDrawer.js +++ b/components/SearchDrawer.js @@ -21,7 +21,7 @@ const SearchDrawer = ({ cRef }) => { return (
    -
    +
    diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js index a8f84100..9ea4dda0 100644 --- a/components/SideAreaLeft.js +++ b/components/SideAreaLeft.js @@ -7,6 +7,7 @@ import React from 'react' import Analytics from './Analytics' import Tabs from '@/components/Tabs' import BLOG from '@/blog.config' +import Logo from './Logo' /** * 侧边平铺 @@ -26,16 +27,19 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren const postCount = posts?.length || 0 return diff --git a/components/SideBar.js b/components/SideBar.js index bae915c1..03b5b104 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -1,14 +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 SearchInput from '@/components/SearchInput' -import Link from 'next/link' +import InfoCard from '@/components/InfoCard' +import LatestPostsGroup from '@/components/LatestPostsGroup' +import TagGroups from '@/components/TagGroups' import { useGlobal } from '@/lib/global' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import Link from 'next/link' +import React from 'react' +import Logo from './Logo' /** * 侧边栏 @@ -24,30 +23,15 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr */ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => { const { locale } = useGlobal() - return