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 布局微调

Browse Source
This commit is contained in:
tangly1024.com
2024-09-14 11:40:16 +08:00
parent 16335a1a21
commit a0e5c5c2dc
12 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
tailwind.config.js
View File

@@ -2,7 +2,12 @@ const BLOG = require('./blog.config')
const { fontFamilies } = require('./lib/font')
module.exports = {
content: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js', './themes/**/*.js'],
content: [
'./pages/**/*.js',
'./components/**/*.js',
'./layouts/**/*.js',
'./themes/**/*.js'
],
darkMode: BLOG.APPEARANCE === 'class' ? 'media' : 'class', // or 'media' or 'class'
theme: {
fontFamily: fontFamilies,
@@ -19,8 +24,9 @@ module.exports = {
xl: '1140px',
// => @media (min-width: 1200px) { ... }
'2xl': '1320px'
'2xl': '1320px',
// => @media (min-width: 1400px) { ... }
'3xl': '1920px'
},
container: {
center: true,
@@ -64,7 +70,8 @@ module.exports = {
},
maxWidth: {
side: '14rem',
'9/10': '90%'
'9/10': '90%',
'screen-3xl': '1440px'
},
boxShadow: {
input: '0px 7px 20px rgba(0, 0, 0, 0.03)',

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

@@ -19,7 +19,7 @@ const Footer = ({ title }) => {
return (
<footer className='z-10 bg-black text-white justify-center m-auto w-full p-6 relative'>
<div className='max-w-screen-2xl w-full mx-auto '>
<div className='max-w-screen-3xl w-full mx-auto '>
{/* 信息与链接区块 */}
<div className='w-full flex lg:flex-row flex-col justify-between py-16'>
<div className='gap-x-2 py-6 flex items-center'>

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

@@ -121,7 +121,7 @@ export default function Header(props) {
{/* 导航栏菜单内容 */}
<div
id='top-navbar'
className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-2xl h-20 transition-all duration-200 items-center justify-between'>
className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-3xl h-20 transition-all duration-200 items-center justify-between'>
{/* 搜索栏 */}
{showSearchInput && (
<input

12
themes/magzine/components/Hero.js
View File

@@ -15,21 +15,21 @@ const Hero = ({ posts }) => {
const post2 = posts[2]
return (
<>
<div className='w-full mx-auto max-w-screen-2xl xl:flex justify-between'>
<div className='w-full mx-auto max-w-screen-3xl xl:flex justify-between gap-10'>
{/* 左侧一篇主要置顶文章 */}
<div className='basis-1/2 mb-6 px-2 lg:px-5'>
<PostItemCardTop post={postTop} />
</div>
{/* 右侧 */}
<div>
{/* 首屏介绍 */}
<div className='basis-1/2 flex flex-col gap-y-4'>
{/* 首屏宣传小Banner */}
<BannerItem />
{/* 两篇次要文章 */}
<div className='py-4 px-2 lg:px-5'>
<hr className='mb-8' />
<div className='py-4 px-2 lg:px-0 flex flex-col gap-y-6'>
<hr />
<PostItemCardWide post={post1} />
<hr className='mb-8' />
<hr />
<PostItemCardWide post={post2} />
</div>
</div>

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

@@ -14,7 +14,7 @@ const PostItemCard = ({ post }) => {
const { siteInfo } = useGlobal()
const cover = post?.pageCoverThumbnail || siteInfo?.pageCover
return (
<div key={post.id} className='mb-6 max-w-screen-2xl'>
<div key={post.id} className='mb-6 max-w-screen-3xl'>
<div className='flex flex-col space-y-3'>
{siteConfig('MAGZINE_POST_LIST_COVER') && (
<Link

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

@@ -12,7 +12,7 @@ const PostItemCardSimple = ({ post, showSummary }) => {
return (
<div
key={post.id}
className='lg:mb-6 max-w-screen-2xl border-t border-gray-300 mr-8 py-2 gap-y-3 flex flex-col dark:border-gray-800 '>
className='lg:mb-6 max-w-screen-3xl border-t border-gray-300 mr-8 py-2 gap-y-3 flex flex-col dark:border-gray-800 '>
<div className='flex mr-2 items-center'>
{siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
<CategoryItem category={post.category} />

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

@@ -22,7 +22,7 @@ const PostItemCardTop = ({ post, showSummary }) => {
data-aos-duration='300'
data-aos-once='false'
data-aos-anchor-placement='top-bottom'
className='mb-6 max-w-screen-2xl '>
className='mb-6 max-w-screen-3xl '>
<div className='flex flex-col w-full'>
{siteConfig('MAGZINE_POST_LIST_COVER') && (
<Link

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

@@ -5,7 +5,6 @@ import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CategoryItem from './CategoryItem'
import TagItemMini from './TagItemMini'
/**
* 水平左右布局的博客卡片
@@ -16,9 +15,12 @@ const PostItemCardWide = ({ post, showSummary }) => {
const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
const { locale } = useGlobal()
return (
<div key={post.id} className='flex justify-between space-x-6 mb-6 '>
<div key={post.id} className='flex justify-between gap-x-6'>
{/* 卡牌左侧 */}
<div className='h-40 w-96'>
<div className='h-40 w-96 gap-y-3 flex flex-col'>
{siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
<CategoryItem category={post.category} />
)}
<Link
href={post?.href}
passHref
@@ -34,7 +36,7 @@ const PostItemCardWide = ({ post, showSummary }) => {
</Link>
{(!showPreview || showSummary) && (
<main className='my-4 line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
<main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
{post.summary}
</main>
)}
@@ -58,15 +60,12 @@ const PostItemCardWide = ({ post, showSummary }) => {
<div
className={
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
'flex items-center justify-start flex-wrap space-x-3 text-gray-400'
}>
{siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
<CategoryItem category={post.category} />
)}
{siteConfig('MAGZINE_POST_LIST_TAG') &&
{/* {siteConfig('MAGZINE_POST_LIST_TAG') &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
))} */}
<div className='text-sm py-1'>{post.date?.start_date}</div>
</div>
</div>

6
themes/magzine/components/PostListHorizontal.js
View File

@@ -18,12 +18,14 @@ const PostListHorizontal = ({ title, href, posts, hasBg }) => {
return (
<div
className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1] dark:bg-black' : ''}`}>
<div className='max-w-screen-2xl w-full mx-auto'>
<div className='max-w-screen-3xl w-full mx-auto'>
{/* 标题 */}
<div className='flex justify-between items-center py-6'>
<h3 className='text-2xl'>{title}</h3>
{href && (
<Link className='hidden lg:block text-lg underline' href={href}>
<Link
className='hidden font-bold lg:block text-lg underline'
href={href}>
<span>查看全部</span>
<i className='ml-2 fas fa-arrow-right' />
</Link>

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

@@ -20,7 +20,7 @@ const PostListRecommend = ({ latestPosts, allNavPages }) => {
return (
<div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
<div className='max-w-screen-2xl w-full mx-auto'>
<div className='max-w-screen-3xl w-full mx-auto'>
{/* 标题 */}
<div className='flex justify-between items-center py-6'>
<h3 className='text-4xl font-bold'>{title}</h3>

20
themes/magzine/components/PostListSimpleHorizontal.js
View File

@@ -14,14 +14,18 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
return (
<div className='w-full py-10 bg-[#F6F6F1] dark:bg-black'>
<div className='max-w-screen-2xl w-full mx-auto px-2'>
<div className='max-w-screen-3xl w-full mx-auto px-4 lg:px-0'>
{/* 标题 */}
<div className='flex justify-between items-center py-6'>
<h3 className='text-2xl'>{title}</h3>
<Link className='text-lg underline' href={href}>
<span>查看全部</span>
<i className='ml-2 fas fa-arrow-right' />
</Link>
{href && (
<Link
className='hidden font-bold lg:block text-lg underline'
href={href}>
<span>查看全部</span>
<i className='ml-2 fas fa-arrow-right' />
</Link>
)}
</div>
{/* 列表 */}
<ul className='grid grid-cols-1 lg:grid-cols-4'>
@@ -29,6 +33,12 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
return <PostItemCardSimple key={p.id} post={p} />
})}
</ul>
{href && (
<Link className='lg:hidden block text-lg underline' href={href}>
<span>查看全部</span>
<i className='ml-2 fas fa-arrow-right' />
</Link>
)}
</div>
</div>
)

14
themes/magzine/index.js
View File

@@ -128,7 +128,7 @@ const LayoutPostList = props => {
const { category, tag } = props
return (
<div className=' max-w-screen-2xl mx-auto w-full px-2 lg:px-0'>
<div className=' max-w-screen-3xl mx-auto w-full px-2 lg:px-0'>
{/* 一个顶部条 */}
<h2 className='py-8 text-2xl font-bold'>{category || tag}</h2>
@@ -172,12 +172,12 @@ const LayoutSlug = props => {
return (
<>
<div {...props} className='w-full mx-auto max-w-screen-2xl'>
<div {...props} className='w-full mx-auto max-w-screen-3xl'>
{/* 文章锁 */}
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && (
<div className='w-full max-w-screen-2xl mx-auto'>
<div className='w-full max-w-screen-3xl mx-auto'>
{/* 文章信息 */}
<ArticleInfo {...props} />
@@ -298,7 +298,7 @@ const LayoutSearch = props => {
}, [])
return (
<div className='max-w-screen-2xl w-full mx-auto'>
<div className='max-w-screen-3xl w-full mx-auto'>
{/* 搜索导航栏 */}
<div className='py-12'>
<div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
@@ -333,7 +333,7 @@ const LayoutArchive = props => {
const { archivePosts } = props
return (
<>
<div className='w-full max-w-screen-2xl mx-auto mt-14 min-h-full'>
<div className='w-full max-w-screen-3xl mx-auto mt-14 min-h-full'>
{Object.keys(archivePosts)?.map(archiveTitle => (
<PostGroupArchive
key={archiveTitle}
@@ -370,7 +370,7 @@ const LayoutCategoryIndex = props => {
const { categoryOptions } = props
const { locale } = useGlobal()
return (
<div className='w-full max-w-screen-2xl mx-auto min-h-96'>
<div className='w-full max-w-screen-3xl mx-auto min-h-96'>
<div className='bg-white dark:bg-gray-700 py-10'>
<div className='dark:text-gray-200 mb-5 text-2xl font-bold'>
{/* <i className='mr-4 fas fa-th' /> */}
@@ -409,7 +409,7 @@ const LayoutTagIndex = props => {
const { tagOptions } = props
const { locale } = useGlobal()
return (
<div className='w-full max-w-screen-2xl mx-auto min-h-96'>
<div className='w-full max-w-screen-3xl mx-auto min-h-96'>
<div className='bg-white dark:bg-gray-700 py-10'>
<div className='dark:text-gray-200 mb-5 text-2xl font-bold'>
{/* <i className='mr-4 fas fa-tag' /> */}