Next主题 SEO

2026-05-13 23:16:47 +00:00 · 2024-01-31 18:45:11 +08:00
parent eced20bfe7
commit 765ba1cb25
21 changed files with 88 additions and 89 deletions
--- a/components/Collapse.js
+++ b/components/Collapse.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useImperativeHandle } from 'react'
+import { useEffect, useImperativeHandle, useRef } from 'react'

 /**
 * 折叠面板组件，支持水平折叠、垂直折叠
@@ -7,7 +7,7 @@ import React, { useEffect, useImperativeHandle } from 'react'
 */
 const Collapse = props => {
  const { collapseRef } = props
-  const ref = React.useRef(null)
+  const ref = useRef(null)
  const type = props.type || 'vertical'

  useImperativeHandle(collapseRef, () => {
@@ -17,8 +17,10 @@ const Collapse = props => {
       * @param {*} param0
       */
      updateCollapseHeight: ({ height, increase }) => {
-        ref.current.style.height = ref.current.scrollHeight
-        ref.current.style.height = 'auto'
+        if (props.isOpen) {
+          ref.current.style.height = ref.current.scrollHeight
+          ref.current.style.height = 'auto'
+        }
      }
    }
  })
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import { loadExternalResource } from '@/lib/utils'
+import { isMobile, loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'

 /**
@@ -14,7 +14,7 @@ export default function Live2D() {
  const petLink = siteConfig('WIDGET_PET_LINK')

  useEffect(() => {
-    if (showPet) {
+    if (showPet && !isMobile()) {
      Promise.all([
        loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
      ]).then((e) => {
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -47,7 +47,8 @@ const ThemeSwitch = () => {
                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
                    <i className="fa-solid fa-language w-5" />
                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <select value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                        <label htmlFor="langSelect" className="sr-only">选择语言：</label>
+                        <select id="langSelect" value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
                            {Object.keys(LANGS)?.map(t => {
                              return <option key={t} value={t}>{LANGS[t].LOCALE}</option>
                            })}
@@ -59,7 +60,8 @@ const ThemeSwitch = () => {
                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
                    <i className="fa-solid fa-palette w-5" />
                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <select value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                        <label htmlFor="themeSelect" className="sr-only">选择主题：</label>
+                        <select id="themeSelect" value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
                            {THEMES?.map(t => {
                              return <option key={t} value={t}>{t}</option>
                            })}
--- a/components/WWAds.js
+++ b/components/WWAds.js
@@ -7,13 +7,13 @@ import { siteConfig } from '@/lib/config'
 * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null
 */
 export default function WWAds({ orientation = 'vertical', sticky = false, className }) {
-  const adWWADSId = siteConfig('AD_WWADS_ID')
+  const AD_WWADS_ID = siteConfig('AD_WWADS_ID')

-  if (!adWWADSId) {
+  if (!AD_WWADS_ID) {
    return null
  }

-  return <div data-id={adWWADSId} className={`wwads-cn 
+  return <div data-id={AD_WWADS_ID} className={`wwads-cn 
            ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'}
            ${sticky ? 'wwads-sticky' : ''} z-10 ${className || ''}`} />
 }
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -56,7 +56,6 @@ const mapImgUrl = (img, block, type = 'block', from = 'post') => {
    }
  }

-  console.log('block', block)
  // 统一压缩图片
  if (from === 'pageCoverThumbnail' || block.type === 'image' || block.type === 'page') {
    const width = block?.format?.block_width || 200
--- a/next.config.js
+++ b/next.config.js
@@ -41,7 +41,8 @@ module.exports = withBundleAnalyzer({
      'images.unsplash.com',
      'source.unsplash.com',
      'p1.qhimg.com',
-      'webmention.io'
+      'webmention.io',
+      'ko-fi.com'
    ]
  },
  // 默认将feed重定向至 /public/rss/feed.xml
--- a/themes/next/components/Announcement.js
+++ b/themes/next/components/Announcement.js
@@ -14,11 +14,7 @@ const Announcement = ({ post, className }) => {
                <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
            </div>
        </div>
-        {post && (<div id="announcement-content" data-aos="fade-down"
-                    data-aos-duration="500"
-                    data-aos-delay="200"
-                    data-aos-once="true"
-                    data-aos-anchor-placement="top-bottom">
+        {post && (<div id="announcement-content">
            <NotionPage post={post} className='text-center ' />
        </div>)}
    </>
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -26,19 +26,22 @@ export default function ArticleDetail(props) {
  const url = siteConfig('LINK') + useRouter().asPath
  const { locale } = useGlobal()
  const showArticleInfo = siteConfig('NEXT_ARTICLE_INFO', null, CONFIG)
+  // 动画样式  首屏卡片不用，后面翻出来的加动画
+  const aosProps = {
+    'data-aos': 'fade-down',
+    'data-aos-duration': '400',
+    'data-aos-once': 'true',
+    'data-aos-anchor-placement': 'top-bottom'
+  }

  return (
        <div id="article-wrapper"
            className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
            <div itemScope itemType="https://schema.org/Movie"
-                data-aos="fade-down"
-                data-aos-duration="300"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
                className="subpixel-antialiased overflow-y-hidden py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray article-padding"
            >

-                {showArticleInfo && <header>
+                {showArticleInfo && <header {...aosProps}>
                    {/* 头图 */}
                    {siteConfig('NEXT_POST_HEADER_IMAGE_VISIBLE', null, CONFIG) && post?.type && !post?.type !== 'Page' && post?.pageCover && (
                        <div className="w-full relative md:flex-shrink-0 overflow-hidden">
@@ -52,7 +55,7 @@ export default function ArticleDetail(props) {
                    </div>

                    {/* meta */}
-                    <section className="mt-2 text-gray-400 dark:text-gray-400 font-light leading-7 text-sm">
+                    <section className="mt-2 text-gray-500 dark:text-gray-400 font-light leading-7 text-sm">
                        <div className='flex flex-wrap justify-center'>
                            {post?.type !== 'Page' && (<>
                                <Link
--- a/themes/next/components/BlogAround.js
+++ b/themes/next/components/BlogAround.js
@@ -14,7 +14,7 @@ export default function BlogAround ({ prev, next }) {
      {prev && <Link
        href={`/${prev.slug}`}
        passHref
-        className='text-sm py-3 text-gray-400 hover:underline cursor-pointer'>
+        className='text-sm py-3 text-gray-500 hover:underline cursor-pointer'>

        <i className='mr-1 fas fa-angle-double-left' />{prev.title}

@@ -22,7 +22,7 @@ export default function BlogAround ({ prev, next }) {
      {next && <Link
        href={`/${next.slug}`}
        passHref
-        className='text-sm flex py-3 text-gray-400 hover:underline cursor-pointer'>
+        className='text-sm flex py-3 text-gray-500 hover:underline cursor-pointer'>
        {next.title}
        <i className='ml-1 my-1 fas fa-angle-double-right' />

--- a/themes/next/components/BlogPostArchive.js
+++ b/themes/next/components/BlogPostArchive.js
@@ -27,7 +27,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
              className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
            >
              <div id={post?.publishDay}>
-                <span className="text-gray-400">{post.date?.start_date}</span>{' '}
+                <span className="text-gray-500">{post.date?.start_date}</span>{' '}
                &nbsp;
                <Link
                  href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -10,9 +10,19 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { formatDateFmt } from '@/lib/formatDate'
 import { siteConfig } from '@/lib/config'

-const BlogPostCard = ({ post, showSummary }) => {
+const BlogPostCard = ({ post, index, showSummary }) => {
  const { locale } = useGlobal()
  const showPreview = siteConfig('NEXT_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+  // 动画样式  首屏卡片不用，后面翻出来的加动画
+  const aosProps = index > 2
+    ? {
+        'data-aos': 'fade-down',
+        'data-aos-duration': '400',
+        'data-aos-once': 'true',
+        'data-aos-anchor-placement': 'top-bottom'
+      }
+    : {}
+
  return (
    <Card className="w-full">
      <div
@@ -20,26 +30,19 @@ const BlogPostCard = ({ post, showSummary }) => {
        className="flex flex-col-reverse justify-between duration-300"
      >
        <div className="lg:p-8 p-4 flex flex-col w-full">
+
+          {/* 文章标题 */}
          <Link
+            {...aosProps}
            href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
            passHref
-            data-aos="fade-down"
-            data-aos-duration="500"
-            data-aos-once="true"
-            data-aos-anchor-placement="top-bottom"
-            className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''
-              } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+            className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>

            <NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>

          </Link>

-          <div data-aos="fade-down"
-                data-aos-duration="500"
-                data-aos-delay="100"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
-                className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
+          <div {...aosProps} className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-500 `}>

            <div>
              {post.category && (
@@ -63,6 +66,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                    <span className='menu-link'>{post.date?.start_date}</span>
                </Link>
            </div>
+
            <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>

            <div className="hover:text-blue-500 dark:hover:text-blue-400  md:flex-nowrap flex-wrap md:justify-start inline-block">
@@ -73,12 +77,7 @@ const BlogPostCard = ({ post, showSummary }) => {
          </div>

          {(!showPreview || showSummary) && !post.results && (
-            <p data-aos="fade-down"
-                data-aos-duration="500"
-                data-aos-delay="100"
-                data-aos-once="true"
-                data-aos-anchor-placement="top-bottom"
-                className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p {...aosProps} className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
              {post.summary}
            </p>
          )}
@@ -93,11 +92,7 @@ const BlogPostCard = ({ post, showSummary }) => {
          )}

          {showPreview && post?.blockMap && (
-            <div data-aos="fade-down"
-            data-aos-duration="500"
-            data-aos-delay="100"
-            data-aos-once="true"
-            data-aos-anchor-placement="top-bottom"className="overflow-ellipsis truncate">
+            <div className="overflow-ellipsis truncate">
              <NotionPage post={post} />
            </div>
          )}
--- a/themes/next/components/BlogPostListPage.js
+++ b/themes/next/components/BlogPostListPage.js
@@ -21,8 +21,8 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
      <div>
        {/* 文章列表 */}
        <div id="posts-wrapper" className="flex flex-wrap lg:space-y-4 space-y-1">
-          {posts?.map(post => (
-            <BlogPostCard key={post.id} post={post} />
+          {posts?.map((post, index) => (
+            <BlogPostCard key={post.id} index={index} post={post} />
          ))}
        </div>
        <PaginationNumber page={page} totalPage={totalPage} />
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,11 +1,11 @@
 /**
 * 卡片组件
- * @param {*} param0 
- * @returns 
+ * @param {*} param0
+ * @returns
 */
 const Card = (props) => {
-    const { children, headerSlot, className } = props
-    return <div className={className}>
+  const { children, headerSlot, className } = props
+  return <div className={className}>
        <>{headerSlot}</>
        <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
            {children}
--- a/themes/next/components/CategoryGroup.js
+++ b/themes/next/components/CategoryGroup.js
@@ -19,7 +19,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
              : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
              '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>

-            <i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-400 fa-folder '} mr-2 fas`} />{category.name}({category.count})
+            <i className={`${selected ? 'text-white fa-folder-open ' : 'text-gray-500 fa-folder '} mr-2 fas`} />{category.name}({category.count})
          </Link>
        );
      })}
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -33,19 +33,19 @@ export const MenuList = (props) => {
  return (
        <>
            {/* 大屏模式菜单 */}
-            <nav id='nav' data-aos="fade-down"
+            <menu id='nav' data-aos="fade-down"
                data-aos-duration="500"
                data-aos-delay="400"
                data-aos-once="true"
                data-aos-anchor-placement="top-bottom"
                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
                {links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
-            </nav>
+            </menu>

            {/* 移动端菜单 */}
-            <div id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
+            <menu id='nav-menu-mobile' className='block md:hidden my-auto justify-start bg-white'>
                {links?.map((link, index) => link && link.show && <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link} />)}
-            </div>
+            </menu>
        </>
  )
 }
--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -26,7 +26,7 @@ const NextRecentComments = (props) => {
        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-500 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
        </div>)}

  </>
--- a/themes/next/components/SearchInput.js
+++ b/themes/next/components/SearchInput.js
@@ -106,7 +106,7 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {

        {(showClean &&
            <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-                <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+                <i className='hover:text-black transform duration-200 text-gray-500 cursor-pointer fas fa-times' onClick={cleanSearch} />
            </div>
        )}
    </div>
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -59,7 +59,7 @@ const SideAreaRight = (props) => {
                        <Link
                            href={'/category'}
                            passHref
-                            className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                            className='text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>

                            {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />

@@ -79,7 +79,7 @@ const SideAreaRight = (props) => {
                        <Link
                            href={'/tag'}
                            passHref
-                            className="text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer">
+                            className="text-gray-500 hover:text-black  dark:hover:text-white hover:underline cursor-pointer">

                            {locale.COMMON.MORE}{' '}
                            <i className='fas fa-angle-double-right' />
--- a/themes/next/components/SideBar.js
+++ b/themes/next/components/SideBar.js
@@ -35,7 +35,7 @@ const SideBar = (props) => {
              <Link
                href={'/category'}
                passHref
-                className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>

                {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>

@@ -53,7 +53,7 @@ const SideBar = (props) => {
              <Link
                href={'/tag'}
                passHref
-                className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+                className='text-gray-500 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>

                {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>

--- a/themes/next/components/TopNav.js
+++ b/themes/next/components/TopNav.js
@@ -56,7 +56,7 @@ const TopNav = (props) => {
  }

  const { searchModal } = useNextGlobal()
-  const showSeachModal = () => {
+  const showSearchModal = () => {
    if (siteConfig('ALGOLIA_APP_ID')) {
      searchModal?.current?.openSearch()
    } else {
@@ -73,7 +73,7 @@ const TopNav = (props) => {
                    <Link
                        href={'/category'}
                        passHref
-                        className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                        className='mb-3 text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>

                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />

@@ -90,7 +90,7 @@ const TopNav = (props) => {
                    <Link
                        href={'/tag'}
                        passHref
-                        className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+                        className='text-gray-500 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>

                        {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />

@@ -123,8 +123,8 @@ const TopNav = (props) => {

                    {/* 右侧功能 */}
                    <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                        <div className="cursor-pointer block lg:hidden" onClick={showSeachModal}>
-                            <i className="mr-2 fas fa-search" />{locale.NAV.SEARCH}
+                        <div className="cursor-pointer block lg:hidden" onClick={showSearchModal}>
+                            <i className="mr-2 fas fa-search" />
                        </div>
                    </div>
                </div>
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -21,12 +21,13 @@ import { useRouter } from 'next/router'
 import ArticleDetail from './components/ArticleDetail'
 import Link from 'next/link'
 import BlogListBar from './components/BlogListBar'
-import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
 import { siteConfig } from '@/lib/config'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import Announcement from './components/Announcement'
+import Card from './components/Card'

 // 主题全局状态
 const ThemeGlobalNext = createContext()
@@ -39,7 +40,6 @@ export const useNextGlobal = () => useContext(ThemeGlobalNext)
 */
 const LayoutBase = (props) => {
  const { children, headerSlot, rightAreaSlot, meta, post } = props
-  const { onLoading } = useGlobal()
  const targetRef = useRef(null)
  const floatButtonGroup = useRef(null)
  const [showRightFloat, switchShow] = useState(false)
@@ -108,19 +108,7 @@ const LayoutBase = (props) => {

                {/* 中央内容 */}
                <section id='container-inner' className={`${siteConfig('NEXT_NAV_TYPE', null, CONFIG) !== '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}>
-                    <Transition
-                        show={!onLoading}
-                        appear={true}
-                        enter="transition ease-in-out duration-700 transform order-first"
-                        enterFrom="opacity-0 translate-y-16"
-                        enterTo="opacity-100"
-                        leave="transition ease-in-out duration-300 transform"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0 -translate-y-16"
-                        unmount={false}
-                    >
-                        {children}
-                    </Transition>
+                    {children}
                </section>

                {/* 右侧栏样式 */}
@@ -157,7 +145,20 @@ const LayoutBase = (props) => {
 * @returns
 */
 const LayoutIndex = (props) => {
-  return <LayoutPostList {...props} />
+  const { notice } = props
+  return <>
+        {/* 首页移动端顶部显示公告 */}
+        <Card className='my-2 lg:hidden'>
+            <Announcement post={notice} />
+        </Card>
+
+        <BlogListBar {...props} />
+
+        {siteConfig('POST_LIST_STYLE') !== 'page'
+          ? <BlogPostListScroll {...props} showSummary={true} />
+          : <BlogPostListPage {...props} />
+        }
+    </>
 }

 /**