announcement

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