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

一点动效

Browse Source
This commit is contained in:
tangly1024
2022-12-27 11:28:20 +08:00
parent 35e2a282d3
commit f57e804bcf
3 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ThemeSwitch.js
View File

@@ -19,7 +19,7 @@ export function ThemeSwitch() {
<div className="p-2 flex items-center"> <div className="p-2 flex items-center">
<i className='fas fa-arrows cursor-move px-2' /> <i className='fas fa-arrows cursor-move px-2' />
{/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */} {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
<select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase'> <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
{ALL_THEME.map(t => { {ALL_THEME.map(t => {
const selected = t === theme const selected = t === theme
return <option key={t} value={t} selected={selected}>{t}</option> return <option key={t} value={t} selected={selected}>{t}</option>

25
themes/matery/LayoutSlug.js
View File

@@ -51,7 +51,13 @@ export const LayoutSlug = props => {
{!lock && <div id="container" className="overflow-x-auto md:w-full px-3 "> {!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
{post?.type === 'Post' && <> {post?.type === 'Post' && <>
<div className='px-10'> <div
data-aos="fade-down"
data-aos-duration="500"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='px-10'>
<ArticleInfo post={post} /> <ArticleInfo post={post} />
</div> </div>
<hr /> <hr />
@@ -60,7 +66,14 @@ export const LayoutSlug = props => {
<div className='lg:px-10 '> <div className='lg:px-10 '>
<article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" > <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
{/* Notion文章主体 */} {/* Notion文章主体 */}
<section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'> <section id='notion-article'
data-aos-delay="200"
data-aos="fade-down"
data-aos-duration="500"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='justify-center mx-auto max-w-2xl lg:max-w-full'>
{post && <NotionPage post={post} />} {post && <NotionPage post={post} />}
</section> </section>
@@ -92,7 +105,13 @@ export const LayoutSlug = props => {
{post.type === 'Post' && <ArticleAdjacent {...props} />} {post.type === 'Post' && <ArticleAdjacent {...props} />}
{post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden' > {post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden' >
<div className='relative h-full'> <div data-aos-delay="200"
data-aos="fade-down"
data-aos-duration="500"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='relative h-full'>
<div className='float-right -mr-72 h-full mt-40'> <div className='float-right -mr-72 h-full mt-40'>
<div className='sticky top-24'> <div className='sticky top-24'>
<Catalog toc={post.toc} /> <Catalog toc={post.toc} />

8
themes/matery/components/HeaderArticle.js
View File

@@ -2,7 +2,13 @@ export default function HeaderArticle({ post, siteInfo }) {
const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover
const title = post?.title const title = post?.title
return ( return (
<div id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black"> <div
data-aos="fade-down"
data-aos-duration="500"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-center"
id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={headerImage} src={headerImage}