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

matery 公告模块调整

Browse Source
This commit is contained in:
tangly1024.com
2023-05-04 18:24:47 +08:00
parent 2db7b473dd
commit 0319acea70
13 changed files with 134 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/DebugPanel.js
View File

@@ -58,7 +58,7 @@ export function DebugPanel() {
<div>
<div
style={{ writingMode: 'vertical-lr' }}
className={`bg-black text-xs text-white shadow-2xl p-1.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-56 duration-200 z-50`}
className={`bg-black text-xs text-white shadow-2xl p-1.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-72 duration-200 z-50`}
onClick={toggleShow}
>
{show

3
lib/lang/en-US.js
View File

@@ -39,7 +39,8 @@ export default {
DEBUG_OPEN: 'Debug',
DEBUG_CLOSE: 'Close',
THEME_SWITCH: 'Theme Switch',
ANNOUNCEMENT: 'Announcement'
ANNOUNCEMENT: 'Announcement',
START_READING: 'Start Reading'
},
PAGINATION: {
PREV: 'Prev',

3
lib/lang/zh-CN.js
View File

@@ -41,7 +41,8 @@ export default {
DEBUG_OPEN: '开启调试',
DEBUG_CLOSE: '关闭调试',
THEME_SWITCH: '切换主题',
ANNOUNCEMENT: '公告'
ANNOUNCEMENT: '公告',
START_READING: '开始阅读'
},
PAGINATION: {
PREV: '上一页',

19
themes/matery/LayoutBase.js
View File

@@ -51,9 +51,15 @@ const LayoutBase = props => {
{headerSlot}
<main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24 relative">
{/* 嵌入区域 */}
<div id="container-slot" className={`w-full max-w-6xl ${props?.post && ' lg:max-w-3xl 2xl:max-w-4xl '} mt-6 px-3 mx-auto lg:flex lg:space-x-4 justify-center relative z-10`}>
{props.containerSlot}
</div>
<div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
{onLoading ? <LoadingCover /> : children}
</div>
</main>
{/* 左下角悬浮 */}
@@ -61,15 +67,12 @@ const LayoutBase = props => {
<Live2D />
</div>
<div className="bottom-40 right-2 fixed justify-end z-20">
<FloatDarkModeButton />
</div>
{/* 右下角悬浮 */}
<div className={ (show ? ' opacity-100 fixed ' : ' hidden opacity-0 ') + ' transition-all duration-200 bottom-12 right-2 justify-end z-20' }>
<div className= ' justify-center flex flex-col items-center cursor-pointer '>
<JumpToTopButton />
</div>
<div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
<FloatDarkModeButton />
<JumpToTopButton />
{/* 可扩展的右下角悬浮 */}
{props.floatRightBottom}
</div>
<Footer title={siteInfo?.title || BLOG.TITLE} />

3
themes/matery/LayoutIndex.js
View File

@@ -5,9 +5,10 @@ import Header from './components/Header'
import CONFIG_MATERY from './config_matery'
import LayoutBase from './LayoutBase'
import React from 'react'
import Announcement from './components/Announcement'
export const LayoutIndex = (props) => {
return <LayoutBase {...props} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Header {...props} />}>
return <LayoutBase {...props} containerSlot={ <Announcement {...props}/>} headerSlot={CONFIG_MATERY.HOME_BANNER_ENABLE && <Header {...props} />}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</LayoutBase>
}

133
themes/matery/LayoutSlug.js
View File

@@ -11,6 +11,7 @@ import Catalog from './components/Catalog'
import JumpToCommentButton from './components/JumpToCommentButton'
import throttle from 'lodash.throttle'
import ShareBar from '@/components/ShareBar'
import Announcement from './components/Announcement'
export const LayoutSlug = props => {
const { post, lock, validPassword } = props
@@ -25,6 +26,7 @@ export const LayoutSlug = props => {
switchShow(shouldShow)
}
}, throttleMs))
useEffect(() => {
document.addEventListener('scroll', scrollListener)
return () => document.removeEventListener('scroll', scrollListener)
@@ -44,85 +46,82 @@ export const LayoutSlug = props => {
{...props}
showCategory={false}
showTag={false}
floatRightBottom={<JumpToCommentButton />}
>
<div id='inner-wrapper'>
<div className={'w-full lg:max-w-3xl 2xl:max-w-4xl'}>
<div className="-mt-32 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
{lock && <ArticleLock validPassword={validPassword} />}
<div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >
{/* 文章主体卡片 */}
<div className="-mt-32 transition-all duration-300 rounded-md mx-3 lg:border lg:rounded-xl lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
{post?.type && post?.type === 'Post' && <>
<div
data-aos="fade-down"
data-aos-duration="100"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='px-10'>
<ArticleInfo post={post} />
</div>
<hr />
</>}
<div className='lg:px-10 subpixel-antialiased'>
<article itemScope >
{/* Notion文章主体 */}
<section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'>
{post && <NotionPage post={post} />}
</section>
<section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600 dark:text-gray-400">
{/* 文章内嵌广告 */}
<ins className="adsbygoogle"
style={{ display: 'block', textAlign: 'center' }}
data-adtest="on"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2708419466378217"
data-ad-slot="3806269138" />
</section>
{/* 分享 */}
<ShareBar post={post} />
{/* 文章版权说明 */}
{post.type === 'Post' && <ArticleCopyright {...props} />}
</article>
<hr className='border-dashed' />
{/* 评论互动 */}
<div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
<Comment frontMatter={post} />
</div>
{!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
{post?.type && post?.type === 'Post' && <>
<div
data-aos="fade-down"
data-aos-duration="100"
data-aos-once="false"
data-aos-anchor-placement="top-center"
className='px-10'>
<ArticleInfo post={post} />
</div>
<hr />
</>}
</div>}
</div>
<div className='lg:px-10 subpixel-antialiased'>
<article itemScope >
{/* Notion文章主体 */}
<section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'>
{post && <NotionPage post={post} />}
</section>
{/* 文章推荐 */}
{post.type === 'Post' && <ArticleAdjacent {...props} />}
<section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600 dark:text-gray-400">
{/* 文章内嵌广告 */}
<ins className="adsbygoogle"
style={{ display: 'block', textAlign: 'center' }}
data-adtest="on"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2708419466378217"
data-ad-slot="3806269138" />
</section>
{/* 分享 */}
<ShareBar post={post} />
{/* 文章版权说明 */}
{post.type === 'Post' && <ArticleCopyright {...props} />}
{/* 文章目录 */}
{post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
<div data-aos-delay="200"
data-aos="fade-down"
data-aos-duration="200"
data-aos-once="true"
data-aos-anchor-placement="top-center"
className='relative h-full'>
<div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
<div className='sticky top-24'>
<Catalog toc={post.toc} />
</div>
</article>
<hr className='border-dashed' />
{/* 评论互动 */}
<div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
<Comment frontMatter={post} />
</div>
</div>
</div>}
</div>
<div className='fixed bottom-28 right-4'>
<JumpToCommentButton />
</div>
{/* 底部文章推荐 */}
{post.type === 'Post' && <ArticleAdjacent {...props} />}
<Announcement {...props}/>
{/* 右侧文章目录 */}
{post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden lg:max-w-3xl 2xl:max-w-4xl' >
<div data-aos-delay="200"
data-aos="fade-down"
data-aos-duration="200"
data-aos-once="true"
data-aos-anchor-placement="top-center"
className='relative h-full'>
<div className='float-right xl:-mr-72 xl:w-72 w-56 -mr-56 h-full mt-40'>
<div className='sticky top-24'>
<Catalog toc={post.toc} />
</div>
</div>
</div>
</div>}
</div>

29
themes/matery/components/Announcement.js Normal file
View File

@@ -0,0 +1,29 @@
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
const NotionPage = dynamic(() => import('@/components/NotionPage'))
const Announcement = ({ notice }) => {
const { locale } = useGlobal()
if (!notice) {
return <></>
}
return <>
<div
data-aos="zoom-in"
data-aos-duration="500"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
className="w-full mb-4 p-2 overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
<div className="text-sm flex flex-nowrap justify-between">
<div className="font-light text-gray-600 dark:text-gray-200">
<i className="mx-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
</div>
</div>
{notice && (<div id="announcement-content">
<NotionPage post={notice} className='text-center ' />
</div>)}
</div>
</>
}
export default Announcement

2
themes/matery/components/BlogPostListPage.js
View File

@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
<div id="container" className='w-full'>
<div className='pt-6'></div>
{/* 文章列表 */}
<div className="pt-4 flex flex-wrap pb-24" >
<div className="pt-4 flex flex-wrap pb-12" >
{posts.map(post => (
<div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'> <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} /></div>
))}

2
themes/matery/components/BlogPostListScroll.js
View File

@@ -57,7 +57,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
return <div id='container' ref={targetRef} className='w-full'>
{/* 文章列表 */}
<div className="pt-4 flex flex-wrap pb-24" >
<div className="pt-4 flex flex-wrap pb-12" >
{postsToShow.map(post => (
<div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'>
<BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} />

5
themes/matery/components/FloatDarkModeButton.js
View File

@@ -21,9 +21,8 @@ export default function FloatDarkModeButton() {
return (
<div className={'justify-center items-center text-center' } onClick={handleChangeDarkMode}>
<i id="darkModeButton"
className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas transform hover:scale-105 duration-200
text-2xl text-white bg-indigo-700 px-3 py-2.5 rounded-full dark:bg-black cursor-pointer`} />
<i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas transform hover:scale-105 duration-200
text-white bg-indigo-700 w-10 h-10 py-2.5 rounded-full dark:bg-black cursor-pointer`} />
</div>
)
}

7
themes/matery/components/Header.js
View File

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react'
import Typed from 'typed.js'
import CONFIG_MATERY from '../config_matery'
import throttle from 'lodash.throttle'
import { useGlobal } from '@/lib/global'
let wrapperTop = 0
let windowTop = 0
@@ -17,6 +18,8 @@ const throttleMs = 200
const Header = props => {
const [typed, changeType] = useState()
const { siteInfo } = props
const { locale } = useGlobal()
useEffect(() => {
scrollTrigger()
updateHeaderHeight()
@@ -96,8 +99,8 @@ const Header = props => {
<span id='typed' />
</div>
<div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl">
<i className='animate-bounce fas fa-angle-double-down' /> <span>开始阅读</span>
className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl z-40">
<i className='animate-bounce fas fa-angle-double-down' /> <span>{locale.COMMON.START_READING}</span>
</div>
</div>

9
themes/matery/components/JumpToCommentButton.js
View File

@@ -17,11 +17,10 @@ const JumpToCommentButton = () => {
}
}
return (<div
onClick={navToComment}
className='flex space-x-1 items-center justify-center cursor-pointer transform hover:scale-105 duration-200 w-7 h-7 text-center'>
<i className='fas fa-comments text-xl text-white bg-indigo-700 py-3 px-2 rounded-full' />
</div>)
return <div className={'justify-center items-center text-center'} onClick={navToComment}>
<i id="darkModeButton" className={`fas fa-comments transform hover:scale-105 duration-200 text-white
text-sm bg-indigo-700 w-10 h-10 rounded-full dark:bg-black cursor-pointer py-3`} />
</div>
}
export default JumpToCommentButton

13
themes/matery/components/JumpToTopButton.js
View File

@@ -16,11 +16,14 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
if (!CONFIG_MATERY.WIDGET_TO_TOP) {
return <></>
}
return (<div className=' drop-shadow-md space-x-1 items-center justify-center transform hover:scale-105 duration-200 px-3 py-2 text-center text-white bg-indigo-700 dark:bg-hexo-black-gray rounded-full'
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
<div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-2xl rounded-full' /></div>
{showPercent && (<div className='text-md hidden lg:block'>{percent}</div>)}
</div>)
return <div data-aos="fade-left"
data-aos-duration="300"
data-aos-anchor-placement="top-center"
className={'justify-center items-center text-center'} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
<i id="darkModeButton" title={locale.POST.TOP} className={`fas fa-arrow-up transform hover:scale-105 duration-200 text-white
bg-indigo-700 w-10 h-10 rounded-full dark:bg-black cursor-pointer py-2.5`} />
</div>
}
export default JumpToTopButton