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

404

Browse Source
This commit is contained in:
tangly1024
2023-07-15 23:07:10 +08:00
parent dbba49b767
commit 0eed0eea40
2 changed files with 76 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
themes/heo/components/LatestPostsGroup.js
View File

@@ -1,8 +1,6 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
// import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
/**
* 最新文章列表
@@ -12,61 +10,41 @@ import { useRouter } from 'next/router'
*/
const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
// 获取当前路径
const currentPath = useRouter().asPath
const { locale } = useGlobal()
if (!latestPosts) {
return <></>
}
return <>
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div>
<i className="mr-2 fas fas fa-history" />
{locale.COMMON.LATEST_POSTS}
</div>
</div>
return <div className='grid grid-cols-2 gap-4'>
{latestPosts.map(post => {
const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
return (
(<Link
key={post.id}
(<Link key={post.id} passHref
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={'my-3 flex'}>
<div className="w-20 h-14 overflow-hidden relative">
{/* <Image
src={headerImage}
fill
style={{ objectFit: 'cover' }}
placeholder='blur'
blurDataURL='/bg_image.jpg'
quality={10}
alt={post.title} /> */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={`${headerImage}`} className='object-cover w-full h-full'/>
className={'my-3 flex flex-col w-full'}>
<div className="w-full h-24 md:h-60 overflow-hidden relative rounded-lg mb-2">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={`${headerImage}`} className='object-cover w-full h-full' />
</div>
<div
className={
(selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
' hover:text-indigo-400 cursor-pointer items-center flex'
' font-bold overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
' hover:text-indigo-400 cursor-pointer'
}
>
<div>
<div className='line-clamp-2 menu-link'>{post.title}</div>
<div className="text-gray-500">{post.lastEditedTime}</div>
</div>
<div className='line-clamp-2 menu-link'>{post.title}</div>
</div>
</Link>)
)
})}
</>
</div>
}
export default LatestPostsGroup

92
themes/heo/index.js
View File

@@ -31,6 +31,7 @@ import { Transition } from '@headlessui/react'
import { Style } from './style'
import { NoticeBar } from './components/NoticeBar'
import { HashTag } from '@/components/HeroIcons'
import LatestPostsGroup from './components/LatestPostsGroup'
/**
* 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -128,14 +129,15 @@ const LayoutIndex = (props) => {
const LayoutPostList = (props) => {
// 右侧栏
const slotRight = <SideRight {...props} />
const headerSlot = <header>
{/* 顶部导航 */}
<div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
</header>
return <LayoutBase {...props} slotRight={slotRight}>
return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page'
? <BlogPostListPage {...props} />
: <BlogPostListScroll {...props} />}
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</LayoutBase>
}
@@ -262,33 +264,63 @@ const LayoutSlug = props => {
* @returns
*/
const Layout404 = props => {
const router = useRouter()
useEffect(() => {
// 延时3秒如果加载失败就返回首页
setTimeout(() => {
if (isBrowser()) {
const article = document.getElementById('notion-article')
if (!article) {
router.push('/').then(() => {
// console.log('找不到页面', router.asPath)
})
}
}
}, 3000)
})
const { meta, siteInfo } = props
const { onLoading } = useGlobal()
return (
<LayoutBase {...props}>
<div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
<div className="dark:text-gray-200">
<h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
404
</h2>
<div className="inline-block text-left h-32 leading-10 items-center">
<h2 className="m-0 p-0">页面未找到</h2>
</div>
<div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col overflow-hidden'>
{/* 网页SEO */}
<CommonHead meta={meta} siteInfo={siteInfo} />
<Style />
{/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
<header>
{/* 顶部导航 */}
<div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
</header>
{/* 主区块 */}
<main id="wrapper-outer" className={'flex-grow max-w-4xl w-screen mx-auto px-5'}>
<div id="error-wrapper" className={'w-full mx-auto justify-center'} >
<Transition
show={!onLoading}
appear={true}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 translate-y-16"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-16"
unmount={false}
>
{/* 404卡牌 */}
<div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-2xl'>
{/* 左侧动图 */}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
{/* 右侧文字 */}
<div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
<h1 className='error-title font-extrabold md:text-9xl text-7xl'>404</h1>
<div>请尝试站内搜索寻找文章</div>
<Link href='/'>
<button className='bg-blue-500 p-2 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all'>回到主页</button>
</Link>
</div>
</div>
{/* 404页面底部显示最新文章 */}
<div className='mt-12'>
<LatestPostsGroup {...props} />
</div>
</Transition>
</div>
</div>
</LayoutBase>
</main>
</div>
)
}