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

theme-heo

Browse Source
This commit is contained in:
tangly1024
2023-07-13 22:13:47 +08:00
parent 43287cbf74
commit 89634479b5
8 changed files with 142 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
themes/heo/components/BlogPostCard.js
View File

@@ -12,11 +12,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
return (
<div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
<div className={'group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden rounded-xl bg-white '}>
<div className={'flex mb-4 flex-col h-[23rem] md:h-52 lg:flex-row 2xl:h-96 2xl:flex-col group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between overflow-hidden rounded-xl bg-white '}>
{/* 图片封面 */}
{showPageCover && (
<div className="flex-1 h-60 md:w-5/12 lg:w-full overflow-hidden">
<div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
</Link>
@@ -24,11 +24,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
)}
{/* 文字区块 */}
{/* <BlogPostCardInfo index={index} post={post} onHover={onHover} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} /> */}
<div className={'flex flex-col justify-between lg:p-6 p-4 w-full'}>
<div className={'flex p-6 flex-col justify-between h-40 md:h-full w-full md:w-7/12 2xl:w-full'}>
<div>
{/* 分类 */}
{post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-600 `}>
{post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
<Link passHref href={`/category/${post.category}`}
className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
{post.category}
@@ -42,32 +41,31 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight'}>
<span className='menu-link '>{post.title}</span>
</Link>
</div>
{/* 摘要 */}
{(!showPreview || showSummary) && !post.results && (
<p className="line-clamp-2 replace my-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-tight">
{post.summary}
</p>
)}
{/* 摘要 */}
{(!showPreview || showSummary) && !post.results && (
<p className="line-clamp-2 replace my-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-tight">
{post.summary}
</p>
)}
{/* 搜索结果 */}
{post.results && (
<p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
{/* 搜索结果 */}
{post.results && (
<p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
</div>

2
themes/heo/components/BlogPostListPage.js
View File

@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
return (
<div id="container" className='w-full'>
{/* 文章列表 */}
<div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
<div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
{posts?.map(post => (
<BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
))}

18
themes/heo/components/CategoryBar.js
View File

@@ -11,22 +11,16 @@ export default function CategoryBar(props) {
const { categoryOptions } = props
const { locale } = useGlobal()
return <div id='category-bar' className="flex justify-between items-center h-12 mb-4 space-x-2 w-full bg-white border
py-2 px-4 rounded-xl hover:border hover:border-indigo-600 transition-colors duration-200">
return <div id='category-bar' className="flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white lg:border
py-2 lg:px-2 rounded-xl lg:hover:border hover:border-indigo-600 transition-colors duration-200">
<div id='category-bar-items' className='flex justify-start space-x-2'>
<div id='category-bar-items' className='rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
<MenuItem href='/' name={locale.NAV.INDEX} />
{categoryOptions?.map((c, index) => {
return (
<div key={index}>
<MenuItem href={`/category/${c.name}`} name={c.name} />
</div>
)
})}
{categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
</div>
<div id='category-bar-next' className='flex'>
<Link href='/category' className='font-bold text-gray-900 transition-colors duration-200 hover:text-indigo-600'>
<Link href='/category' className='whitespace-nowrap font-bold text-gray-900 transition-colors duration-200 hover:text-indigo-600'>
{locale.COMMON.MORE}
</Link>
</div>
@@ -41,7 +35,7 @@ export default function CategoryBar(props) {
const MenuItem = ({ href, name }) => {
const router = useRouter()
const selected = router.pathname === href
return <div className={`duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 hover:text-white hover:bg-indigo-600 ${selected ? 'text-white bg-indigo-600' : ''}`}>
return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 hover:text-white hover:bg-indigo-600 ${selected ? 'text-white bg-indigo-600' : ''}`}>
<Link href={href}>{name}</Link>
</div>
}

8
themes/heo/components/Header.js
View File

