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

💅 微调 样式

Browse Source
This commit is contained in:
tangly1024
2021-09-28 20:57:26 +08:00
parent 4354f3650b
commit 5b4df90c97
5 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/Comment.js
View File

@@ -1,6 +1,8 @@
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import { useTheme } from '@/lib/theme'
import { useEffect, useState } from 'react'
const GitalkComponent = dynamic(
() => {
@@ -23,6 +25,7 @@ const CusdisComponent = dynamic(
const Comment = ({ frontMatter }) => {
const router = useRouter()
const { theme } = useTheme()
return <div className='comment text-gray-800 dark:text-gray-300'>
<div className='font-bold pt-2 pb-4 '>留下评论</div>
@@ -55,7 +58,7 @@ const Comment = ({ frontMatter }) => {
pageId: frontMatter.id,
pageTitle: frontMatter.title,
pageUrl: BLOG.link + router.asPath,
theme: BLOG.appearance
theme: theme
}}
lang={BLOG.lang.toLowerCase()}
/>

2
components/DarkModeButton.js
View File

@@ -8,7 +8,7 @@ const DarkModeButton = () => {
changeTheme(newTheme)
localStorage.setItem('theme', newTheme)
}
return <div className='p-1 border dark:border-gray-500 my-4 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
return <div className='z-10 p-1 border dark:border-gray-500 mr-2 h-12 my-2 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
<i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o') } onClick={handleChangeDarkMode} />
</div>
}

12
components/RightAside.js
View File

@@ -22,17 +22,15 @@ const RightAside = ({ toc, post }) => {
changeHideAside(true)
}
}, 500)
const [hideAside, changeHideAside] = useState(false)
const [hideAside, changeHideAside] = useState(true)
return <aside className='bg-white dark:bg-gray-800 py-5'>
<div className={(hideAside ? 'w-0' : 'w-52') + ' duration-500'} />
{/* 上方菜单组 */}
<div
className={(hideAside ? 'right-0' : 'right-52') + ' space-x-2 fixed md:fixed flex top-0 px-4 py-1 duration-500'}>
className={(hideAside ? 'right-0' : 'right-48') + ' z-20 space-x-2 fixed flex top-0 px-3 py-1 duration-500'}>
{/* 目录按钮 */}
<div
className='border dark:border-gray-500 my-3 bg-white dark:bg-gray-600 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black p-1'>
className='border dark:border-gray-500 my-2 bg-white dark:bg-gray-600 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black p-1'>
<i className='fa fa-book p-2.5 hover:scale-125 transform duration-200'
onClick={() => changeHideAside(!hideAside)} />
</div>
@@ -40,7 +38,7 @@ const RightAside = ({ toc, post }) => {
{/* 下方菜单组 */}
<div
className={(hideAside ? 'right-0' : 'right-52') + ' space-x-2 fixed flex bottom-10 px-4 py-1 duration-500'}>
className={(hideAside ? 'right-0' : 'right-48') + ' space-x-2 fixed flex bottom-10 px-4 py-1 duration-500'}>
<div className='flex-wrap'>
{/* 分享按钮 */}
<ShareButton post={post} />
@@ -51,7 +49,7 @@ const RightAside = ({ toc, post }) => {
{/* 目录 */}
<div
className={(hideAside ? '-mr-52' : 'mr-0 shadow-xl xl:shadow-none') + ' h-full hover:shadow-2xl bg-white w-52 right-0 dark:bg-gray-800 duration-500 fixed top-0 pt-8'}>
className={(hideAside ? '-mr-48' : 'mr-0 shadow-xl xl:shadow-none') + ' fixed h-full hover:shadow-2xl bg-white w-48 right-0 dark:bg-gray-800 duration-500 top-0 pt-8'}>
<TocBar toc={toc} />
</div>

11
components/SideBar.js
View File

@@ -41,6 +41,7 @@ const SideBar = ({ tags, currentTag }) => {
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' hover:shadow-2xl dark:bg-gray-800 bg-white sidebar h-full w-60 duration-500 ease-in-out'}>
{/* Logo */}
<section className='mx-5 pt-6 pb-2 border-b'>
<Link href='/'>
<a
@@ -48,6 +49,7 @@ const SideBar = ({ tags, currentTag }) => {
</Link>
</section>
{/* 地理标志 */}
<section className='text-gray-500 text-sm px-7 pt-3 pb-5 dark:text-gray-300'>
<i className='fa fa-map-marker mr-1' />
Fuzhou, China
@@ -69,6 +71,7 @@ const SideBar = ({ tags, currentTag }) => {
<i className='fa fa-search text-gray-400 -ml-8' />
</div>
{/* 标签云 */}
<div className='p-6'>
<div className='mb-3'>
<span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
@@ -76,6 +79,7 @@ const SideBar = ({ tags, currentTag }) => {
<Tags tags={tags} currentTag={currentTag} />
</div>
{/* 菜单 */}
<div className='p-6'>
<div className='mb-3'>
<span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>菜单</span>
@@ -88,15 +92,16 @@ const SideBar = ({ tags, currentTag }) => {
</ul>
</div>
{/* 站点信息 */}
<Footer />
</div>
{/* 顶部菜单按钮 */}
<div
className={(collapse ? 'left-0' : 'left-60') + ' fixed flex-wrap top-0 px-4 py-1 duration-500 ease-in-out'}>
className={(collapse ? 'left-0' : 'left-60') + ' fixed flex flex-nowrap md:flex-col top-0 pl-4 py-1 duration-500 ease-in-out'}>
{/* 菜单折叠 */}
<div className='p-1 border dark:border-gray-500 my-3 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
<div className='z-30 p-1 border dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
<i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200' onClick={() => changeCollapse(!collapse)} />
</div>
{/* 夜间模式 */}

2
layouts/ArticleLayout.js
View File

@@ -57,7 +57,7 @@ const ArticleLayout = ({
{/* 中央区域 wrapper */}
<div>
<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'>
<header className='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' }}