Merge pull request #139 from tangly1024/preview

Preview
This commit is contained in:
tangly1024
2022-04-02 10:36:01 +08:00
committed by GitHub
15 changed files with 24 additions and 25 deletions

View File

@@ -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] 文章列表样式:页码分页、单页滚动加载

View File

@@ -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`} />

View File

@@ -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>

View File

@@ -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}/>

View File

@@ -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}

View File

@@ -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>
)

View File

@@ -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>
}

View File

@@ -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>
)

View File

@@ -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'
/**
* 文章列表分页表格

View File

@@ -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}>

View File

@@ -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/>

View File

@@ -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}%` }}

View File

@@ -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}/>
{/* 顶部菜单 */}

View File

@@ -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>

View File

@@ -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'>