Merge pull request #766 from tangly1024/feat-announcement

Feat announcement
2026-05-14 15:09:22 +00:00 · 2023-02-10 17:17:07 +08:00
parent c1bb225b5b b691873500
commit 05618cd755
17 changed files with 147 additions and 77 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.9.6
+NEXT_PUBLIC_VERSION=3.10.0
--- a/components/NotionPage.js
+++ b/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}
--- a/lib/notion/getNotionData.js
+++ b/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,
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "3.9.6",
+  "version": "3.10.0",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
--- a/styles/globals.css
+++ b/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;
+}
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -2006,6 +2006,6 @@ code.language-mermaid {
  margin: auto;
 }

-em .katex-display {
+.notion-equation-inline .katex-display {
  margin: 0 0 !important;
 }
--- a/themes/hexo/components/Announcement.js
+++ b/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
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -57,8 +57,8 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
          </div>

        </Link>)
-      );
+      )
    })}
-  </>;
+  </>
 }
 export default LatestPostsGroup
--- a/themes/hexo/components/SideRight.js
+++ b/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'>
--- a/themes/next/LayoutBase.js
+++ b/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}>
--- a/themes/next/components/Announcement.js
+++ b/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
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -116,7 +116,7 @@ const BlogPostCard = ({ post, showSummary }) => {
        )}
      </div>
    </Card>
-  );
+  )
 }

 export default BlogPostCard
--- a/themes/next/components/LatestPostsGroup.js
+++ b/themes/next/components/LatestPostsGroup.js
@@ -48,8 +48,8 @@ const LatestPostsGroup = ({ latestPosts }) => {
          </div>

        </Link>)
-      );
+      )
    })}
-  </>;
+  </>
 }
 export default LatestPostsGroup
--- a/themes/next/components/SideAreaLeft.js
+++ b/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'>
--- a/themes/next/components/SideAreaRight.js
+++ b/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
-            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
--- a/themes/nobelium/components/Nav.js
+++ b/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">
--- a/themes/nobelium/components/Tags.js
+++ b/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 (