mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
修复部分样式问题
This commit is contained in:
@@ -2,6 +2,7 @@ import { useState } from 'react'
|
||||
import Collapse from './Collapse'
|
||||
import GroupMenu from './GroupMenu'
|
||||
import Logo from './Logo'
|
||||
import SearchInput from './SearchInput'
|
||||
|
||||
/**
|
||||
* 顶部导航
|
||||
@@ -21,13 +22,14 @@ const TopNav = props => {
|
||||
<div id='sticky-nav' className={'lg:relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
|
||||
<Collapse isOpen={isOpen}>
|
||||
<div className='py-1 px-5'>
|
||||
<GroupMenu {...props}/>
|
||||
</div>
|
||||
<GroupMenu {...props} />
|
||||
<SearchInput {...props} />
|
||||
</div>
|
||||
</Collapse>
|
||||
<div className='w-full flex justify-between items-center p-4 '>
|
||||
{/* 左侧LOGO 标题 */}
|
||||
<div className='flex flex-none flex-grow-0'>
|
||||
<Logo {...props}/>
|
||||
<Logo {...props} />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
</div>
|
||||
@@ -35,8 +37,8 @@ const TopNav = props => {
|
||||
{/* 右侧功能 */}
|
||||
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
|
||||
<div onClick={toggleMenuOpen} className='w-18 cursor-pointer'>
|
||||
菜单 { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
|
||||
</div>
|
||||
菜单 {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ const FUKA_CONFIG = {
|
||||
MENU_CATEGORY: true, // 显示分类
|
||||
MENU_TAG: true, // 显示标签
|
||||
MENU_ARCHIVE: true, // 显示归档
|
||||
MENU_SEARCH: true // 显示搜索
|
||||
MENU_SEARCH: false // 显示搜索
|
||||
|
||||
}
|
||||
export default FUKA_CONFIG
|
||||
|
||||
@@ -63,7 +63,7 @@ export default function HeaderArticle({ post, siteInfo }) {
|
||||
<div className='dark:text-gray-200'>
|
||||
{post.category && <>
|
||||
<Link href={`/category/${post.category}`} passHref>
|
||||
<div className="cursor-pointer mr-2 dark:hover:text-white border-b dark:border-gray-500 border-dashed">
|
||||
<div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
|
||||
<i className="mr-1 fas fa-folder-open" />
|
||||
{post.category}
|
||||
</div>
|
||||
@@ -77,7 +77,7 @@ export default function HeaderArticle({ post, siteInfo }) {
|
||||
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
|
||||
passHref
|
||||
>
|
||||
<a className="pl-1 mr-2 cursor-pointer border-b dark:border-gray-500 border-dashed">
|
||||
<a className="pl-1 mr-2 cursor-pointer hover:underline">
|
||||
{locale.COMMON.POST_TIME}: {date}
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
@@ -10,7 +10,7 @@ export const LayoutIndex = (props) => {
|
||||
const { latestPosts } = props
|
||||
const rightAreaSlot = CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup latestPosts={latestPosts} /></Card>
|
||||
return <LayoutBase
|
||||
headerSlot={CONFIG_NEXT.HOME_BANNER && <Header />}
|
||||
headerSlot={CONFIG_NEXT.HOME_BANNER && <Header {...props} />}
|
||||
sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
|
||||
rightAreaSlot={rightAreaSlot}
|
||||
{...props}
|
||||
|
||||
@@ -11,7 +11,8 @@ let autoScroll = false
|
||||
*
|
||||
* @returns 头图
|
||||
*/
|
||||
export default function Header () {
|
||||
export default function Header(props) {
|
||||
const { siteInfo } = props
|
||||
const [typed, changeType] = useState()
|
||||
useEffect(() => {
|
||||
if (!typed && window && document.getElementById('typed')) {
|
||||
@@ -71,7 +72,7 @@ export default function Header () {
|
||||
}
|
||||
}
|
||||
|
||||
function updateHeaderHeight () {
|
||||
function updateHeaderHeight() {
|
||||
setTimeout(() => {
|
||||
if (window) {
|
||||
const wrapperElement = document.getElementById('wrapper')
|
||||
@@ -97,11 +98,11 @@ export default function Header () {
|
||||
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
|
||||
style={{
|
||||
backgroundImage:
|
||||
`linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${CONFIG_NEXT.HOME_BANNER_IMAGE}")`
|
||||
`linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo.pageCover}")`
|
||||
}}
|
||||
>
|
||||
<div className="absolute flex h-full items-center lg:-mt-14 justify-center w-full text-4xl md:text-7xl text-white">
|
||||
<div id='typed' className='flex text-center font-serif'/>
|
||||
<div id='typed' className='flex text-center font-serif' />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
@@ -109,7 +110,7 @@ export default function Header () {
|
||||
}}
|
||||
className="cursor-pointer w-full text-center py-4 text-5xl absolute bottom-10 text-white"
|
||||
>
|
||||
<i className='animate-bounce fas fa-angle-down'/>
|
||||
<i className='animate-bounce fas fa-angle-down' />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
@@ -2,12 +2,12 @@ import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
const Logo = props => {
|
||||
const { siteInfo } = props
|
||||
const { siteInfo, className } = props
|
||||
return <Link href='/' passHref>
|
||||
<div className='flex flex-col justify-center items-center cursor-pointer bg-black space-y-3 h-32 font-bold'>
|
||||
<div className='font-serif text-xl text-white'> {siteInfo?.title}</div>
|
||||
<div className='text-sm text-gray-300 font-light'> {siteInfo?.description}</div>
|
||||
</div>
|
||||
<div className={'flex flex-col justify-center items-center cursor-pointer bg-black space-y-3 font-bold ' + className}>
|
||||
<div className='font-serif text-xl text-white'> {siteInfo?.title}</div>
|
||||
<div className='text-sm text-gray-300 font-light'> {siteInfo?.description}</div>
|
||||
</div>
|
||||
</Link>
|
||||
}
|
||||
export default Logo
|
||||
|
||||
@@ -27,22 +27,22 @@ const SideAreaLeft = props => {
|
||||
<section className='w-60'>
|
||||
{/* 菜单 */}
|
||||
<section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
|
||||
<Logo {...props}/>
|
||||
<Logo {...props} className='h-32' />
|
||||
<div className='pt-2 px-2 font-sans'>
|
||||
<MenuButtonGroup allowCollapse={true} {...props} />
|
||||
<MenuButtonGroup allowCollapse={true} {...props} />
|
||||
</div>
|
||||
{CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
|
||||
<SearchInput {...props} />
|
||||
<SearchInput {...props} />
|
||||
</div>}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div className='sticky top-4 hidden lg:block'>
|
||||
<Card>
|
||||
<Tabs>
|
||||
<Card>
|
||||
<Tabs>
|
||||
{showToc && (
|
||||
<div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
|
||||
<Toc toc={post.toc}/>
|
||||
<Toc toc={post.toc} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -52,21 +52,21 @@ const SideAreaLeft = props => {
|
||||
<div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
|
||||
<span className='px-1 '>
|
||||
<strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
|
||||
<span className='px-1 busuanzi_container_site_uv hidden'>
|
||||
| <strong className='pl-1 busuanzi_value_site_uv font-medium'/>{locale.COMMON.VISITORS}</span>
|
||||
{/* <span className='px-1 busuanzi_container_site_pv hidden'>
|
||||
<span className='px-1 busuanzi_container_site_uv hidden'>
|
||||
| <strong className='pl-1 busuanzi_value_site_uv font-medium' />{locale.COMMON.VISITORS}</span>
|
||||
{/* <span className='px-1 busuanzi_container_site_pv hidden'>
|
||||
| <strong className='pl-1 busuanzi_value_site_pv font-medium'/>{locale.COMMON.VIEWS}</span> */}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</Tabs>
|
||||
</Card>
|
||||
</Tabs>
|
||||
</Card>
|
||||
|
||||
{slot && <div className='flex justify-center'>
|
||||
{slot}
|
||||
</div>}
|
||||
</div>
|
||||
{slot && <div className='flex justify-center'>
|
||||
{slot}
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</aside>
|
||||
}
|
||||
export default SideAreaLeft
|
||||
|
||||
Reference in New Issue
Block a user