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

dark-mode

Browse Source
This commit is contained in:
tangly1024
2023-07-16 00:04:03 +08:00
parent 0eed0eea40
commit 1d8188633b
14 changed files with 46 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@ 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={'cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md: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 '}>
<div className={'bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full dark:border-gray-600 hover:border-indigo-600 dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl '}>
{/* 图片封面 */}
{showPageCover && (
@@ -24,12 +24,12 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
)}
{/* 文字区块 */}
<div className={'flex p-6 2xl:p-4 flex-col justify-between h-40 md:h-full 2xl:h-40 w-full md:w-7/12 2xl:w-full'}>
<div className={'flex p-6 2xl:p-4 flex-col justify-between h-48 md:h-full 2xl:h-48 w-full md:w-7/12 2xl:w-full'}>
<div>
{/* 分类 */}
{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">
className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:text-gray-600 transform">
{post.category}
</Link>
</div>}
@@ -38,8 +38,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
<Link
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
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'}>
className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 dark:group-hover:text-yellow-600 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
<span className='menu-link '>{post.title}</span>
</Link>
</div>

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

@@ -1,5 +1,5 @@
const Card = ({ children, headerSlot, className }) => {
return <div className={`${className || ''} card border rounded-xl lg:p-6 p-4`}>
return <div className={`${className || ''} card border dark:border-gray-600 rounded-xl lg:p-6 p-4`}>
<>{headerSlot}</>
<section>
{children}

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

@@ -11,7 +11,7 @@ export default function CategoryBar(props) {
const { categoryOptions } = props
const { locale } = useGlobal()
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
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 dark:lg:bg-[#1e1e1e] lg:border dark:lg:border-gray-800
py-2 lg:px-2 rounded-xl lg:hover:border hover:border-indigo-600 transition-colors duration-200">
<div id='category-bar-items' className='rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
@@ -20,7 +20,7 @@ export default function CategoryBar(props) {
</div>
<div id='category-bar-next' className='flex'>
<Link href='/category' className='whitespace-nowrap font-bold text-gray-900 transition-colors duration-200 hover:text-indigo-600'>
<Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
{locale.COMMON.MORE}
</Link>
</div>
@@ -35,7 +35,7 @@ export default function CategoryBar(props) {
const MenuItem = ({ href, name }) => {
const router = useRouter()
const selected = router.pathname === href
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' : ''}`}>
return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
<Link href={href}>{name}</Link>
</div>
}

6
themes/heo/components/CategoryGroup.js
View File

@@ -6,7 +6,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
return <></>
}
return <>
<div id='category-list' className='dark:border-gray-600 flex flex-wrap mx-4'>
<div id='category-list' className='dark:border-gray-700 flex flex-wrap mx-4'>
{categories.map(category => {
const selected = currentCategory === category.name
return (
@@ -22,10 +22,10 @@ const CategoryGroup = ({ currentCategory, categories }) => {
<div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
</Link>
);
)
})}
</div>
</>;
</>
}
export default CategoryGroup

7
themes/heo/components/Footer.js
View File

@@ -15,10 +15,11 @@ const Footer = ({ title }) => {
return (
<footer
className='relative z-10 flex-shrink-0 bg-white justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm'
className='relative z-10 flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm'
>
<div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white '>
{/* 颜色过度区 */}
<div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
</div>
<div className='w-full h-24'>
@@ -27,7 +28,7 @@ const Footer = ({ title }) => {
<br />
<div id='footer-bottom' className='w-full h-20 flex justify-between px-6 items-center bg-[#f1f3f7]'>
<div id='footer-bottom' className='w-full h-20 flex justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
<div id='footer-bottom-left'>
<i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
</div>

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

@@ -73,18 +73,18 @@ function Banner(props) {
router.push(randomPost.slug)
}
return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white rounded-xl border mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
<div id='banner-title' className='flex flex-col absolute top-10 left-10'>
<div className='text-4xl font-bold mb-3'>分享编程<br />与思维认知</div>
<div className='text-xs text-gray-600'>TANGLY1024.COM</div>
<div className='text-4xl font-bold mb-3 dark:text-white'>分享编程<br />与思维认知</div>
<div className='text-xs text-gray-600 dark:text-gray-200'>TANGLY1024.COM</div>
</div>
{/* 斜向滚动的图标 */}
<TagsGroupBar />
{/* 遮罩 */}
<div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
<div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
<div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
<div className='text-7xl text-white font-extrabold'>随便逛逛</div>
<div className='-ml-3 text-gray-300'><ArrowSmallRight className={'w-24 h-24 stroke-2'} /></div>
@@ -212,9 +212,9 @@ function TodayCard({ cRef }) {
})
/**
* 点击更多
* @param {*} e
*/
* 点击更多
* @param {*} e
*/
function handleClickMore(e) {
e.stopPropagation()
setIsCoverUp(false)

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

@@ -14,7 +14,7 @@ import Card from './Card'
export function InfoCard(props) {
const { siteInfo, notice } = props
return (
<Card className='bg-[#4f65f0] text-white flex flex-col w-72'>
<Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72'>
<div className='flex justify-between'>
<GreetingsWords />
<div className='justify-center items-center flex dark:text-gray-100 transform duration-200 cursor-pointer'>

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

@@ -29,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map((sLink, index) => {
return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-700 py-1 pr-6 pl-3'>
<Link href={sLink.to}>
<span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
</Link>

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

@@ -58,7 +58,7 @@ const NavBar = props => {
return (<>
{/* 头条 */}
<nav id='nav' className={`${fixedNav ? 'fixed' : 'relative bg-none'} ${textWhite ? 'text-white ' : 'text-black'} ${navBgWhite ? 'bg-white' : 'bg-none'} z-20 h-16 top-0 w-full`}>
<nav id='nav' className={`${fixedNav ? 'fixed' : 'relative bg-none'} ${textWhite ? 'text-white ' : 'text-black dark:text-white'} ${navBgWhite ? 'bg-white dark:bg-[#18171d]' : 'bg-none'} z-20 h-16 top-0 w-full`}>
<div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-8'>
<div className='flex'>
<Logo {...props} />

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

@@ -15,7 +15,7 @@ export function NoticeBar() {
return (
<notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
<div className="group cursor-pointer bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
<div className="group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700 duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
<span className='whitespace-nowrap'>此刻</span>
<div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
<Swipe items={notices} />

16
themes/heo/components/PaginationNumber.js
View File

@@ -36,7 +36,7 @@ const PaginationNumber = ({ page, totalPage }) => {
}
return (
<div className="mt-10 mb-5 flex justify-between items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
<div className="mt-10 mb-5 flex justify-between items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
{/* 上一页 */}
<Link
href={{
@@ -45,7 +45,7 @@ const PaginationNumber = ({ page, totalPage }) => {
}}
rel="prev"
className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
<div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white border rounded-lg cursor-pointer group">
<div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
<i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
<div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
{locale.PAGINATION.PREV}
@@ -59,9 +59,9 @@ const PaginationNumber = ({ page, totalPage }) => {
{pages}
{/* 跳转页码 */}
<div className='bg-white hover:bg-gray-100 h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
<div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600 dark:bg-[#1e1e1e] h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
<input value={value} className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg' onInput={handleInputChange}></input>
<div onClick={jumpToPage} className='cursor-pointer hover:bg-indigo-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
<div onClick={jumpToPage} className='cursor-pointer hover:bg-indigo-600 dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
<ChevronDoubleRight className={'w-4 h-4'} />
</div>
</div>
@@ -76,7 +76,7 @@ const PaginationNumber = ({ page, totalPage }) => {
rel="next"
className={`${+showNext ? 'block' : 'invisible'} `}>
<div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white border rounded-lg cursor-pointer group">
<div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
<i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
<div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
{locale.PAGINATION.NEXT}
@@ -103,9 +103,9 @@ function getPageElement(page, currentPage, pagePrefix) {
passHref
className={
(selected
? 'bg-indigo-600 dark:bg-indigo-500 text-white '
: 'bg-white') +
' hover:border-indigo-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
? 'bg-indigo-600 dark:bg-yellow-600 text-white '
: 'dark:bg-[#1e1e1e]') +
' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
}>
{page}

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

@@ -10,7 +10,7 @@ import Link from 'next/link'
const TagGroups = ({ tags, currentTag }) => {
if (!tags) return <></>
return (
<div id='tags-group' className='dark:border-gray-600 space-y-2'>
<div id='tags-group' className='dark:border-gray-700 space-y-2'>
{
tags.map(tag => {
return <>

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

@@ -7,7 +7,7 @@ const TagItemMini = ({ tag, selected = false }) => {
key={tag}
href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
passHref
className={'cursor-pointer inline-block hover:text-indigo-600 duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }>
className={'cursor-pointer inline-block hover:text-indigo-600 dark:text-white duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }>
<div className='font-light flex items-center'><HashTag className='text-gray-500 stroke-2 mr-0.5 w-3 h-3'/> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</Link>

13
themes/heo/index.js
View File

@@ -49,7 +49,7 @@ const LayoutBase = props => {
}
return (
<div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col overflow-hidden'>
<div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col overflow-hidden'>
{/* 网页SEO */}
<CommonHead meta={meta} siteInfo={siteInfo} />
<Style />
@@ -118,7 +118,14 @@ const LayoutIndex = (props) => {
<Hero {...props} />
</header>
return <LayoutPostList {...props} headerSlot={headerSlot} />
// 右侧栏 用户信息+标签列表
const slotRight = <SideRight {...props} />
return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</LayoutBase>
}
/**
@@ -301,7 +308,7 @@ const Layout404 = props => {
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
{/* 右侧文字 */}
{/* 右侧文字 */}
<div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
<h1 className='error-title font-extrabold md:text-9xl text-7xl'>404</h1>
<div>请尝试站内搜索寻找文章</div>