d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

logo 类名统一

Browse Source
This commit is contained in:
tangly1024.com
2024-10-30 16:05:14 +08:00
parent 332d87b0a2
commit 02697901c6
15 changed files with 136 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/example/components/Header.js
View File

@@ -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'>

18
themes/fukasawa/components/Logo.js
View File

@@ -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
themes/heo/components/Logo.js
View File

@@ -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'>

2
themes/magzine/components/LogoBar.js
View File

@@ -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}

12
themes/medium/components/LogoBar.js
View File

@@ -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
themes/movie/components/BlogListPage.js
View File

@@ -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'>

6
themes/movie/components/Footer.js
View File

@@ -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()

18
themes/movie/components/Header.js
View File

@@ -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 &&

21
themes/movie/components/HomeBackgroundImage.js Normal file
View File

@@ -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
themes/movie/components/MenuItemDrop.js
View File

@@ -17,7 +17,7 @@ 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>
@@ -25,7 +25,7 @@ export const MenuItemDrop = ({ 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>

1
themes/movie/config.js
View File

@@ -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的视频会被合并到文章开头，并展示分集按钮

66
themes/movie/index.js
View File

@@ -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) ? (
<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`}>
@@ -63,25 +71,19 @@ const LayoutBase = props => {
{/* 页头 */}
<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>
</>

44
themes/next/components/Logo.js
View File

@@ -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

2
themes/nobelium/components/Nav.js
View File

@@ -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>

2
themes/starter/components/Logo.js
View File

@@ -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>