From 02697901c6286afff170ecdee8e995815c129859 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 30 Oct 2024 16:05:14 +0800 Subject: [PATCH] =?UTF-8?q?logo=20=E7=B1=BB=E5=90=8D=E7=BB=9F=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/example/components/Header.js | 2 +- themes/fukasawa/components/Logo.js | 18 ++--- themes/heo/components/Logo.js | 2 +- themes/magzine/components/LogoBar.js | 2 +- themes/medium/components/LogoBar.js | 12 ++-- themes/movie/components/BlogListPage.js | 5 +- themes/movie/components/Footer.js | 6 +- themes/movie/components/Header.js | 18 +++-- .../movie/components/HomeBackgroundImage.js | 21 ++++++ themes/movie/components/MenuItemDrop.js | 4 +- themes/movie/config.js | 1 + themes/movie/index.js | 66 ++++++++++++------- themes/next/components/Logo.js | 44 ++++++++----- themes/nobelium/components/Nav.js | 2 +- themes/starter/components/Logo.js | 2 +- 15 files changed, 136 insertions(+), 69 deletions(-) create mode 100644 themes/movie/components/HomeBackgroundImage.js diff --git a/themes/example/components/Header.js b/themes/example/components/Header.js index ca60bf63982..12111edd328 100644 --- a/themes/example/components/Header.js +++ b/themes/example/components/Header.js @@ -13,7 +13,7 @@ export const Header = props => {
+ 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')}
diff --git a/themes/fukasawa/components/Logo.js b/themes/fukasawa/components/Logo.js index 1b28e1ec420..ae9513636cc 100644 --- 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 ( -
- - {siteConfig('TITLE')} - -
- ); +
+ + {siteConfig('TITLE')} + +
+ ) } export default Logo diff --git a/themes/heo/components/Logo.js b/themes/heo/components/Logo.js index 08d18b918a9..55ab2b4f0d0 100644 --- 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' />
-
+
{siteConfig('TITLE')}
diff --git a/themes/magzine/components/LogoBar.js b/themes/magzine/components/LogoBar.js index 986fcf71d75..b7ef527b1d7 100644 --- a/themes/magzine/components/LogoBar.js +++ b/themes/magzine/components/LogoBar.js @@ -6,7 +6,7 @@ export default function LogoBar(props) {
+ 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'> {/* - - {siteConfig('TITLE')} - + + {siteConfig('TITLE')} +
- ); + ) } diff --git a/themes/movie/components/BlogListPage.js b/themes/movie/components/BlogListPage.js index dade70d1682..2a3126ca00c 100644 --- 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 ( -
+
diff --git a/themes/movie/components/Footer.js b/themes/movie/components/Footer.js index bc26c621bba..a45cda50646 100644 --- 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 index c799d740e72..e3ecba6353a 100644 --- a/themes/movie/components/Header.js +++ b/themes/movie/components/Header.js @@ -99,14 +99,15 @@ export const Header = props => { return ( <> -
+
+ {/* 左侧Logo */} + className='logo whitespace-nowrap text-2xl md:text-3xl font-bold text-gray-dark no-underline flex items-center'> {siteConfig('TITLE')} -
+
{/* 右侧菜单 */} <>
+
{
- + {/* 移动端菜单 */} - + {links?.map( (link, index) => link && diff --git a/themes/movie/components/HomeBackgroundImage.js b/themes/movie/components/HomeBackgroundImage.js new file mode 100644 index 00000000000..4cdb5056583 --- /dev/null +++ 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 ( + + ) +} diff --git a/themes/movie/components/MenuItemDrop.js b/themes/movie/components/MenuItemDrop.js index 0c07d771b43..3b5cf813ec9 100644 --- a/themes/movie/components/MenuItemDrop.js +++ b/themes/movie/components/MenuItemDrop.js @@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => { + className='select-none menu-link pl-2 pr-4 no-underline tracking-widest pb-1 hover:font-bold'> {link?.icon && } {link?.name} {hasSubMenu && } @@ -25,7 +25,7 @@ export const MenuItemDrop = ({ link }) => { {hasSubMenu && ( <> -
+
{link?.icon && } {link?.name} diff --git a/themes/movie/config.js b/themes/movie/config.js index 5fb5046df59..b6b0bd9c776 100644 --- 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 index b62b543f027..00b90346c4e 100644 --- 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,15 +47,23 @@ 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) ? ( + + ) : null + return ( - +
@@ -63,25 +71,19 @@ const LayoutBase = props => { {/* 页头 */}
+ {headerSlot} {/* 主体 */}
- {/* 标题栏 */} - {/* {fullWidth ? null : } */} - - {/* 广告栏 */} - <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> </> diff --git a/themes/next/components/Logo.js b/themes/next/components/Logo.js index 45b26f4db7a..e7c5f0e2d49 100644 --- a/themes/next/components/Logo.js +++ b/themes/next/components/Logo.js @@ -1,24 +1,36 @@ -import Link from 'next/link' import { siteConfig } from '@/lib/config' +import Link from 'next/link' const Logo = props => { const { className } = props return ( - <Link href='/' passHref legacyBehavior> - <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}> - <div data-aos="fade-down" - data-aos-duration="500" - data-aos-once="true" - data-aos-anchor-placement="top-bottom" - className='font-serif text-xl text-white'> {siteConfig('TITLE')}</div> - <div data-aos="fade-down" - data-aos-duration="500" - data-aos-delay="300" - data-aos-once="true" - data-aos-anchor-placement="top-bottom" - className='text-sm text-gray-300 font-light text-center'> {siteConfig('DESCRIPTION')}</div> - </div> - </Link> + <Link href='/' passHref legacyBehavior> + <div + className={ + 'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + + className + }> + <div + data-aos='fade-down' + data-aos-duration='500' + data-aos-once='true' + data-aos-anchor-placement='top-bottom' + className='font-serif text-xl text-white logo'> + {' '} + {siteConfig('TITLE')} + </div> + <div + data-aos='fade-down' + data-aos-duration='500' + data-aos-delay='300' + data-aos-once='true' + data-aos-anchor-placement='top-bottom' + className='text-sm text-gray-300 font-light text-center'> + {' '} + {siteConfig('DESCRIPTION')} + </div> + </div> + </Link> ) } export default Logo diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js index 112b8f1a969..5e6232afbfc 100644 --- a/themes/nobelium/components/Nav.js +++ b/themes/nobelium/components/Nav.js @@ -72,7 +72,7 @@ const Nav = props => { {post?.title} </p> ) : ( - <p className='ml-2 font-medium text-gray-800 dark:text-gray-300 header-name whitespace-nowrap'> + <p className='logo ml-2 font-medium text-gray-800 dark:text-gray-300 header-name whitespace-nowrap'> {siteConfig('TITLE')} {/* ,{' '}<span className="font-normal">{siteConfig('DESCRIPTION')}</span> */} </p> diff --git a/themes/starter/components/Logo.js b/themes/starter/components/Logo.js index bbbb51447d6..e290d4d9948 100644 --- a/themes/starter/components/Logo.js +++ b/themes/starter/components/Logo.js @@ -59,7 +59,7 @@ export const Logo = ({ white }) => { onClick={() => { router.push('/') }} - className={`${logoTextColor} dark:text-white py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}> + className={`${logoTextColor} logo dark:text-white py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}> {siteConfig('TITLE')} </span> </div>