announcement

This commit is contained in:
tangly1024.com
2023-02-10 17:14:05 +08:00
parent eaece6163b
commit 39865d202a
14 changed files with 144 additions and 74 deletions

View File

@@ -37,7 +37,7 @@ const Modal = dynamic(
() => import('react-notion-x/build/third-party/modal').then((m) => m.Modal), { ssr: false }
)
const NotionPage = ({ post }) => {
const NotionPage = ({ post, className }) => {
const zoom = isBrowser() && mediumZoom({
container: '.notion-viewport',
background: 'rgba(0, 0, 0, 0.2)',
@@ -80,7 +80,7 @@ const NotionPage = ({ post }) => {
return <>{post?.summary || ''}</>
}
return <div id='container' className='max-w-5xl font-medium mx-auto'>
return <div id='container' className={`max-w-5xl font-medium mx-auto ${className}`}>
<NotionRenderer
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}

View File

@@ -169,6 +169,15 @@ const mapCollectionImg = (img, value) => {
}
}
async function getNotice(post) {
if (!post) {
return null
}
post.blockMap = await getPostBlocks(post.id, 'data-notice')
return post
}
/**
* 调用NotionAPI获取Page数据
* @returns {Promise<JSX.Element|null|*>}
@@ -236,6 +245,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
})
}
const notice = await getNotice(collectionData.filter(post => { return post?.type === 'Notice' && post.status === 'Published' })?.[0])
const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema) })
const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) })
const siteInfo = getBlogInfo({ collection, block })
@@ -243,6 +253,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
return {
notice,
siteInfo,
allPages,
collection,

View File

@@ -206,3 +206,8 @@ nav {
.nobelium .notion-code{
@apply max-w-2xl;
}
.next #announcement-content *{
font-size:10px !important;
line-height:1.5 !important;
}

View File

@@ -0,0 +1,24 @@
import dynamic from 'next/dynamic'
const NotionPage = dynamic(() => import('@/components/NotionPage'))
const Announcement = ({ post, className }) => {
if (!post) {
return <></>
}
return <div
data-aos="fade-up"
data-aos-duration="600"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className={className}>
<section id='announcement-wrapper' className="hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray">
<div><i className='mr-2 fas fa-bullhorn' />公告</div>
{post && (<div id="announcement-content">
<NotionPage post={post} className='text-center ' />
</div>)}
</section>
</div>
}
export default Announcement

View File

@@ -57,8 +57,8 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
</div>
</Link>)
);
)
})}
</>;
</>
}
export default LatestPostsGroup

View File

@@ -8,6 +8,7 @@ import { AnalyticsCard } from './AnalyticsCard'
import CONFIG_HEXO from '../config_hexo'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import Announcement from './Announcement'
const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
/**
@@ -18,9 +19,8 @@ const HexoRecentComments = dynamic(() => import('./HexoRecentComments'))
export default function SideRight(props) {
const {
post, currentCategory, categories, latestPosts, tags,
currentTag, showCategory, showTag, slot
currentTag, showCategory, showTag, slot, notice
} = props
return (
<div className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
<InfoCard {...props} />
@@ -46,6 +46,8 @@ export default function SideRight(props) {
<LatestPostsGroup {...props} />
</Card>}
<Announcement post={notice}/>
{BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <HexoRecentComments/>}
<div className='sticky top-20'>

View File

@@ -69,7 +69,7 @@ const LayoutBase = (props) => {
<div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'/>
<main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-center flex-1 pb-12'}>
<main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' next relative flex justify-center flex-1 pb-12'}>
{/* 左侧栏样式 */}
<SideAreaLeft slot={leftAreaSlot} targetRef={targetRef} {...props}/>
<section id='container-inner' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-24' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full relative z-10`} ref={targetRef}>

View File

@@ -0,0 +1,21 @@
import dynamic from 'next/dynamic'
const NotionPage = dynamic(() => import('@/components/NotionPage'))
const Announcement = ({ post, className }) => {
if (!post) {
return <></>
}
return <>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between">
<div className="font-light text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-bullhorn" />
公告
</div>
</div>
{post && (<div id="announcement-content">
<NotionPage post={post} className='text-center ' />
</div>)}
</>
}
export default Announcement

View File

@@ -116,7 +116,7 @@ const BlogPostCard = ({ post, showSummary }) => {
)}
</div>
</Card>
);
)
}
export default BlogPostCard

View File

@@ -48,8 +48,8 @@ const LatestPostsGroup = ({ latestPosts }) => {
</div>
</Link>)
);
)
})}
</>;
</>
}
export default LatestPostsGroup

