视频聚合轮播特效

themes/movie/components/ArticleInfo.js

@@ -5,10 +5,9 @@ import Link from 'next/link'
 export const ArticleInfo = props => {
   const { post } = props
   const { locale } = useGlobal()
-  console.log(post)
 
   return (
-    <section className='w-full mx-auto'>
+    <section className='w-full mx-auto mb-4'>
       <h2 className='text-5xl font-semibold py-10 dark:text-white text-center'>{post?.title}</h2>
 
       <div className='flex gap-3 font-semibold text-sm items-center justify-center'>
@@ -21,10 +20,7 @@ export const ArticleInfo = props => {
 
         {post?.type !== 'Page' && (
           <>
-            <Link
-              href={`/category/${post?.category}`}
-              passHref
-              className='cursor-pointer text-md mr-2 hover:text-black dark:text-green-500'>
+            <Link href={`/category/${post?.category}`} passHref className='cursor-pointer text-md mr-2 text-green-500'>
               {post?.category}
             </Link>
           </>

themes/movie/components/BlogRecommend.js

@@ -0,0 +1,62 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import Link from 'next/link'
+import CONFIG from '../config'
+
+/**
+ * 关联推荐文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function BlogRecommend(props) {
+  const { recommendPosts, siteInfo } = props
+  const { locale } = useGlobal()
+  if (!siteConfig('MOVIE_ARTICLE_RECOMMEND', null, CONFIG) || !recommendPosts || recommendPosts.length === 0) {
+    return <></>
+  }
+
+  return (
+    <div className='py-8'>
+      <div className=' mb-2 px-1 flex flex-nowrap justify-between'>
+        <div className='dark:text-gray-300'>
+          <i className='mr-2 fas fa-thumbs-up' />
+          {locale.COMMON.RELATE_POSTS}
+        </div>
+      </div>
+      <div className='flex flex-nowrap gap-4'>
+        {recommendPosts.map(post => {
+          const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+          const url = checkContainHttp(post.slug)
+            ? sliceUrlFromHttp(post.slug)
+            : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+          return (
+            <Link
+              key={post.id}
+              title={post.title}
+              href={url}
+              passHref
+              className='flex rounded-lg h-72 w-52 cursor-pointer overflow-hidden'>
+              <div className='h-full w-full relative group shadow-movie'>
+                <div className='absolute bottom-4 w-full z-20 duration-300 '>
+                  <div className='z-10 text-lg px-4 font-bold text-white shadow-text select-none'>{post.title}</div>
+                </div>
+                {/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
+                <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>
+
+                <LazyImage
+                  src={headerImage}
+                  className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200'
+                />
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

themes/movie/config.js

@@ -8,7 +8,8 @@ const CONFIG = {
   MOVIE_MENU_ARCHIVE: true, // 显示归档
   MOVIE_MENU_SEARCH: true, // 显示搜索
 
-  MOVIE_POST_LIST_COVER: true // 列表显示文章封面
+  MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
 
+  MOVIE_POST_LIST_COVER: true // 列表显示文章封面
 }
 export default CONFIG

themes/movie/index.js

@@ -18,6 +18,7 @@ import { ArticleLock } from './components/ArticleLock'
 import BlogListGroupByDate from './components/BlogListGroupByDate'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
+import BlogRecommend from './components/BlogRecommend'
 import CategoryGroup from './components/CategoryGroup'
 import CategoryItem from './components/CategoryItem'
 import { Footer } from './components/Footer'
@@ -140,6 +141,73 @@ const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
   useEffect(() => {
+    // 用js 实现将页面中的多个视频聚合为一个分集的视频
+    function combineVideo() {
+      // 找到 id 为 notion-article 的元素
+      const notionArticle = document.getElementById('notion-article')
+      if (!notionArticle) return // 如果找不到对应的元素，则退出函数
+
+      // 找到所有的 .notion-asset-wrapper 元素
+      const assetWrappers = document.querySelectorAll('.notion-asset-wrapper')
+
+      // 创建一个新的容器元素
+      const carouselWrapper = document.createElement('div')
+      carouselWrapper.classList.add('notion-carousel-wrapper')
+
+      // 创建一个用于保存 figcaption 文本内容的数组
+      const figCaptionValues = []
+
+      // 遍历所有 .notion-asset-wrapper 元素
+      assetWrappers.forEach((wrapper, index) => {
+        // 检查 .notion-asset-wrapper 元素是否有子元素 figcaption
+        const figCaption = wrapper.querySelector('figcaption')
+        if (!figCaption) return // 如果没有子元素 figcaption，则不处理该元素
+
+        // 检查 .notion-asset-wrapper 元素是否有 notion-asset-wrapper-video 或 notion-asset-wrapper-embed 类
+        if (
+          !wrapper.classList.contains('notion-asset-wrapper-video') &&
+          !wrapper.classList.contains('notion-asset-wrapper-embed')
+        )
+          return
+
+        // 获取 figcaption 的文本内容并添加到数组中
+        figCaptionValues.push(figCaption.textContent.trim())
+
+        // 创建一个新的 div 元素用于包裹当前的 .notion-asset-wrapper 元素
+        const carouselItem = document.createElement('div')
+        carouselItem.classList.add('notion-carousel')
+        carouselItem.appendChild(wrapper.cloneNode(true))
+
+        // 如果是第一个元素，设置为 active
+        if (index === 0) {
+          carouselItem.classList.add('active')
+        }
+
+        // 将新创建的元素添加到容器中
+        carouselWrapper.appendChild(carouselItem)
+
+        // 从 DOM 中移除原始的 .notion-asset-wrapper 元素
+        wrapper.parentNode.removeChild(wrapper)
+      })
+
+      // 创建一个用于保存 figcaption 值的容器元素
+      const figCaptionWrapper = document.createElement('div')
+      figCaptionWrapper.classList.add('notion-carousel-route')
+
+      // 遍历 figCaptionValues 数组，并将每个值添加到容器元素中
+      figCaptionValues.forEach(value => {
+        const div = document.createElement('div')
+        div.textContent = value
+        figCaptionWrapper.appendChild(div)
+      })
+
+      // 将包含 figcaption 值的容器元素添加到 notion-article  的第一个子元素插入
+      notionArticle.insertBefore(figCaptionWrapper, notionArticle.firstChild)
+      // 将新创建的容器元素作为 notion-article 的第一个子元素插入
+      notionArticle.insertBefore(carouselWrapper, notionArticle.firstChild)
+    }
+
+    combineVideo()
     // 404
     if (!post) {
       setTimeout(
@@ -165,6 +233,8 @@ const LayoutSlug = props => {
           <ArticleInfo post={post} />
           {/* 页面元素 */}
           <NotionPage post={post} />
+          {/* 推荐 */}
+          <BlogRecommend {...props} />
           {/* 分享栏目 */}
           <ShareBar post={post} />
           {/* 评论区 */}

themes/movie/style.js

@@ -17,6 +17,20 @@ const Style = () => {
           0 26px 58px 0 rgba(0, 0, 0, 0.22),
           0 5px 14px 0 rgba(0, 0, 0, 0.18);
       }
+
+      // 视频聚合走马灯
+      .notion-carousel {
+        width: 100%; /* 根据需要调整 */
+        overflow: hidden;
+      }
+
+      .notion-carousel-wrapper .notion-carousel {
+        display: none;
+      }
+
+      .notion-carousel-wrapper .notion-carousel.active {
+        display: block;
+      }
     `}</style>
   )
 }