@@ -28,8 +28,8 @@ const Header = props => {
const throttleMs = 200
/**
* 根据滚动条，切换导航栏样式
*/
* 根据滚动条，切换导航栏样式
*/
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY
const header = document.querySelector('#header')
@@ -44,8 +44,8 @@ const Header = props => {
return (<>
{/* 头条 */}
<nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center top-0 duration-300 transition-all sticky text-black w-full z-20 transform`}>
<div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-5'>
<nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center fixed top-0 duration-300 transition-all text-black w-full z-20 transform`}>
<div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-8'>
<div className='flex'>
<Logo {...props} />
</div>

141
themes/heo/components/Hero.js
View File

@@ -4,7 +4,7 @@ import BLOG from '@/blog.config'
import { PlusSmall } from '@/components/HeroIcons'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { useImperativeHandle, useRef, useState } from 'react'
/**
* 顶部英雄区
@@ -14,14 +14,17 @@ import { useState } from 'react'
* @returns
*/
const Hero = props => {
return (<hero id="hero" style={{ zIndex: 1 }} className="max-w-[86rem] w-full mx-auto flex relative space-x-6 px-5" >
{/* 左侧banner组 */}
<BannerGroup />
return (
<div id="hero-wrapper" className='w-full overflow-hidden select-none px-5 mb-4'>
<hero id="hero" style={{ zIndex: 1 }} className="rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3" >
{/* 左侧banner组 */}
<BannerGroup />
{/* 右侧置顶文章组 */}
<TopGroup {...props} />
</hero>)
{/* 右侧置顶文章组 */}
<TopGroup {...props} />
</hero>
</div>
)
}
/**
@@ -29,31 +32,53 @@ const Hero = props => {
* @returns
*/
function BannerGroup() {
return <div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
<div className="h-60 bg-white rounded-xl border my-2"></div>
return (
// 左侧英雄区
<div id='hero-left-wrapper' className='flex flex-col flex-1 mr-2 max-w-[37rem]'>
{/* 动图 */}
<Banner />
{/* 导航分类 */}
<GroupMenu />
</div>
)
}
<div className="h-20 flex flex-nowrap justify-between space-x-3 my-2">
<Link href="/tag/必看精选" className="bg-blue-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out ">
<div className="font-bold text-lg pl-4 relative">
/**
* 英雄区左上角banner动图
* @returns
*/
function Banner() {
return <div className="h-full bg-white rounded-xl border mb-3 hidden xl:block"></div>
}
/**
* 英雄区左下角3个分类
* @returns
*/
function GroupMenu() {
return (
<div className="h-[165px] select-none xl:h-20 flex flex-col w-48 justify-between xl:space-y-0 xl:flex-row xl:w-full xl:flex-nowrap xl:space-x-3">
<Link href="/tag/必看精选" className="bg-blue-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-5 relative">
必看精选
<span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
</div>
</Link>
<Link href="/tag/热门文章" className="bg-orange-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-4 relative">
<Link href="/tag/热门文章" className="bg-orange-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-5 relative">
热门文章
<span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
</div>
</Link>
<Link href="/tag/实用教程" className="bg-emerald-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-4 relative">
{/* 第三个标签在小屏上不显示 */}
<Link href="/tag/实用教程" className="bg-emerald-500 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-300 ease-in-out">
<div className="font-bold text-lg pl-5 relative">
实用教程
<span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
<span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
</div>
</Link>
</div>
</div>
)
}
/**
@@ -61,62 +86,80 @@ function BannerGroup() {
*/
function TopGroup(props) {
const { latestPosts, siteInfo } = props
return <div id='hero-right' className='bg-green-200 flex-1 relative'>
<div id='top-group' className='w-full h-full grid grid-cols-3 gap-3 py-2'>
{latestPosts?.map(p => {
return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
<div className='cursor-pointer group relative flex flex-col w-52 overflow-hidden shadow bg-white rounded-xl'>
{/* eslint-disable-next-line */}
<img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
<div className='h-16 line-clamp-2 overflow-hidden p-3 font-semibold'>{p?.title}</div>
<div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>荐</div>
</div>
</Link>
})}
const todayCardRef = useRef()
function handleMouseLeave() {
todayCardRef.current.coverUp()
}
return (
<div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
{/* 制定最新文章 */}
<div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3'>
{latestPosts?.map(p => {
return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
<div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white rounded-xl'>
{/* eslint-disable-next-line */}
<img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
<div className='group-hover:text-indigo-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</div>
<div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>荐</div>
</div>
</Link>
})}
</div>
<TodayCard cRef={todayCardRef} />
</div>
<TodayCard />
</div>
)
}
/**
* 英雄区右侧，今日卡牌
* @returns
*/
function TodayCard() {
function TodayCard({ cRef }) {
const router = useRouter()
// 卡牌是否盖住下层
const [isCoverUp, setIsCoverUp] = useState(true)
const router = useRouter()
function handleMouseLeave() {
setIsCoverUp(true)
}
/**
* 外部可以调用此方法
*/
useImperativeHandle(cRef, () => {
return {
coverUp: () => {
setIsCoverUp(true)
}
}
})
/**
* 点击更多
* @param {*} e
*/
function handleClickMore(e) {
e.stopPropagation()
setIsCoverUp(false)
}
/**
* 点击卡片跳转的链接
* @param {*} e
*/
* 点击卡片跳转的链接
* @param {*} e
*/
function handleCardClick(e) {
router.push('https://tangly1024.com')
}
return <div id='today-card' className={'overflow-hidden absolute flex flex-1 flex-col h-full top-0 w-full'}>
<div id='card-body' onMouseLeave={handleMouseLeave} onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110'} transition-all duration-150today-card my-2 h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
return <div id='today-card' className={`${isCoverUp ? ' ' : 'pointer-events-none'} overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}>
<div id='card-body' onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110 pointer-events-none'} shadow transition-all duration-150today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
<div id='today-card-info' className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
<div className='flex flex-col'>
<div className='text-sm font-light'>新版上线</div>
<div className='text-3xl font-extrabold'>NotionNext4.0轻松定制主题</div>
<div className='text-3xl font-extrabold'>NotionNext4.0 轻松定制主题</div>
</div>
<div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} cursor-zoom-in flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
<PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
<div id='more' className='select-none'>更多推荐</div>
</div>
</div>
<div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`}style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
<div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`} style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
</div>
</div>
}

2
themes/heo/components/SideRight.js
View File

@@ -35,7 +35,7 @@ export default function SideRight(props) {
console.log('props', props)
return (
<div id='sideRight' className='w-72 space-y-4'>
<div id='sideRight' className='hidden xl:block w-72 space-y-4'>
<InfoCard {...props} className='w-72' />

8
themes/heo/index.js
View File

@@ -50,7 +50,7 @@ const LayoutBase = props => {
}
return (
<div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col'>
<div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col overflow-hidden'>
{/* 网页SEO */}
<CommonHead meta={meta} siteInfo={siteInfo} />
<Style />
@@ -69,13 +69,15 @@ const LayoutBase = props => {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-16"
unmount={false}
className='mt-20'
>
{headerSlot}
</Transition>
{/* 主区块 */}
<main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative p-5'}>
<div id="container-inner" className={' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative px-5'}>
<div id="container-inner" className={'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
<Transition
show={!onLoading}

8
themes/heo/style.js
View File

@@ -32,6 +32,14 @@ const Style = () => {
mask-image: linear-gradient(to top, transparent 5%, black 70%);
}
.recent-top-post-group::-webkit-scrollbar {
display: none;
}
.scroll-hidden::-webkit-scrollbar {
display: none;
}
`}</style>
}