announcement

components/NotionPage.js

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

lib/notion/getNotionData.js

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

styles/globals.css

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

themes/hexo/components/Announcement.js

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

themes/hexo/components/LatestPostsGroup.js

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

themes/hexo/components/SideRight.js

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

themes/next/LayoutBase.js

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

themes/next/components/Announcement.js

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

themes/next/components/BlogPostCard.js

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

themes/next/components/LatestPostsGroup.js

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

themes/next/components/SideAreaLeft.js

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

themes/next/components/SideAreaRight.js

@@ -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
+            <ins
-            className='adsbygoogle'
+                className='adsbygoogle'
-            style={{ display: 'block' }}
+                style={{ display: 'block' }}
-            data-adtest='on'
+                data-adtest='on'
-            data-ad-client='ca-pub-2708419466378217'
+                data-ad-client='ca-pub-2708419466378217'
-            data-ad-slot='8807314373'
+                data-ad-slot='8807314373'
-            data-ad-format='auto'
+                data-ad-format='auto'
-            data-full-width-responsive='true'
+                data-full-width-responsive='true'
-          />
+            />
         </Card>}
 
-        <div className="sticky top-4">
+        <div className="sticky top-0 space-y-4">
-          {slot}
+            <div>
+                {notice && <Card>
+                    <Announcement post={notice} />
+                </Card>}
+            </div>
 
-          {/* 分类  */}
+            {slot}
-          {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'>
 
-                  {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>
+                            {locale.COMMON.MORE} <i className='fas fa-angle-right' />
-              </div>
-              <CategoryGroup currentCategory={currentCategory} categories={categories} />
-            </Card>
-          )}
 
-           {CONFIG_NEXT.RIGHT_TAG_LIST && router.asPath !== '/tag' && tags && (
+                        </Link>
-            <Card>
+                    </div>
-              <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
+                    <CategoryGroup currentCategory={currentCategory} categories={categories} />
-                <div className="text-gray-600 dark:text-gray-200">
+                </Card>
-                  <i className="mr-2 fas fa-tag" />
+            )}
-                  {locale.COMMON.TAGS}
+
+            {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
+                <div className="px-2 pt-2">
-                  href={'/tag'}
+                    <NextRecentComments />
-                  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>
+            </Card>}
-              <div className="px-2 pt-2">
-                  <NextRecentComments/>
-              </div>
-           </Card>}
 
         </div>
-      </aside>
+    </aside>
   )
 }
 export default SideAreaRight

themes/nobelium/components/Nav.js

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

themes/nobelium/components/Tags.js

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