diff --git a/themes/example/components/Announcement.js b/themes/example/components/Announcement.js
new file mode 100644
index 00000000..01ec60c3
--- /dev/null
+++ b/themes/example/components/Announcement.js
@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+  if (!post) {
+    return <></>
+  }
+  return <aside className="rounded shadow overflow-hidden mb-6">
+
+           <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">
+                <i className="mr-2 fas fa-bullhorn" />
+           公告</h3>
+
+        {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center ' />
+        </div>)}
+</aside>
+}
+export default Announcement
diff --git a/themes/example/components/SideBar.js b/themes/example/components/SideBar.js
index 574bf230..39ffead7 100644
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -3,11 +3,12 @@ import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import Announcement from './Announcement'
 const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
 
 export const SideBar = (props) => {
   const { locale } = useGlobal()
-  const { latestPosts, categoryOptions } = props
+  const { latestPosts, categoryOptions, notice } = props
   return (
       <div className="w-full md:w-64 sticky top-8">
 
@@ -48,6 +49,8 @@ export const SideBar = (props) => {
                 </div>
             </aside>
 
+            <Announcement post={notice}/>
+
             {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
                 <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
 
diff --git a/themes/medium/components/TagItemMini.js b/themes/medium/components/TagItemMini.js
index 3bbe6c15..9922a069 100644
--- a/themes/medium/components/TagItemMini.js
+++ b/themes/medium/components/TagItemMini.js
@@ -15,7 +15,7 @@ const TagItemMini = ({ tag, selected = false }) => {
       <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
 
     </Link>
-  );
+  )
 }
 
 export default TagItemMini