From 765ba1cb2579275b2eb1204bcad0af8203b09e9b Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 31 Jan 2024 18:45:11 +0800 Subject: [PATCH] =?UTF-8?q?Next=E4=B8=BB=E9=A2=98=20SEO?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Collapse.js | 10 +++-- components/Live2D.js | 4 +- components/ThemeSwitch.js | 6 ++- components/WWAds.js | 6 +-- lib/notion/mapImage.js | 1 - next.config.js | 3 +- themes/next/components/Announcement.js | 6 +-- themes/next/components/ArticleDetail.js | 15 ++++--- themes/next/components/BlogAround.js | 4 +- themes/next/components/BlogPostArchive.js | 2 +- themes/next/components/BlogPostCard.js | 43 +++++++++----------- themes/next/components/BlogPostListPage.js | 4 +- themes/next/components/Card.js | 8 ++-- themes/next/components/CategoryGroup.js | 2 +- themes/next/components/MenuList.js | 8 ++-- themes/next/components/NextRecentComments.js | 2 +- themes/next/components/SearchInput.js | 2 +- themes/next/components/SideAreaRight.js | 4 +- themes/next/components/SideBar.js | 4 +- themes/next/components/TopNav.js | 10 ++--- themes/next/index.js | 33 +++++++-------- 21 files changed, 88 insertions(+), 89 deletions(-) diff --git a/components/Collapse.js b/components/Collapse.js index 4e26f7fd..69ef59eb 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -1,4 +1,4 @@ -import React, { useEffect, useImperativeHandle } from 'react' +import { useEffect, useImperativeHandle, useRef } from 'react' /** * 折叠面板组件，支持水平折叠、垂直折叠 @@ -7,7 +7,7 @@ import React, { useEffect, useImperativeHandle } from 'react' */ const Collapse = props => { const { collapseRef } = props - const ref = React.useRef(null) + const ref = useRef(null) const type = props.type || 'vertical' useImperativeHandle(collapseRef, () => { @@ -17,8 +17,10 @@ const Collapse = props => { * @param {*} param0 */ updateCollapseHeight: ({ height, increase }) => { - ref.current.style.height = ref.current.scrollHeight - ref.current.style.height = 'auto' + if (props.isOpen) { + ref.current.style.height = ref.current.scrollHeight + ref.current.style.height = 'auto' + } } } }) diff --git a/components/Live2D.js b/components/Live2D.js index 4dbbe31a..84afcdff 100644 --- a/components/Live2D.js +++ b/components/Live2D.js @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' -import { loadExternalResource } from '@/lib/utils' +import { isMobile, loadExternalResource } from '@/lib/utils' import { useEffect } from 'react' /** @@ -14,7 +14,7 @@ export default function Live2D() { const petLink = siteConfig('WIDGET_PET_LINK') useEffect(() => { - if (showPet) { + if (showPet && !isMobile()) { Promise.all([ loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js') ]).then((e) => { diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js index 5ec52819..6284e2b6 100644 --- a/components/ThemeSwitch.js +++ b/components/ThemeSwitch.js @@ -47,7 +47,8 @@ const ThemeSwitch = () => {
- {Object.keys(LANGS)?.map(t => { return })} @@ -59,7 +60,8 @@ const ThemeSwitch = () => {
- {THEMES?.map(t => { return })} diff --git a/components/WWAds.js b/components/WWAds.js index d1f786a4..0df9b2c0 100644 --- a/components/WWAds.js +++ b/components/WWAds.js @@ -7,13 +7,13 @@ import { siteConfig } from '@/lib/config' * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null */ export default function WWAds({ orientation = 'vertical', sticky = false, className }) { - const adWWADSId = siteConfig('AD_WWADS_ID') + const AD_WWADS_ID = siteConfig('AD_WWADS_ID') - if (!adWWADSId) { + if (!AD_WWADS_ID) { return null } - return
} diff --git a/lib/notion/mapImage.js b/lib/notion/mapImage.js index c26b1ed4..b0888386 100644 --- a/lib/notion/mapImage.js +++ b/lib/notion/mapImage.js @@ -56,7 +56,6 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => { } } - console.log('block', block) // 统一压缩图片 if (from === 'pageCoverThumbnail' || block.type === 'image' || block.type === 'page') { const width = block?.format?.block_width || 200 diff --git a/next.config.js b/next.config.js index 6266fb48..0ee81606 100644 --- a/next.config.js +++ b/next.config.js @@ -41,7 +41,8 @@ module.exports = withBundleAnalyzer({ 'images.unsplash.com', 'source.unsplash.com', 'p1.qhimg.com', - 'webmention.io' + 'webmention.io', + 'ko-fi.com' ] }, // 默认将feed重定向至 /public/rss/feed.xml diff --git a/themes/next/components/Announcement.js b/themes/next/components/Announcement.js index 4d9afc4a..6e7cfc45 100644 --- a/themes/next/components/Announcement.js +++ b/themes/next/components/Announcement.js @@ -14,11 +14,7 @@ const Announcement = ({ post, className }) => { {locale.COMMON.ANNOUNCEMENT}
- {post && (
+ {post && (
)} diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js index efb20983..fab876bc 100644 --- a/themes/next/components/ArticleDetail.js +++ b/themes/next/components/ArticleDetail.js @@ -26,19 +26,22 @@ export default function ArticleDetail(props) { const url = siteConfig('LINK') + useRouter().asPath const { locale } = useGlobal() const showArticleInfo = siteConfig('NEXT_ARTICLE_INFO', null, CONFIG) + // 动画样式 首屏卡片不用，后面翻出来的加动画 + const aosProps = { + 'data-aos': 'fade-down', + 'data-aos-duration': '400', + 'data-aos-once': 'true', + 'data-aos-anchor-placement': 'top-bottom' + } return (
- {showArticleInfo &&
+ {showArticleInfo &&
{/* 头图 */} {siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
@@ -52,7 +55,7 @@ export default function ArticleDetail(props) {
{/* meta */} -
+
{post?.type !== 'Page' && (<> + className='text-sm py-3 text-gray-500 hover:underline cursor-pointer'> {prev.title} @@ -22,7 +22,7 @@ export default function BlogAround ({ prev, next }) { {next && + className='text-sm flex py-3 text-gray-500 hover:underline cursor-pointer'> {next.title} diff --git a/themes/next/components/BlogPostArchive.js b/themes/next/components/BlogPostArchive.js index c961d7f9..91e98a70 100644 --- a/themes/next/components/BlogPostArchive.js +++ b/themes/next/components/BlogPostArchive.js @@ -27,7 +27,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => { className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500" >
- {post.date?.start_date}{' '} + {post.date?.start_date}{' '}   { +const BlogPostCard = ({ post, index, showSummary }) => { const { locale } = useGlobal() const showPreview = siteConfig('NEXT_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap + // 动画样式 首屏卡片不用，后面翻出来的加动画 + const aosProps = index > 2 + ? { + 'data-aos': 'fade-down', + 'data-aos-duration': '400', + 'data-aos-once': 'true', + 'data-aos-anchor-placement': 'top-bottom' + } + : {} + return (
{ className="flex flex-col-reverse justify-between duration-300" >
+ + {/* 文章标题 */} + className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}> {post.title} -
+
{post.category && ( @@ -63,6 +66,7 @@ const BlogPostCard = ({ post, showSummary }) => { {post.date?.start_date}
+
@@ -73,12 +77,7 @@ const BlogPostCard = ({ post, showSummary }) => {
{(!showPreview || showSummary) && !post.results && ( -

+

{post.summary}

)} @@ -93,11 +92,7 @@ const BlogPostCard = ({ post, showSummary }) => { )} {showPreview && post?.blockMap && ( -
+
)} diff --git a/themes/next/components/BlogPostListPage.js b/themes/next/components/BlogPostListPage.js index fe87ad04..5da3f160 100644 --- a/themes/next/components/BlogPostListPage.js +++ b/themes/next/components/BlogPostListPage.js @@ -21,8 +21,8 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
{/* 文章列表 */}
- {posts?.map(post => ( - + {posts?.map((post, index) => ( + ))}
diff --git a/themes/next/components/Card.js b/themes/next/components/Card.js index de70f580..63163dd0 100644 --- a/themes/next/components/Card.js +++ b/themes/next/components/Card.js @@ -1,11 +1,11 @@ /** * 卡片组件 - * @param {*} param0 - * @returns + * @param {*} param0 + * @returns */ const Card = (props) => { - const { children, headerSlot, className } = props - return
+ const { children, headerSlot, className } = props + return
<>{headerSlot}
{children} diff --git a/themes/next/components/CategoryGroup.js b/themes/next/components/CategoryGroup.js index c00b5d1c..10a55cfd 100644 --- a/themes/next/components/CategoryGroup.js +++ b/themes/next/components/CategoryGroup.js @@ -19,7 +19,7 @@ const CategoryGroup = ({ currentCategory, categories }) => { : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') + ' text-sm w-full items-center duration-300 px-2 cursor-pointer py-1 font-light'}> - {category.name}({category.count}) + {category.name}({category.count}) ); })} diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js index 96d0726e..67250c54 100644 --- a/themes/next/components/MenuList.js +++ b/themes/next/components/MenuList.js @@ -33,19 +33,19 @@ export const MenuList = (props) => { return ( <> {/* 大屏模式菜单 */} - + {/* 移动端菜单 */} - + ) } diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js index 0237b07f..70661948 100644 --- a/themes/next/components/NextRecentComments.js +++ b/themes/next/components/NextRecentComments.js @@ -26,7 +26,7 @@ const NextRecentComments = (props) => { {!onLoading && comments && comments.length === 0 &&
No Comments
} {!onLoading && comments && comments.length > 0 && comments.map((comment) =>
-
--{comment.nick}
+
--{comment.nick}
)} diff --git a/themes/next/components/SearchInput.js b/themes/next/components/SearchInput.js index 1ccf35fc..47902822 100644 --- a/themes/next/components/SearchInput.js +++ b/themes/next/components/SearchInput.js @@ -106,7 +106,7 @@ const SearchInput = ({ currentTag, keyword, cRef }) => { {(showClean &&
- +
)}
diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js index 4a4b30b8..9b72e72d 100644 --- a/themes/next/components/SideAreaRight.js +++ b/themes/next/components/SideAreaRight.js @@ -59,7 +59,7 @@ const SideAreaRight = (props) => { + className='text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'> {locale.COMMON.MORE} @@ -79,7 +79,7 @@ const SideAreaRight = (props) => { + className="text-gray-500 hover:text-black dark:hover:text-white hover:underline cursor-pointer"> {locale.COMMON.MORE}{' '} diff --git a/themes/next/components/SideBar.js b/themes/next/components/SideBar.js index 27fe65b0..d863c74a 100644 --- a/themes/next/components/SideBar.js +++ b/themes/next/components/SideBar.js @@ -35,7 +35,7 @@ const SideBar = (props) => { + className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'> {locale.COMMON.MORE} @@ -53,7 +53,7 @@ const SideBar = (props) => { + className='text-gray-500 hover:text-black dark:hover:text-white hover:underline cursor-pointer'> {locale.COMMON.MORE} diff --git a/themes/next/components/TopNav.js b/themes/next/components/TopNav.js index 23839a84..9cf2a1aa 100644 --- a/themes/next/components/TopNav.js +++ b/themes/next/components/TopNav.js @@ -56,7 +56,7 @@ const TopNav = (props) => { } const { searchModal } = useNextGlobal() - const showSeachModal = () => { + const showSearchModal = () => { if (siteConfig('ALGOLIA_APP_ID')) { searchModal?.current?.openSearch() } else { @@ -73,7 +73,7 @@ const TopNav = (props) => { + className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'> {locale.COMMON.MORE} @@ -90,7 +90,7 @@ const TopNav = (props) => { + className='text-gray-500 hover:text-black dark:hover:text-white hover:underline cursor-pointer'> {locale.COMMON.MORE} @@ -123,8 +123,8 @@ const TopNav = (props) => { {/* 右侧功能 */}
-
- {locale.NAV.SEARCH} +
+
diff --git a/themes/next/index.js b/themes/next/index.js index e311c516..6b6c69b9 100644 --- a/themes/next/index.js +++ b/themes/next/index.js @@ -21,12 +21,13 @@ import { useRouter } from 'next/router' import ArticleDetail from './components/ArticleDetail' import Link from 'next/link' import BlogListBar from './components/BlogListBar' -import { Transition } from '@headlessui/react' import { Style } from './style' import replaceSearchResult from '@/components/Mark' import CommonHead from '@/components/CommonHead' import { siteConfig } from '@/lib/config' import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' +import Announcement from './components/Announcement' +import Card from './components/Card' // 主题全局状态 const ThemeGlobalNext = createContext() @@ -39,7 +40,6 @@ export const useNextGlobal = () => useContext(ThemeGlobalNext) */ const LayoutBase = (props) => { const { children, headerSlot, rightAreaSlot, meta, post } = props - const { onLoading } = useGlobal() const targetRef = useRef(null) const floatButtonGroup = useRef(null) const [showRightFloat, switchShow] = useState(false) @@ -108,19 +108,7 @@ const LayoutBase = (props) => { {/* 中央内容 */}
- - {children} - + {children}
{/* 右侧栏样式 */} @@ -157,7 +145,20 @@ const LayoutBase = (props) => { * @returns */ const LayoutIndex = (props) => { - return + const { notice } = props + return <> + {/* 首页移动端顶部显示公告 */} + + + + + + + {siteConfig('POST_LIST_STYLE') !== 'page' + ? + : + } + } /**