Skip to content

Commit

Permalink
theme-movie
Browse files Browse the repository at this point in the history
  • Loading branch information
tangly1024 committed Mar 17, 2024
1 parent 8c8abd7 commit f4bc1e4
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 16 deletions.
1 change: 0 additions & 1 deletion themes/movie/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ const CONFIG = {

MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
MOVIE_VIDEO_COMBINE: true, // 聚合视频,开启后一篇文章内的多个含caption的视频会被合并到文章开头,并展示分集按钮
MOVIE_VIDEO_COMBINE_AUTO: true, //没有caption的视频也加入聚合,并且自动编号
MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE: false, // 即使只有一集也显示集数切换按钮

MOVIE_POST_LIST_COVER: true // 列表显示文章封面
Expand Down
32 changes: 17 additions & 15 deletions themes/movie/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const LayoutBase = props => {
'relative mx-auto justify-center md:flex items-start py-8 px-2'
}>
{/* 内容 */}
<div className={`w-full ${fullWidth ? '' : ''} px-4 max-w-[90rem] mx-auto`}>
<div className={`w-full ${fullWidth ? '' : ''} px-4`}>
<Transition
show={!onLoading}
appear={true}
Expand Down Expand Up @@ -125,10 +125,10 @@ const LayoutIndex = props => {
*/
const LayoutPostList = props => {
return (
<>
<div className='max-w-[90rem] mx-auto'>
<SlotBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</>
</div>
)
}

Expand All @@ -155,15 +155,15 @@ const LayoutSlug = props => {
const exists = document.querySelectorAll('.video-wrapper')
if (exists && exists.length > 0) return

// 创建一个新的容器元素
// 创建视频区块容器元素
const videoWrapper = document.createElement('div')
videoWrapper.className = 'video-wrapper py-1 px-3 bg-gray-100 dark:bg-white dark:text-black mx-auto'

// 创建一个新的容器元素
// 创建走马灯封装容器元素
const carouselWrapper = document.createElement('div')
carouselWrapper.classList.add('notion-carousel-wrapper')

// 创建一个用于保存 figcaption 文本内容的数组
// 创建分集按钮figcaption文本的数组
const figCaptionValues = []

// 遍历所有 .notion-asset-wrapper 元素
Expand All @@ -178,7 +178,7 @@ const LayoutSlug = props => {
)
return

if (!figCaption && siteConfig('MOVIE_VIDEO_COMBINE_AUTO', false, CONFIG)) return // 如果没有子元素 figcaption,则不处理该元素
if (!figCaption) return // 如果没有子元素 figcaption,则不处理该元素

// 获取 figcaption 的文本内容并添加到数组中
const figCaptionValue = figCaption ? figCaption?.textContent?.trim() : `P-${index}`
Expand Down Expand Up @@ -224,14 +224,16 @@ const LayoutSlug = props => {
figCaptionWrapper.appendChild(div)
})

// 将包含 figcaption 值的容器元素添加到 notion-article 的第一个子元素插入
videoWrapper.appendChild(carouselWrapper)
// 显示分集按钮 ,caption的视频数量大于1个
if (figCaptionValues.length > 1 || siteConfig('MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE', false, CONFIG)) {
videoWrapper.appendChild(figCaptionWrapper)
if (carouselWrapper.children.length > 0) {
// 将包含 figcaption 值的容器元素添加到 notion-article 的第一个子元素插入
videoWrapper.appendChild(carouselWrapper)
// 显示分集按钮 大于1集才显示 ;或者用户 要求强制显示
if (figCaptionWrapper.children.length > 1 || siteConfig('MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE', false, CONFIG)) {
videoWrapper.appendChild(figCaptionWrapper)
}
// 放入页面
notionArticle.insertBefore(videoWrapper, notionArticle.firstChild)
}

notionArticle.insertBefore(videoWrapper, notionArticle.firstChild)
}

setTimeout(() => {
Expand Down Expand Up @@ -268,7 +270,7 @@ const LayoutSlug = props => {
return (
<>
{!lock ? (
<div id='article-wrapper' className='px-2 max-w-6xl mx-auto'>
<div id='article-wrapper' className='px-2 max-w-5xl 2xl:max-w-[70%] mx-auto'>
{/* 标题 */}
<ArticleInfo post={post} />
{/* 页面元素 */}
Expand Down
5 changes: 5 additions & 0 deletions themes/movie/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ const Style = () => {
.notion-carousel-route div:hover {
text-decoration: underline;
}
.notion-carousel div {
height: auto !important;
aspect-ratio: 2/1 !important;
}
`}</style>
)
}
Expand Down

0 comments on commit f4bc1e4

Please sign in to comment.