View File

@@ -41,7 +41,9 @@ const SideAreaLeft = props => {
{CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
<SearchInput {...props} />
</div>}
</section>
</section>
<div className='sticky top-4 hidden lg:block'>

View File

@@ -8,6 +8,7 @@ import CONFIG_NEXT from '../config_next'
import { useRouter } from 'next/router'
import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import Announcement from './Announcement'
const NextRecentComments = dynamic(() => import('./NextRecentComments'))
/**
@@ -21,82 +22,88 @@ const NextRecentComments = dynamic(() => import('./NextRecentComments'))
* @constructor
*/
const SideAreaRight = (props) => {
const { tags, currentTag, slot, categories, currentCategory } = props
const { tags, currentTag, slot, categories, currentCategory, notice } = props
const { locale } = useGlobal()
const router = useRouter()
return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' hidden 2xl:block flex-col w-60 relative z-10'}>
return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' space-y-4 hidden 2xl:block flex-col w-60 relative z-10'}>
{CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
{/* 展示广告 */}
<ins
className='adsbygoogle'
style={{ display: 'block' }}
data-adtest='on'
data-ad-client='ca-pub-2708419466378217'
data-ad-slot='8807314373'
data-ad-format='auto'
data-full-width-responsive='true'
/>
{/* 展示广告 */}
<ins
className='adsbygoogle'
style={{ display: 'block' }}
data-adtest='on'
data-ad-client='ca-pub-2708419466378217'
data-ad-slot='8807314373'
data-ad-format='auto'
data-full-width-responsive='true'
/>
</Card>}
<div className="sticky top-4">
{slot}
<div className="sticky top-0 space-y-4">
<div>
{notice && <Card>
<Announcement post={notice} />
</Card>}
</div>
{/* 分类 */}
{CONFIG_NEXT.RIGHT_CATEGORY_LIST && router.asPath !== '/category' && categories && (
<Card>
<div className='text-sm px-2 flex flex-nowrap justify-between font-light'>
<div className='pb-2 text-gray-600 dark:text-gray-300'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
<Link
href={'/category'}
passHref
className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{slot}
{locale.COMMON.MORE} <i className='fas fa-angle-right' />
{/* 分类 */}
{CONFIG_NEXT.RIGHT_CATEGORY_LIST && router.asPath !== '/category' && categories && (
<Card>
<div className='text-sm px-2 flex flex-nowrap justify-between font-light'>
<div className='pb-2 text-gray-600 dark:text-gray-300'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
<Link
href={'/category'}
passHref
className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</Card>
)}
{locale.COMMON.MORE} <i className='fas fa-angle-right' />
{CONFIG_NEXT.RIGHT_TAG_LIST && router.asPath !== '/tag' && tags && (
<Card>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
<div className="text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-tag" />
{locale.COMMON.TAGS}
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</Card>
)}
{CONFIG_NEXT.RIGHT_TAG_LIST && router.asPath !== '/tag' && tags && (
<Card>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
<div className="text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-tag" />
{locale.COMMON.TAGS}
</div>
<Link
href={'/tag'}
passHref
className="text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer">
{locale.COMMON.MORE}{' '}
<i className='fas fa-angle-double-right' />
</Link>
</div>
<div className="px-2 pt-2">
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</Card>
)}
{BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <Card>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
<div className="text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-tag" />
{locale.COMMON.RECENT_COMMENTS}
</div>
</div>
<Link
href={'/tag'}
passHref
className="text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer">
{locale.COMMON.MORE}{' '}
<i className='fas fa-angle-double-right' />
</Link>
</div>
<div className="px-2 pt-2">
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</Card>
)}
{BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <Card>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
<div className="text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-tag" />
{locale.COMMON.RECENT_COMMENTS}
<div className="px-2 pt-2">
<NextRecentComments />
</div>
</div>
<div className="px-2 pt-2">
<NextRecentComments/>
</div>
</Card>}
</Card>}
</div>
</aside>
</aside>
)
}
export default SideAreaRight

View File

@@ -104,7 +104,6 @@ const NavBar = props => {
if (customNav) {
links = links.concat(customNav)
}
console.log(links)
return (
<div className="flex-shrink-0">
<ul className="flex flex-row">

View File

@@ -2,7 +2,6 @@ import Link from 'next/link'
const Tags = props => {
const { tagOptions, tag } = props
console.log(props)
const currentTag = tag
if (!tagOptions) return null
return (