diff --git a/themes/movie/components/ArticleInfo.js b/themes/movie/components/ArticleInfo.js index b502a9c9..782b760b 100644 --- a/themes/movie/components/ArticleInfo.js +++ b/themes/movie/components/ArticleInfo.js @@ -1,51 +1,50 @@ -import Link from 'next/link' import { useGlobal } from '@/lib/global' import { formatDateFmt } from '@/lib/utils/formatDate' +import Link from 'next/link' -export const ArticleInfo = (props) => { +export const ArticleInfo = props => { const { post } = props - const { locale } = useGlobal() + console.log(post) return ( -
-
- {post?.type !== 'Page' && <> - +
+

{post?.title}

- - {post?.category} +
+ + {post?.publishDay} + - - | - } + {post?.type !== 'Page' && ( + <> + + {post?.category} + + + )} - {post?.type !== 'Page' && (<> - - - {post?.publishDay} - - - | - - {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedDay} - - | - - -   - - - )} - -
- -
+
+ {post?.tags?.length > 0 && ( + <> + {locale.COMMON.TAGS} : + + )} + {post?.tags?.map(tag => { + return ( + + {tag} + + ) + })} +
+
+
) } diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js index 925156bf..648f2ee2 100644 --- a/themes/movie/components/BlogListPage.js +++ b/themes/movie/components/BlogListPage.js @@ -4,7 +4,9 @@ import BlogPostCard from './BlogPostCard' import PaginationNumber from './PaginationNumber' export const BlogListPage = props => { - const { posts } = props + const { page = 1, posts, postCount } = props + const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE'))) + const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG) return ( @@ -17,7 +19,7 @@ export const BlogListPage = props => { ))} - + ) } diff --git a/themes/movie/components/BlogListScroll.js b/themes/movie/components/BlogListScroll.js index e876f312..597ba7dc 100644 --- a/themes/movie/components/BlogListScroll.js +++ b/themes/movie/components/BlogListScroll.js @@ -1,9 +1,9 @@ import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' -import { useCallback, useEffect, useRef, useState } from 'react' import throttle from 'lodash.throttle' -import BlogPostCard from './BlogPostCard' +import { useCallback, useEffect, useRef, useState } from 'react' import CONFIG from '../config' +import BlogPostCard from './BlogPostCard' export const BlogListScroll = props => { const { posts } = props @@ -12,9 +12,7 @@ export const BlogListScroll = props => { const [page, updatePage] = useState(1) let hasMore = false - const postsToShow = posts - ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) - : [] + const postsToShow = posts ? Object.assign(posts).slice(0, parseInt(siteConfig('POSTS_PER_PAGE')) * page) : [] if (posts) { const totalCount = posts.length @@ -28,14 +26,16 @@ export const BlogListScroll = props => { const targetRef = useRef(null) // 监听滚动自动分页加载 - const scrollTrigger = useCallback(throttle(() => { - const scrollS = window.scrollY + window.outerHeight - const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 - if (scrollS > clientHeight + 100) { - handleGetMore() - } - }, 500)) - const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) + const scrollTrigger = useCallback( + throttle(() => { + const scrollS = window.scrollY + window.outerHeight + const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0 + if (scrollS > clientHeight + 100) { + handleGetMore() + } + }, 500) + ) + const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG) useEffect(() => { window.addEventListener('scroll', scrollTrigger) @@ -46,21 +46,15 @@ export const BlogListScroll = props => { }) return ( +
+ {postsToShow?.map(post => ( + + ))} -
- - {postsToShow?.map(post => ( - - ))} - -
- {' '} - {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} -
- -
+
+ {' '} + {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '} +
+
) } diff --git a/themes/movie/components/BlogPostCard.js b/themes/movie/components/BlogPostCard.js index 6aa84072..eadcfb7c 100644 --- a/themes/movie/components/BlogPostCard.js +++ b/themes/movie/components/BlogPostCard.js @@ -14,7 +14,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}` return ( -
+
{/* 固定高度 ,空白用图片拉升填充 */}
@@ -44,6 +44,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => { {post.title} +

+ {post?.summary} +

+
diff --git a/themes/movie/components/PaginationNumber.js b/themes/movie/components/PaginationNumber.js index 54c1bf34..effc1835 100644 --- a/themes/movie/components/PaginationNumber.js +++ b/themes/movie/components/PaginationNumber.js @@ -13,6 +13,7 @@ import { useState } from 'react' */ const PaginationNumber = ({ page, totalPage }) => { const router = useRouter() + const [value, setValue] = useState('') const { locale } = useGlobal() const currentPage = +page const showNext = page < totalPage @@ -22,8 +23,9 @@ const PaginationNumber = ({ page, totalPage }) => { .replace(/\/page\/[1-9]\d*/, '') .replace(/\/$/, '') const pages = generatePages(pagePrefix, page, currentPage, totalPage) - - const [value, setValue] = useState('') + if (pages?.length <= 1) { + return <> + } const handleInputChange = event => { const newValue = event.target.value.replace(/[^0-9]/g, '') diff --git a/themes/movie/components/SlotBar.js b/themes/movie/components/SlotBar.js new file mode 100644 index 00000000..e3bed727 --- /dev/null +++ b/themes/movie/components/SlotBar.js @@ -0,0 +1,34 @@ +import { useGlobal } from '@/lib/global' + +/** + * 博客列表上方嵌入条 + * @param {*} props + * @returns + */ +export default function SlotBar(props) { + const { tag, category } = props + const { locale } = useGlobal() + + if (tag) { + return ( +
+
+
+ {locale.COMMON.TAGS} : {tag}{' '} +
+
+
+
+ ) + } else if (category) { + return ( +
+
+ {locale.COMMON.CATEGORY} : {category} +
+
+
+ ) + } + return <> +} diff --git a/themes/movie/index.js b/themes/movie/index.js index e34f0e83..4b114d37 100644 --- a/themes/movie/index.js +++ b/themes/movie/index.js @@ -7,6 +7,7 @@ import NotionPage from '@/components/NotionPage' import ShareBar from '@/components/ShareBar' import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' +import { loadWowJS } from '@/lib/plugins/wow' import { isBrowser } from '@/lib/utils' import { Transition } from '@headlessui/react' import { useRouter } from 'next/router' @@ -23,6 +24,7 @@ import { Footer } from './components/Footer' import { Header } from './components/Header' import JumpToTopButton from './components/JumpToTopButton' import LatestPostsGroup from './components/LatestPostsGroup' +import SlotBar from './components/SlotBar' import TagGroups from './components/TagGroups' import TagItem from './components/TagItem' import CONFIG from './config' @@ -46,6 +48,9 @@ const LayoutBase = props => { const searchModal = useRef(null) const [expandMenu, updateExpandMenu] = useState(false) + useEffect(() => { + loadWowJS() + }, []) return ( @@ -118,7 +123,12 @@ const LayoutIndex = props => { * @returns */ const LayoutPostList = props => { - return <>{siteConfig('POST_LIST_STYLE') === 'page' ? : } + return ( + <> + + {siteConfig('POST_LIST_STYLE') === 'page' ? : } + + ) } /** @@ -149,18 +159,20 @@ const LayoutSlug = props => { }, [post]) return ( <> - {!lock - ? ( + {!lock ? (
+ {/* 标题 */} + {/* 页面元素 */} + {/* 分享栏目 */} + {/* 评论区 */}
- ) - : ( + ) : ( - )} + )} ) }