diff --git a/themes/movie/components/ArticleInfo.js b/themes/movie/components/ArticleInfo.js index 782b760b..9997579a 100644 --- a/themes/movie/components/ArticleInfo.js +++ b/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 ( -
+

{post?.title}

@@ -21,10 +20,7 @@ export const ArticleInfo = props => { {post?.type !== 'Page' && ( <> - + {post?.category} diff --git a/themes/movie/components/BlogRecommend.js b/themes/movie/components/BlogRecommend.js new file mode 100644 index 00000000..c1b857f3 --- /dev/null +++ b/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 ( +
+
+
+ + {locale.COMMON.RELATE_POSTS} +
+
+
+ {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 ( + +
+
+
{post.title}
+
+ {/* 卡片的阴影遮罩，为了凸显图片上的文字 */} +
+
+
+ + +
+ + ) + })} +
+
+ ) +} diff --git a/themes/movie/config.js b/themes/movie/config.js index 48403075..ad775bbd 100644 --- a/themes/movie/config.js +++ b/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 diff --git a/themes/movie/index.js b/themes/movie/index.js index 4b114d37..e31e6a36 100644 --- a/themes/movie/index.js +++ b/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 => { {/* 页面元素 */} + {/* 推荐 */} + {/* 分享栏目 */} {/* 评论区 */} diff --git a/themes/movie/style.js b/themes/movie/style.js index 7aee6f73..04fa9e3a 100644 --- a/themes/movie/style.js +++ b/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; + } `} ) }