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

💅 样式颜色统一，布局优化

Browse Source
This commit is contained in:
tangly1024
2021-09-28 17:36:45 +08:00
parent 9871d136bd
commit 4354f3650b
15 changed files with 174 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
layouts/ArticleLayout.js
View File

@@ -47,17 +47,17 @@ const ArticleLayout = ({
{/* <TopNav tags={tags} /> */}
{/* Wrapper */}
<div className='flex justify-between'>
<SideBar tags={tags} />
{/* 主体区块 */}
<main className='bg-gray-100 dark:bg-black w-full'>
{/* 卡牌水平边距wrapper */}
{/* 文章卡牌 */}
<div className='bg-white dark:border-gray-700 dark:bg-gray-700 duration-200'>
{/* 中央区域 wrapper */}
<div>
<header className='md:flex-shrink-0 overflow-y-hidden shadow-sm animate__fadeIn animate__animated'>
<header className='border-l border-t border-r mx-auto max-w-5xl mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
{/* 封面图 */}
{frontMatter.page_cover && frontMatter.page_cover.length > 1 && (
<img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -67,7 +67,7 @@ const ArticleLayout = ({
<article
ref={targetRef}
className='overflow-x-auto px-10 py-10 max-w-4xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
className='border-l border-b border-r mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
{/* 文章标题 */}
<h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
{frontMatter.title}
@@ -140,7 +140,7 @@ const ArticleLayout = ({
<div className='text-gray-800 my-5 dark:text-gray-300'>
<div className='mt-4 my-2 font-bold'>继续阅读</div>
<div className='flex flex-wrap justify-between py-2'>
<div className='flex flex-wrap lg:flex-nowrap lg:space-x-2 justify-between py-2'>
{/* <Link href={prev.slug}> */}
{/* <div>上一篇:<a className='py-1 underline cursor-pointer ml-1'>{prev.title}</a></div> */}
{/* </Link> */}
@@ -161,16 +161,12 @@ const ArticleLayout = ({
</article>
</div>
<RightWidget post={frontMatter} />
{/* <RightWidget post={frontMatter} /> */}
{/* <ShareButton post={frontMatter}/> */}
{/* <TopJumper /> */}
</main>
{/* 右侧内容 */}
<RightAside toc={frontMatter.toc} />
<RightAside toc={frontMatter.toc} post={frontMatter} />
</div>
</div>

20
layouts/DefaultLayout.js
View File

@@ -44,12 +44,12 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
showNext = page * BLOG.postsPerPage < totalPosts
}
// 首页隐藏看板娘
useEffect(() => {
const ref = document.getElementById('waifu')
if (ref) {
ref.remove()
}
// 首页隐藏看板娘
// const ref = document.getElementById('waifu')
// if (ref) {
// ref.remove()
// }
window.addEventListener('resize', resizeWindowHideToc)
resizeWindowHideToc()
return () => {
@@ -58,7 +58,11 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
}, [])
const resizeWindowHideToc = throttle(() => {
if (window.innerWidth > 1300) {
if (window.innerWidth > 2500) {
changeColumn(5)
} else if (window.innerWidth > 1800) {
changeColumn(4)
} else if (window.innerWidth > 1300) {
changeColumn(3)
} else if (window.innerWidth < 768) {
changeColumn(1)
@@ -80,7 +84,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
<div className={`${BLOG.font} flex bg-gray-100 dark:bg-black min-h-screen`}>
<SideBar tags={tags} currentTag={currentTag} />
<main className='md:pb-10 md:px-24 p-5 flex-grow'>
<main className='md:px-24 p-5 flex-grow'>
{(!page || page === 1) && (
<div className='py-5' />
)
@@ -110,7 +114,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
{/* 文章列表 */}
<div className='mx-auto animate__animated animate__fadeIn'>
{/* <div className='col-4 grid md:grid-cols-2 grid-cols-1 gap-6'> */}
<div style={{ columnCount: column, columnGap: '2rem' }}>
<div style={{ columnCount: column }} className=''>
{!postsToShow.length && (
<p className='text-gray-500 dark:text-gray-300 textc'>No posts found.</p>
)}