Merge pull request tangly1024#2903 from tangly1024/feat/theme-movie-b…

…ackground-image Feat/theme movie background image
aYenx · Oct 30, 2024 · 176b66e · 176b66e
2 parents f4f0acd + 0269790
commit 176b66e
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 70 deletions.
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
@@ -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'>
         {' '}

diff --git a/themes/example/components/Header.js b/themes/example/components/Header.js
@@ -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'>

diff --git a/themes/fukasawa/components/Logo.js b/themes/fukasawa/components/Logo.js
@@ -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
diff --git a/themes/heo/components/Logo.js b/themes/heo/components/Logo.js
@@ -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'>

diff --git a/themes/magzine/components/LogoBar.js b/themes/magzine/components/LogoBar.js
@@ -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}

diff --git a/themes/medium/components/LogoBar.js b/themes/medium/components/LogoBar.js
@@ -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>
-  );
+  )
 }
diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js
@@ -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'>

diff --git a/themes/movie/components/Footer.js b/themes/movie/components/Footer.js
@@ -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()

diff --git a/themes/movie/components/Header.js b/themes/movie/components/Header.js
@@ -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
@@ -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
@@ -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 &&

diff --git a/themes/movie/components/HomeBackgroundImage.js b/themes/movie/components/HomeBackgroundImage.js
@@ -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}
+    />
+  )
+}
diff --git a/themes/movie/components/MenuItemDrop.js b/themes/movie/components/MenuItemDrop.js
@@ -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>

diff --git a/themes/movie/config.js b/themes/movie/config.js
@@ -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的视频会被合并到文章开头，并展示分集按钮

diff --git a/themes/movie/index.js b/themes/movie/index.js
@@ -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'
@@ -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'
@@ -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}
@@ -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>
   )
 }
@@ -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')
@@ -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 元素
@@ -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 => {
@@ -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)
@@ -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} />
           {/* 页面元素 */}
@@ -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>
     </>