mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 15:09:22 +00:00
@@ -19,7 +19,7 @@ const BLOG = {
|
||||
FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
|
||||
FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ,国内推荐BootCDN,国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
|
||||
BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
|
||||
BACKGROUND_DARK: '#111827', // use hex value, don't forget '#'
|
||||
BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
|
||||
PATH: '', // leave this empty unless you want to deploy in a folder
|
||||
|
||||
POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
|
||||
|
||||
@@ -32,8 +32,8 @@ const LayoutBase = props => {
|
||||
<div className='dark:text-gray-300'>
|
||||
<CommonHead meta={meta} />
|
||||
{/* 导航菜单 */}
|
||||
<div className="w-full flex justify-center my-2">
|
||||
<div className=" max-w-6xl justify-between w-full flex">
|
||||
<div className="w-full flex justify-center my-2 text-xs md:text-base px-5">
|
||||
<div className="max-w-6xl justify-between w-full flex">
|
||||
<section>
|
||||
<Link title={siteInfo.title} href={'/'}>
|
||||
<a className={'cursor-pointer flex items-center hover:underline'}>
|
||||
@@ -42,14 +42,14 @@ const LayoutBase = props => {
|
||||
</a>
|
||||
</Link>
|
||||
</section>
|
||||
<nav className="space-x-3 flex">
|
||||
<nav className="space-x-3 flex flex-nowrap overflow-x-auto">
|
||||
{links.map(link => {
|
||||
if (link) {
|
||||
return (
|
||||
<Link key={`${link.to}`} title={link.to} href={link.to}>
|
||||
<a
|
||||
className={
|
||||
'cursor-pointer flex items-center hover:underline'
|
||||
'cursor-pointer flex whitespace-nowrap items-center hover:underline'
|
||||
}
|
||||
>
|
||||
<i className={`${link.icon} mr-1`} />
|
||||
|
||||
@@ -18,7 +18,7 @@ export const LayoutIndex = props => {
|
||||
return (
|
||||
<LayoutBase {...props}>
|
||||
{posts.map(p => (
|
||||
<div key={p.id} className='border p-4 my-12'>
|
||||
<div key={p.id} className='border dark:border-hexo-black-gray p-4 my-12'>
|
||||
<Link href={`/article/${p.slug}`}>
|
||||
<a className='underline cursor-pointer'>{p.title}</a>
|
||||
</Link>
|
||||
|
||||
@@ -18,13 +18,13 @@ const TopNav = props => {
|
||||
return (<div id='top-nav' className='z-40 block lg:hidden'>
|
||||
|
||||
{/* 导航栏 */}
|
||||
<div id='sticky-nav' className={'lg:relative w-full top-0 z-20 transform duration-500'}>
|
||||
<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='bg-white py-1 px-5'>
|
||||
<div className='py-1 px-5'>
|
||||
<GroupMenu {...props}/>
|
||||
</div>
|
||||
</Collapse>
|
||||
<div className='w-full flex justify-between items-center p-4 bg-white'>
|
||||
<div className='w-full flex justify-between items-center p-4 '>
|
||||
{/* 左侧LOGO 标题 */}
|
||||
<div className='flex flex-none flex-grow-0'>
|
||||
<Logo {...props}/>
|
||||
|
||||
@@ -24,7 +24,7 @@ const LayoutBase = props => {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<div className='bg-white dark:bg-gray-800 w-full h-full min-h-screen justify-center dark:text-gray-300'>
|
||||
<div className='bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300'>
|
||||
<CommonHead meta={meta} />
|
||||
<main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
|
||||
{/* 桌面端左侧菜单 */}
|
||||
@@ -40,7 +40,7 @@ const LayoutBase = props => {
|
||||
</div>
|
||||
|
||||
{/* 桌面端右侧 */}
|
||||
<div className='hidden xl:block border-l dark:border-gray-500 w-96'>
|
||||
<div className='hidden xl:block border-l dark:border-transparent w-96'>
|
||||
<div className='py-14 px-6 sticky top-0'>
|
||||
<Tabs>
|
||||
{slotRight}
|
||||
|
||||
@@ -38,7 +38,7 @@ export const LayoutSlug = props => {
|
||||
})
|
||||
|
||||
const slotRight = post?.toc && post?.toc?.length > 3 && (
|
||||
<div key={locale.COMMON.TABLE_OF_CONTENTS} className="mt-6">
|
||||
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
|
||||
<Catalog toc={post.toc} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -35,7 +35,7 @@ export const ArticleDetail = props => {
|
||||
post?.date?.start_date || post.createdTime,
|
||||
locale.LOCALE
|
||||
)
|
||||
return <>
|
||||
return <div id='container'>
|
||||
<h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
|
||||
<section className="flex py-4 items-center font-sans px-1">
|
||||
<Link href="/about" passHref>
|
||||
@@ -98,5 +98,5 @@ export const ArticleDetail = props => {
|
||||
<ArticleAround prev={prev} next={next} />
|
||||
<Comment frontMatter={post} />
|
||||
</section>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ const BlogPostCard = ({ post, showSummary }) => {
|
||||
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
|
||||
const { locale } = useGlobal()
|
||||
return (
|
||||
<div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl '>
|
||||
<div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
|
||||
|
||||
<div className='lg:p-8 p-4 flex flex-col w-full'>
|
||||
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
|
||||
@@ -57,7 +57,6 @@ const BlogPostCard = ({ post, showSummary }) => {
|
||||
</div>
|
||||
</div> }
|
||||
</div>
|
||||
<hr className='w-full'/>
|
||||
</div>
|
||||
|
||||
)
|
||||
|
||||
@@ -2,7 +2,6 @@ import BlogPostCard from './BlogPostCard'
|
||||
import BLOG from '@/blog.config'
|
||||
import BlogPostListEmpty from './BlogPostListEmpty'
|
||||
import PaginationSimple from './PaginationSimple'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
/**
|
||||
* 文章列表分页表格
|
||||
|
||||
@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
|
||||
}, throttleMs))
|
||||
|
||||
return <div className='px-3'>
|
||||
<div className='w-full py-1'>
|
||||
<div className='w-full mt-2 mb-4'>
|
||||
<Progress/>
|
||||
</div>
|
||||
<div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
|
||||
|
||||
@@ -7,7 +7,7 @@ const Footer = ({ title }) => {
|
||||
const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
|
||||
return (
|
||||
<footer
|
||||
className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
|
||||
className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
|
||||
>
|
||||
<i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
|
||||
const [percent, changePercent] = useState(0)
|
||||
const scrollListener = () => {
|
||||
const target = currentRef || document.getElementById('container')
|
||||
console.log(target)
|
||||
if (target) {
|
||||
const clientHeight = target.clientHeight
|
||||
const scrollY = window.pageYOffset
|
||||
@@ -27,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
|
||||
}, [percent])
|
||||
|
||||
return (
|
||||
<div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
|
||||
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray font-sans">
|
||||
<div
|
||||
className="h-4 bg-gray-600 duration-200"
|
||||
style={{ width: `${percent}%` }}
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
|
||||
const router = useRouter()
|
||||
|
||||
return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
|
||||
<div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
|
||||
<div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
|
||||
<LogoBar {...props}/>
|
||||
|
||||
{/* 顶部菜单 */}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const Card = ({ children, headerSlot, className }) => {
|
||||
return <div className={className}>
|
||||
<>{headerSlot}</>
|
||||
<section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
|
||||
<section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
|
||||
{children}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ const SideAreaLeft = props => {
|
||||
|
||||
<section className='w-60'>
|
||||
{/* 菜单 */}
|
||||
<section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
|
||||
<section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
|
||||
<Logo {...props}/>
|
||||
<div className='pt-2 px-2 font-sans'>
|
||||
<MenuButtonGroup allowCollapse={true} {...props} />
|
||||
@@ -41,12 +41,12 @@ const SideAreaLeft = props => {
|
||||
<Card>
|
||||
<Tabs>
|
||||
{showToc && (
|
||||
<div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
|
||||
<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}/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
|
||||
<div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
|
||||
<InfoCard />
|
||||
<>
|
||||
<div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
|
||||
|
||||
Reference in New Issue
Block a user