Skip to content

Commit

Permalink
Merge pull request tangly1024#2903 from tangly1024/feat/theme-movie-b…
Browse files Browse the repository at this point in the history
…ackground-image

Feat/theme movie background image
  • Loading branch information
tangly1024 authored Oct 30, 2024
2 parents f4f0acd + 0269790 commit 176b66e
Show file tree
Hide file tree
Showing 16 changed files with 137 additions and 70 deletions.
2 changes: 1 addition & 1 deletion components/DarkModeButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const DarkModeButton = props => {

return (
<div
onClick={toggleDarkMode}
className={`${className || ''} flex justify-center dark:text-gray-200 text-gray-800`}>
<div
onClick={toggleDarkMode}
id='darkModeButton'
className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'>
{' '}
Expand Down
2 changes: 1 addition & 1 deletion themes/example/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const Header = props => {
<div className='mx-auto max-w-4xl md:flex justify-between items-center'>
<Link
href='/'
className='py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
className='logo py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
{siteConfig('TITLE')}
</Link>
<div className='w-full md:w-auto text-center md:text-right'>
Expand Down
18 changes: 9 additions & 9 deletions themes/fukasawa/components/Logo.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import Link from 'next/link'
import { siteConfig } from '@/lib/config'
import Link from 'next/link'

const Logo = props => {
return (
<section className='flex'>
<Link
href='/'
className='hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer dark:text-gray-300 dark:border-gray-300 font-black'>
{siteConfig('TITLE')}
</Link>
</section>
);
<section className='flex'>
<Link
href='/'
className='logo hover:bg-black hover:text-white border-black border-2 duration-500 px-4 py-2 cursor-pointer dark:text-gray-300 dark:border-gray-300 font-black'>
{siteConfig('TITLE')}
</Link>
</section>
)
}

export default Logo
2 changes: 1 addition & 1 deletion themes/heo/components/Logo.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Logo = props => {
className='mr-4 hidden md:block'
/>
<div id='logo-text' className='group rounded-2xl flex-none relative'>
<div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
<div className='logo group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
{siteConfig('TITLE')}
</div>
<div className='flex justify-center rounded-2xl group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-0 py-1 duration-200'>
Expand Down
2 changes: 1 addition & 1 deletion themes/magzine/components/LogoBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function LogoBar(props) {
<div id='top-wrapper' className='w-full flex items-center '>
<Link
href='/'
className='flex text-md font-semibold md:text-xl hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
className='logo flex text-md font-semibold md:text-xl hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
{/* <LazyImage
src={siteInfo?.icon}
width={24}
Expand Down
12 changes: 6 additions & 6 deletions themes/medium/components/LogoBar.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import Link from 'next/link'
import { siteConfig } from '@/lib/config'
import Link from 'next/link'

export default function LogoBar (props) {
export default function LogoBar(props) {
return (
<div id='top-wrapper' className='w-full flex items-center '>
<Link href='/' className='text-md md:text-xl dark:text-gray-200'>
{siteConfig('TITLE')}
</Link>
<Link href='/' className='logo text-md md:text-xl dark:text-gray-200'>
{siteConfig('TITLE')}
</Link>
</div>
);
)
}
5 changes: 4 additions & 1 deletion themes/movie/components/BlogListPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@ export const BlogListPage = props => {
const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)

const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
if (!posts || posts.length === 0) {
return null
}

return (
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} py-6`}>
<div
id='posts-wrapper'
className='grid md:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-20 xl:gap-24 2xl:grid-cols-4'>
Expand Down
6 changes: 5 additions & 1 deletion themes/movie/components/Footer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import DarkModeButton from '@/components/DarkModeButton'
import { GongAnBeiAn } from '@/components/GongAnBeiAn'
import { siteConfig } from '@/lib/config'

/**
* 页脚
* @param {*} props
* @returns
*/
export const Footer = props => {
const d = new Date()
const currentYear = d.getFullYear()
Expand Down
18 changes: 11 additions & 7 deletions themes/movie/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,15 @@ export const Header = props => {

return (
<>
<header className='w-full px-8 relative z-20 flex lg:flex-row md:flex-col justify-between items-center'>
<header className='w-full px-8 h-20 z-20 flex lg:flex-row md:flex-col justify-between items-center'>
{/* 左侧Logo */}
<Link
href='/'
className='whitespace-nowrap py-6 text-2xl md:text-3xl font-bold text-gray-dark no-underline flex items-center'>
className='logo whitespace-nowrap text-2xl md:text-3xl font-bold text-gray-dark no-underline flex items-center'>
{siteConfig('TITLE')}
</Link>

<div className='md:w-auto text-center flex'>
<div className='md:w-auto text-center flex space-x-2'>
{/* 右侧菜单 */}
<>
<nav
Expand All @@ -123,6 +124,7 @@ export const Header = props => {
className='flex items-center cursor-pointer'>
<i className='fas fa-search dark:text-white'></i>
</div>

<div
className={`${showSearch ? 'top-16 visible opacity-100' : 'top-10 invisible opacity-0'} duration-200 transition-all max-w-md absolute w-80 right-4 p-2 flex flex-col gap-2`}>
<input
Expand Down Expand Up @@ -158,11 +160,13 @@ export const Header = props => {
</div>
</header>

<Collapse collapseRef={collapseRef} type='vertical' isOpen={isOpen}>
<Collapse
className='block md:hidden'
collapseRef={collapseRef}
type='vertical'
isOpen={isOpen}>
{/* 移动端菜单 */}
<menu
id='nav-menu-mobile'
className='block md:hidden my-auto justify-start'>
<menu id='nav-menu-mobile' className='my-auto justify-start'>
{links?.map(
(link, index) =>
link &&
Expand Down
21 changes: 21 additions & 0 deletions themes/movie/components/HomeBackgroundImage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
/**
* 封面图
* @param {*} props
* @returns
*/
export const HomeBackgroundImage = props => {
const { siteInfo } = useGlobal()
const background = siteConfig('MOVIE_HOME_BACKGROUND')
if (!background) {
return null
}
return (
<LazyImage
className='-mt-20 w-screen h-screen pointer-events-none select-none object-cover'
src={siteInfo?.pageCover}
/>
)
}
4 changes: 2 additions & 2 deletions themes/movie/components/MenuItemDrop.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ export const MenuItemDrop = ({ link }) => {
<Link
href={link?.href}
target={link?.target}
className='select-none menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
className='select-none menu-link pl-2 pr-4 no-underline tracking-widest pb-1 hover:font-bold'>
{link?.icon && <i className={link?.icon} />} {link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
</Link>
)}

{hasSubMenu && (
<>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1 hover:font-bold'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
Expand Down
1 change: 1 addition & 0 deletions themes/movie/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const CONFIG = {
MOVIE_MENU_TAG: true, // 显示标签
MOVIE_MENU_ARCHIVE: true, // 显示归档
MOVIE_MENU_SEARCH: true, // 显示搜索
MOVIE_HOME_BACKGROUND: false, // 首页是否显示背景图, 默认关闭

MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
MOVIE_VIDEO_COMBINE: true, // 聚合视频,开启后一篇文章内的多个含caption的视频会被合并到文章开头,并展示分集按钮
Expand Down
66 changes: 44 additions & 22 deletions themes/movie/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
import Comment from '@/components/Comment'
import { AdSlot } from '@/components/GoogleAdsense'
import replaceSearchResult from '@/components/Mark'
import NotionPage from '@/components/NotionPage'
import ShareBar from '@/components/ShareBar'
Expand All @@ -24,6 +23,7 @@ import CategoryGroup from './components/CategoryGroup'
import CategoryItem from './components/CategoryItem'
import { Footer } from './components/Footer'
import { Header } from './components/Header'
import { HomeBackgroundImage } from './components/HomeBackgroundImage'
import JumpToTopButton from './components/JumpToTopButton'
import LatestPostsGroup from './components/LatestPostsGroup'
import SlotBar from './components/SlotBar'
Expand All @@ -47,41 +47,43 @@ const LayoutBase = props => {
const { children, slotTop } = props
const { onLoading, fullWidth } = useGlobal()
const collapseRef = useRef(null)

const router = useRouter()
const searchModal = useRef(null)
const [expandMenu, updateExpandMenu] = useState(false)
useEffect(() => {
loadWowJS()
}, [])

// 首页背景图
const headerSlot =
router.route === '/' &&
siteConfig('MOVIE_HOME_BACKGROUND', null, CONFIG) ? (
<HomeBackgroundImage />
) : null

return (
<ThemeGlobalMovie.Provider value={{ searchModal, expandMenu, updateExpandMenu, collapseRef }}>
<ThemeGlobalMovie.Provider
value={{ searchModal, expandMenu, updateExpandMenu, collapseRef }}>
<div
id='theme-movie'
className={`${siteConfig('FONT_STYLE')} dark:text-gray-300 duration-300 transition-all bg-white dark:bg-[#2A2A2A] scroll-smooth min-h-screen flex flex-col justify-between`}>
<Style />

{/* 页头 */}
<Header {...props} />
{headerSlot}

{/* 主体 */}
<div id='container-inner' className='w-full relative flex-grow z-10'>
{/* 标题栏 */}
{/* {fullWidth ? null : <Title {...props} />} */}

{/* 广告栏 */}
<div className='w-full text-center'>
<AdSlot />
</div>

<div
id='container-wrapper'
className={
(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') +
'relative mx-auto justify-center md:flex items-start py-8 px-2'
(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
? 'flex-row-reverse'
: '') + 'relative mx-auto justify-center md:flex items-start'
}>
{/* 内容 */}
<div className={`w-full ${fullWidth ? '' : ''} px-4`}>
<div className={`w-full ${fullWidth ? '' : ''} px-6`}>
<Transition
show={!onLoading}
appear={true}
Expand Down Expand Up @@ -133,7 +135,11 @@ const LayoutPostList = props => {
return (
<div className='max-w-[90rem] mx-auto'>
<SlotBar {...props} />
{siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
{siteConfig('POST_LIST_STYLE') === 'page' ? (
<BlogListPage {...props} />
) : (
<BlogListScroll {...props} />
)}
</div>
)
}
Expand Down Expand Up @@ -163,7 +169,8 @@ const LayoutSlug = props => {

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

// 创建走马灯封装容器元素
const carouselWrapper = document.createElement('div')
Expand All @@ -187,7 +194,9 @@ const LayoutSlug = props => {
if (!figCaption) return // 如果没有子元素 figcaption,则不处理该元素

// 获取 figcaption 的文本内容并添加到数组中
const figCaptionValue = figCaption ? figCaption?.textContent?.trim() : `P-${index}`
const figCaptionValue = figCaption
? figCaption?.textContent?.trim()
: `P-${index}`
figCaptionValues.push(figCaptionValue)

// 创建一个新的 div 元素用于包裹当前的 .notion-asset-wrapper 元素
Expand Down Expand Up @@ -216,7 +225,8 @@ const LayoutSlug = props => {

// 创建一个用于保存 figcaption 值的容器元素
const figCaptionWrapper = document.createElement('div')
figCaptionWrapper.className = 'notion-carousel-route py-2 max-h-36 overflow-y-auto'
figCaptionWrapper.className =
'notion-carousel-route py-2 max-h-36 overflow-y-auto'

// 遍历 figCaptionValues 数组,并将每个值添加到容器元素中
figCaptionValues.forEach(value => {
Expand Down Expand Up @@ -254,11 +264,17 @@ const LayoutSlug = props => {
// 将包含 figcaption 值的容器元素添加到 notion-article 的第一个子元素插入
videoWrapper.appendChild(carouselWrapper)
// 显示分集按钮 大于1集才显示 ;或者用户 要求强制显示
if (figCaptionWrapper.children.length > 1 || siteConfig('MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE', false, CONFIG)) {
if (
figCaptionWrapper.children.length > 1 ||
siteConfig('MOVIE_VIDEO_COMBINE_SHOW_PAGE_FORCE', false, CONFIG)
) {
videoWrapper.appendChild(figCaptionWrapper)
}
// 放入页面
if (notionArticle.firstChild && notionArticle.contains(notionArticle.firstChild)) {
if (
notionArticle.firstChild &&
notionArticle.contains(notionArticle.firstChild)
) {
notionArticle.insertBefore(videoWrapper, notionArticle.firstChild)
} else {
notionArticle.appendChild(videoWrapper)
Expand Down Expand Up @@ -300,7 +316,9 @@ const LayoutSlug = props => {
return (
<>
{!lock ? (
<div id='article-wrapper' className='px-2 max-w-5xl 2xl:max-w-[70%] mx-auto'>
<div
id='article-wrapper'
className='px-2 max-w-5xl 2xl:max-w-[70%] mx-auto'>
{/* 标题 */}
<ArticleInfo post={post} />
{/* 页面元素 */}
Expand Down Expand Up @@ -415,7 +433,11 @@ const LayoutArchive = props => {
<>
<div className='mb-10 pb-20 md:py-12 p-3 min-h-screen w-full'>
{Object.keys(archivePosts).map(archiveTitle => (
<BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
<BlogListGroupByDate
key={archiveTitle}
archiveTitle={archiveTitle}
archivePosts={archivePosts}
/>
))}
</div>
</>
Expand Down
Loading

0 comments on commit 176b66e

Please sign in to comment.