d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

主题样式微调 Magzine和Next

Browse Source
This commit is contained in:
tangly1024.com
2024-11-13 14:24:16 +08:00
parent 17ff870199
commit 1c654a5118
8 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -148,7 +148,7 @@ export default function Header(props) {
<div className='flex gap-x-8 h-full'>
<LogoBar {...props} />
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex items-center gap-x-4'>
<div className='hidden md:flex items-center gap-x-4 py-1'>
{links &&
links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />

4
themes/magzine/components/MenuItemDrop.js
View File

@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<div
className={
'h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
'px-2 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
(selected
? 'bg-gray-600 text-white hover:text-white'
: 'hover:text-gray-600')
@@ -52,7 +52,7 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && (
<ul
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-10'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
{link?.subMenus?.map(sLink => {
return (
<li

22
themes/magzine/components/PostItemCardTop.js
View File

@@ -13,11 +13,11 @@ import TagItemMini from './TagItemMini'
* @returns
*/
const PostItemCardTop = ({ post, showSummary }) => {
const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
const { locale } = useGlobal()
return (
<div
key={post.id}
key={post?.id}
// data-aos='fade-up'
// data-aos-duration='300'
// data-aos-once='false'
@@ -26,7 +26,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
<div className='flex flex-col w-full'>
{siteConfig('MAGZINE_POST_LIST_COVER') && post?.pageCoverThumbnail && (
<Link
href={post?.href}
href={post?.href || ''}
passHref
className={
'cursor-pointer hover:underline text-4xl leading-tight dark:text-gray-300 dark:hover:text-gray-400'
@@ -35,8 +35,8 @@ const PostItemCardTop = ({ post, showSummary }) => {
<LazyImage
priority
alt={post?.title}
src={post.pageCoverThumbnail}
style={post.pageCoverThumbnail ? {} : { height: '0px' }}
src={post?.pageCoverThumbnail}
style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
className='w-full max-h-80 object-cover hover:scale-125 duration-150'
/>
</div>
@@ -45,7 +45,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
<div className='flex py-2 mr-2 items-center'>
{siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
<CategoryItem category={post.category} />
<CategoryItem category={post?.category} />
)}
<div
className={
@@ -59,16 +59,16 @@ const PostItemCardTop = ({ post, showSummary }) => {
</div>
<Link
href={post?.href}
href={post?.href || ''}
passHref
className={
'cursor-pointer hover:underline leading-tight dark:text-gray-300 dark:hover:text-gray-400'
}>
<h2 className='text-4xl'>
{siteConfig('POST_TITLE_ICON') && (
<NotionIcon icon={post.pageIcon} />
<NotionIcon icon={post?.pageIcon} />
)}
{post.title}
{post?.title}
</h2>
</Link>
@@ -76,7 +76,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
{(!showPreview || showSummary) && (
<main className='my-4 text-gray-900 dark:text-gray-300 text-lg leading-7'>
{post.summary}
{post?.summary}
</main>
)}
@@ -97,7 +97,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
</div>
)}
<div className='text-sm py-1'>{post.date?.start_date}</div>
<div className='text-sm py-1'>{post?.date?.start_date}</div>
</div>
</div>
)

22
themes/magzine/components/PostItemCardWide.js
View File

@@ -12,32 +12,32 @@ import CategoryItem from './CategoryItem'
* @returns
*/
const PostItemCardWide = ({ post, showSummary }) => {
const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
const { locale } = useGlobal()
return (
<div key={post.id} className='flex justify-between gap-x-6'>
<div key={post?.id} className='flex justify-between gap-x-6'>
{/* 卡牌左侧 */}
<div className='h-40 w-96 gap-y-3 flex flex-col'>
{siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
<CategoryItem category={post.category} />
<CategoryItem category={post?.category} />
)}
<Link
href={post?.href}
href={post?.href || ''}
passHref
className={
' cursor-pointer font-semibold hover:underline text-xl leading-tight dark:text-gray-300 dark:hover:text-gray-400'
}>
<h3 className='max-w-80 break-words'>
{siteConfig('POST_TITLE_ICON') && (
<NotionIcon icon={post.pageIcon} />
<NotionIcon icon={post?.pageIcon} />
)}
{post.title}
{post?.title}
</h3>
</Link>
{(!showPreview || showSummary) && (
<main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
{post.summary}
{post?.summary}
</main>
)}
@@ -47,7 +47,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
<div className='pointer-events-none border-t pt-8 border-dashed'>
<div className='w-full justify-start flex'>
<Link
href={post?.href}
href={post?.href || ''}
passHref
className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
{locale.COMMON.ARTICLE_DETAIL}
@@ -66,7 +66,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))} */}
<div className='text-sm py-1'>{post.date?.start_date}</div>
<div className='text-sm py-1'>{post?.date?.start_date}</div>
</div>
</div>
@@ -74,8 +74,8 @@ const PostItemCardWide = ({ post, showSummary }) => {
<div className='w-40 h-40 object-cover overflow-hidden mb-2'>
<LazyImage
alt={post?.title}
src={post.pageCoverThumbnail}
style={post.pageCoverThumbnail ? {} : { height: '0px' }}
src={post?.pageCoverThumbnail}
style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
className='w-40 h-40 object-cover hover:scale-125 duration-150'
/>
</div>

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

@@ -90,7 +90,7 @@ export default function PostNavAround({ prev, next }) {
className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
<Link
href={`/${next.slug}`}
className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-green-600'>
className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-800 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-green-600'>
<div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
<hr className='mt-2 mb-3' />
<div className='line-clamp-2'>{next?.title}</div>

4
themes/magzine/components/Progress.js
View File

@@ -29,9 +29,9 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [])
return (
<div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black'>
<div className='h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-gray-900'>
<div
className='h-4 bg-black dark:bg-hexo-black-gray duration-200'
className='h-4 dark:bg-black bg-hexo-black-gray duration-200'
style={{ width: `${percent}%` }}>
{showPercent && (
<div className='text-right text-white text-xs'>{percent}%</div>

6
themes/next/components/MenuItemDrop.js
View File

@@ -42,18 +42,18 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && (
<ul
className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} ml-3 whitespace-nowrap absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
{link?.subMenus?.map(sLink => {
return (
<li key={sLink.id}>
<Link
href={sLink.href}
target={link?.target}
className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
className='my-auto h-9 pl-4 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
{sLink.icon && (
<i className={`${sLink.icon} w-4 text-center`} />
)}
<div className={'ml-4'}>{sLink.name}</div>
{sLink.name}
{sLink.slot}
</Link>
</li>

2
themes/next/components/SideAreaLeft.js
View File

@@ -28,7 +28,7 @@ const SideAreaLeft = props => {
id='left'
className={
(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'ml-4' : 'mr-4') +
' hidden lg:block flex-col w-60 z-20 relative'
' hidden lg:block flex-col w-60 relative z-30'
}>
<section className='w-60'>
{/* 菜单 */}