movie 详情页

2026-05-14 15:09:22 +00:00 · 2024-03-15 18:01:59 +08:00
parent 999f116fc3
commit 35415f1007
7 changed files with 125 additions and 78 deletions
--- 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 (
-      <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
-            <div>
-                {post?.type !== 'Page' && <>
-                    <Link
-                        href={`/category/${post?.category}`}
-                        passHref
-                        className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
+    <section className='w-full mx-auto'>
+      <h2 className='text-5xl font-semibold py-10 dark:text-white text-center'>{post?.title}</h2>

-                        <i className="mr-1 fas fa-folder-open" />
-                        {post?.category}
+      <div className='flex gap-3 font-semibold text-sm items-center justify-center'>
+        <Link
+          href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+          passHref
+          className='pl-1 mr-2 cursor-pointer'>
+          {post?.publishDay}
+        </Link>

-                    </Link>
-                    <span className='mr-2'>|</span>
-                </>}
+        {post?.type !== 'Page' && (
+          <>
+            <Link
+              href={`/category/${post?.category}`}
+              passHref
+              className='cursor-pointer text-md mr-2 hover:text-black dark:text-green-500'>
+              {post?.category}
+            </Link>
+          </>
+        )}

-                {post?.type !== 'Page' && (<>
-                    <Link
-                        href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                        passHref
-                        className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-
-                        {post?.publishDay}
-
-                    </Link>
-                    <span className='mr-2'>|</span>
-                    <span className='mx-2 text-gray-400 dark:text-gray-500'>
-                        {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedDay}
-                    </span>
-                    <span className='mr-2'>|</span>
-                    <span className="hidden busuanzi_container_page_pv font-light mr-2">
-                    <i className='mr-1 fas fa-eye' />
-                    &nbsp;
-                    <span className="mr-2 busuanzi_value_page_pv" />
-                </span>
-                </>)}
-
-            </div>
-
-        </section>
+        <div className='flex py-1 space-x-3'>
+          {post?.tags?.length > 0 && (
+            <>
+              {locale.COMMON.TAGS} <span>:</span>
+            </>
+          )}
+          {post?.tags?.map(tag => {
+            return (
+              <Link href={`/tag/${tag}`} key={tag} className='text-yellow-500 mr-2'>
+                {tag}
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </section>
  )
 }
--- 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 => {
        ))}
      </div>

-      <PaginationNumber {...props} />
+      <PaginationNumber page={page} totalPage={totalPage} />
    </div>
  )
 }
--- 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 (
+    <div id='posts-wrapper' className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`} ref={targetRef}>
+      {postsToShow?.map(post => (
+        <BlogPostCard key={post.id} post={post} />
+      ))}

-        <div id='posts-wrapper' className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`} ref={targetRef}>
-
-            {postsToShow?.map(post => (
-                <BlogPostCard key={post.id} post={post} />
-            ))}
-
-            <div
-                onClick={handleGetMore}
-                className="w-full my-4 py-4 text-center cursor-pointer "
-            >
-                {' '}
-                {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
-            </div>
-
-        </div>
+      <div onClick={handleGetMore} className='w-full my-4 py-4 text-center cursor-pointer '>
+        {' '}
+        {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+      </div>
+    </div>
  )
 }
--- 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 (
-    <article className='w-full mb-4 cursor-pointer overflow-hidden shadow-movie dark:bg-hexo-black-gray'>
+    <article data-wow-delay=".2s" className='wow fadeInUp w-full mb-4 cursor-pointer overflow-hidden shadow-movie dark:bg-hexo-black-gray'>
      <Link href={url} passHref legacyBehavior>
        {/* 固定高度 ，空白用图片拉升填充 */}
        <div className='group flex flex-col aspect-[2/3] justify-between relative'>
@@ -44,6 +44,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
            {post.title}
          </h2>

+          <p className='absolute bottom-3 z-20 line-clamp-1 text-xs mx-6'>
+            {post?.summary}
+          </p>
+
          <div className='h-3/4 w-full absolute left-0 bottom-0 z-10'>
            <div className='h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black'></div>
          </div>
--- 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, '')
--- a/themes/movie/components/SlotBar.js
+++ 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 (
+      <div className='cursor-pointer px-3 py-2 mb-2 '>
+        <div className={'inline-block rounded duration-200 mr-2  px-1 text-xl whitespace-nowrap '}>
+          <div className=' dark:text-white dark:hover:text-white text-5xl py-5'>
+            {locale.COMMON.TAGS} : {tag}{' '}
+          </div>
+        </div>
+        <hr className='dark:border-gray-600' />
+      </div>
+    )
+  } else if (category) {
+    return (
+      <div className='cursor-pointer px-3 py-2 mb-2 '>
+        <div className=' dark:text-white dark:hover:text-white text-5xl py-5'>
+          {locale.COMMON.CATEGORY} : {category}
+        </div>
+        <hr className='dark:border-gray-600' />
+      </div>
+    )
+  }
+  return <></>
+}
--- 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 (
    <ThemeGlobalMovie.Provider value={{ searchModal, expandMenu, updateExpandMenu, collapseRef }}>
@@ -118,7 +123,12 @@ const LayoutIndex = props => {
 * @returns
 */
 const LayoutPostList = props => {
-  return <>{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}</>
+  return (
+    <>
+      <SlotBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+    </>
+  )
 }

 /**
@@ -149,18 +159,20 @@ const LayoutSlug = props => {
  }, [post])
  return (
    <>
-      {!lock
-        ? (
+      {!lock ? (
        <div id='article-wrapper' className='px-2'>
+          {/* 标题 */}
          <ArticleInfo post={post} />
+          {/* 页面元素 */}
          <NotionPage post={post} />
+          {/* 分享栏目 */}
          <ShareBar post={post} />
+          {/* 评论区 */}
          <Comment frontMatter={post} />
        </div>
-          )
-        : (
+      ) : (
        <ArticleLock validPassword={validPassword} />
-          )}
+      )}
    </>
  )
 }