style(heo): fix heo style

themes/heo/components/Hero.js

@@ -17,18 +17,24 @@ import CONFIG from '../config'
  */
 const Hero = props => {
   return (
-        <div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
+    <div
+      id="hero-wrapper"
+      className="recent-top-post-group w-full overflow-hidden select-none px-5 mb-4"
+    >
+      <div
+        id="hero"
+        style={{ zIndex: 1 }}
+        className={
+          'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex xl:space-x-3 relative'
+        }
+      >
+        {/* 左侧banner组 */}
+        <BannerGroup {...props} />
 
-            <div id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex xl:space-x-3 relative'} >
-
-                {/* 左侧banner组 */}
-                <BannerGroup {...props} />
-
-                {/* 右侧置顶文章组 */}
-                <TopGroup {...props} />
-
-            </div>
-        </div>
+        {/* 右侧置顶文章组 */}
+        <TopGroup {...props} />
+      </div>
+    </div>
   )
 }
 
@@ -38,13 +44,16 @@ const Hero = props => {
  */
 function BannerGroup(props) {
   return (
-        // 左侧英雄区
-        <div id='bannerGroup' className='flex flex-col justify-between flex-1 mr-2 max-w-[42rem]'>
-            {/* 动图 */}
-            <Banner {...props} />
-            {/* 导航分类 */}
-            <GroupMenu />
-        </div>
+    // 左侧英雄区
+    <div
+      id="bannerGroup"
+      className="flex flex-col justify-between flex-1 mr-2 max-w-[42rem]"
+    >
+      {/* 动图 */}
+      <Banner {...props} />
+      {/* 导航分类 */}
+      <GroupMenu />
+    </div>
   )
 }
 
@@ -64,25 +73,43 @@ function Banner(props) {
     router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`)
   }
 
-  return <div id='banners' onClick={handleClickBanner} className="hidden xl:flex xl:flex-col group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden">
-
-        <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
-            <div className='text-4xl font-bold mb-3  dark:text-white'>{CONFIG.HERO_TITLE_1}<br />{CONFIG.HERO_TITLE_2}</div>
-            <div className='text-xs text-gray-600  dark:text-gray-200'>{CONFIG.HERO_TITLE_3}</div>
+  return (
+    <div
+      id="banners"
+      onClick={handleClickBanner}
+      className="hidden xl:flex xl:flex-col group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden"
+    >
+      <div id="banner-title" className="flex flex-col absolute top-10 left-10">
+        <div className="text-4xl font-bold mb-3  dark:text-white">
+          {CONFIG.HERO_TITLE_1}
+          <br />
+          {CONFIG.HERO_TITLE_2}
         </div>
-
-        {/* 斜向滚动的图标 */}
-        <TagsGroupBar />
-
-        {/* 遮罩 */}
-        <div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'rounded-xl overflow-hidden opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
-            <div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
-                <div className='text-7xl text-white font-extrabold'>随便逛逛</div>
-                <div className='-ml-3 text-gray-300'><ArrowSmallRight className={'w-24 h-24 stroke-2'} /></div>
-            </div>
+        <div className="text-xs text-gray-600  dark:text-gray-200">
+          {CONFIG.HERO_TITLE_3}
         </div>
+      </div>
 
+      {/* 斜向滚动的图标 */}
+      <TagsGroupBar />
+
+      {/* 遮罩 */}
+      <div
+        id="banner-cover"
+        style={{ backdropFilter: 'blur(15px)' }}
+        className={
+          'rounded-xl overflow-hidden opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'
+        }
+      >
+        <div className="ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in">
+          <div className="text-7xl text-white font-extrabold">随便逛逛</div>
+          <div className="-ml-3 text-gray-300">
+            <ArrowSmallRight className={'w-24 h-24 stroke-2'} />
+          </div>
+        </div>
+      </div>
     </div>
+  )
 }
 
 /**
@@ -93,20 +120,42 @@ function TagsGroupBar() {
   const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
 
   return (
-        <div className="tags-group-all flex -rotate-[30deg] h-full">
-            <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
-                {groupIcons?.map((g, index) => {
-                  return (<div key={index} className="tags-group-icon-pair ml-6 select-none">
-                        <div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
-                            <LazyImage priority={true} src={g.img_1} title={g.title_1} className='w-2/3 hidden xl:block' />
-                        </div>
-                        <div style={{ background: g.color_2 }} className={'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
-                            <LazyImage priority={true} src={g.img_2} title={g.title_2} className='w-2/3 hidden xl:block' />
-                        </div>
-                    </div>)
-                })}
+    <div className="tags-group-all flex -rotate-[30deg] h-full">
+      <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
+        {groupIcons?.map((g, index) => {
+          return (
+            <div key={index} className="tags-group-icon-pair ml-6 select-none">
+              <div
+                style={{ background: g.color_1 }}
+                className={
+                  'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'
+                }
+              >
+                <LazyImage
+                  priority={true}
+                  src={g.img_1}
+                  title={g.title_1}
+                  className="w-2/3 hidden xl:block"
+                />
+              </div>
+              <div
+                style={{ background: g.color_2 }}
+                className={
+                  'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'
+                }
+              >
+                <LazyImage
+                  priority={true}
+                  src={g.img_2}
+                  title={g.title_2}
+                  className="w-2/3 hidden xl:block"
+                />
+              </div>
             </div>
-        </div>
+          )
+        })}
+      </div>
+    </div>
   )
 }
 
@@ -116,37 +165,45 @@ function TagsGroupBar() {
  */
 function GroupMenu() {
   return (
-        <div className="h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3">
-            <Link href={CONFIG.HERO_CATEGORY_1?.url} className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
-                <div className="font-bold lg:text-lg  pl-5 relative -mt-2">
-                    {CONFIG.HERO_CATEGORY_1?.title}
-                    <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
-                </div>
-                <div className='hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
-                    <i className="fa-solid fa-star text-4xl"></i>
-                </div>
-            </Link>
-            <Link href={CONFIG.HERO_CATEGORY_2?.url} className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
-                <div className="font-bold lg:text-lg pl-5 relative -mt-2">
-                    {CONFIG.HERO_CATEGORY_2?.title}
-                    <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
-                </div>
-                <div className='hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
-                    <i className="fa-solid fa-fire-flame-curved text-4xl"></i>
-                </div>
-            </Link>
-            {/* 第三个标签在小屏上不显示 */}
-            <Link href={CONFIG.HERO_CATEGORY_3?.url} className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in">
-                <div className="font-bold text-lg pl-5 relative -mt-2">
-                    {CONFIG.HERO_CATEGORY_3?.title}
-                    <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
-                </div>
-                <div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
-                    <i className="fa-solid fa-book-bookmark text-4xl "></i>
-                </div>
-
-            </Link>
+    <div className="h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3">
+      <Link
+        href={CONFIG.HERO_CATEGORY_1?.url}
+        className="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
+      >
+        <div className="font-bold lg:text-lg  pl-5 relative -mt-2">
+          {CONFIG.HERO_CATEGORY_1?.title}
+          <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
         </div>
+        <div className="hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
+          <i className="fa-solid fa-star text-4xl"></i>
+        </div>
+      </Link>
+      <Link
+        href={CONFIG.HERO_CATEGORY_2?.url}
+        className="group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
+      >
+        <div className="font-bold lg:text-lg pl-5 relative -mt-2">
+          {CONFIG.HERO_CATEGORY_2?.title}
+          <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
+        </div>
+        <div className="hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
+          <i className="fa-solid fa-fire-flame-curved text-4xl"></i>
+        </div>
+      </Link>
+      {/* 第三个标签在小屏上不显示 */}
+      <Link
+        href={CONFIG.HERO_CATEGORY_3?.url}
+        className="group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in"
+      >
+        <div className="font-bold text-lg pl-5 relative -mt-2">
+          {CONFIG.HERO_CATEGORY_3?.title}
+          <span className="absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full"></span>
+        </div>
+        <div className="absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0">
+          <i className="fa-solid fa-book-bookmark text-4xl "></i>
+        </div>
+      </Link>
+    </div>
   )
 }
 
@@ -164,24 +221,40 @@ function TopGroup(props) {
   const topPosts = getTopPosts({ latestPosts, allNavPages })
 
   return (
-        <div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
-            {/* 置顶推荐文章 */}
-            <div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]'>
-                {topPosts?.map((p, index) => {
-                  return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
-                        <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
-                            <LazyImage priority={index === 0} className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
-                            <div className='group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</div>
-                            {/* hover 悬浮的 ‘荐’ 字 */}
-                            <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
-                                荐
-                            </div>
-                        </div>
-                    </Link>
-                })}
-            </div>
-            <TodayCard cRef={todayCardRef} />
-        </div>
+    <div
+      id="hero-right-wrapper"
+      onMouseLeave={handleMouseLeave}
+      className="flex-1 relative w-full"
+    >
+      {/* 置顶推荐文章 */}
+      <div
+        id="top-group"
+        className="w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]"
+      >
+        {topPosts?.map((p, index) => {
+          return (
+            <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
+              <div className="cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl">
+                <LazyImage
+                  priority={index === 0}
+                  className="h-24 object-cover"
+                  alt={p?.title}
+                  src={p?.pageCoverThumbnail || siteInfo?.pageCover}
+                />
+                <div className="group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold">
+                  {p?.title}
+                </div>
+                {/* hover 悬浮的 ‘荐’ 字 */}
+                <div className="opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs">
+                  荐
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+      <TodayCard cRef={todayCardRef} />
+    </div>
   )
 }
 
@@ -190,7 +263,10 @@ function TopGroup(props) {
  */
 function getTopPosts({ latestPosts, allNavPages }) {
   // 默认展示最近更新
-  if (!CONFIG.HERO_RECOMMEND_POST_TAG || CONFIG.HERO_RECOMMEND_POST_TAG === '') {
+  if (
+    !CONFIG.HERO_RECOMMEND_POST_TAG ||
+    CONFIG.HERO_RECOMMEND_POST_TAG === ''
+  ) {
     return latestPosts
   }
 
@@ -231,8 +307,8 @@ function TodayCard({ cRef }) {
   const [isCoverUp, setIsCoverUp] = useState(true)
 
   /**
-       * 外部可以调用此方法
-       */
+   * 外部可以调用此方法
+   */
   useImperativeHandle(cRef, () => {
     return {
       coverUp: () => {
@@ -242,37 +318,73 @@ function TodayCard({ cRef }) {
   })
 
   /**
-       * 点击更多
-       * @param {*} e
-       */
+   * 点击更多
+   * @param {*} e
+   */
   function handleClickMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
 
   /**
-     * 点击卡片跳转的链接
-     * @param {*} e
-     */
+   * 点击卡片跳转的链接
+   * @param {*} e
+   */
   function handleCardClick(e) {
     router.push(CONFIG.HERO_TITLE_LINK)
   }
 
-  return <div id='today-card' className={`${isCoverUp ? ' ' : 'pointer-events-none'} overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}>
-        <div id='card-body' onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110 pointer-events-none'} shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
-            <div id='today-card-info' className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
-                <div className='flex flex-col'>
-                    <div className='text-xs font-light'>{CONFIG.HERO_TITLE_4}</div>
-                    <div className='text-3xl font-bold'>{CONFIG.HERO_TITLE_5}</div>
-                </div>
-                <div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
-                    <PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
-                    <div id='more' className='select-none'>更多推荐</div>
-                </div>
+  return (
+    <div
+      id="today-card"
+      className={`${
+        isCoverUp ? ' ' : 'pointer-events-none'
+      } overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}
+    >
+      <div
+        id="card-body"
+        onClick={handleCardClick}
+        className={`${
+          isCoverUp
+            ? 'opacity-100 cursor-pointer'
+            : 'opacity-0 transform scale-110 pointer-events-none'
+        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}
+      >
+        <div
+          id="today-card-info"
+          className="z-10 flex justify-between w-full relative text-white p-10 items-end"
+        >
+          <div className="flex flex-col">
+            <div className="text-xs font-light">{CONFIG.HERO_TITLE_4}</div>
+            <div className="text-3xl font-bold">{CONFIG.HERO_TITLE_5}</div>
+          </div>
+          <div
+            onClick={handleClickMore}
+            className={`'${
+              isCoverUp ? '' : 'hidden pointer-events-none '
+            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}
+          >
+            <PlusSmall
+              className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'}
+            />
+            <div id="more" className="select-none">
+              更多推荐
             </div>
-            <div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`} style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
+          </div>
         </div>
+        <div
+          id="today-card-cover"
+          className={`${
+            isCoverUp ? '' : ' pointer-events-none'
+          } cursor-pointer today-card-cover absolute w-full h-full top-0`}
+          style={{
+            background:
+              "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover"
+          }}
+        ></div>
+      </div>
     </div>
+  )
 }
 
 export default Hero

themes/heo/index.js

@@ -41,38 +41,55 @@ import { AdSlot } from '@/components/GoogleAdsense'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, headerSlot, slotTop, slotRight, siteInfo, className, meta } = props
+  const {
+    children,
+    headerSlot,
+    slotTop,
+    slotRight,
+    siteInfo,
+    className,
+    meta
+  } = props
 
   return (
-        <div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col'>
-            {/* SEO信息 */}
-            <CommonHead meta={meta} />
-            <Style />
+    <div
+      id="theme-heo"
+      className="bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col"
+    >
+      {/* SEO信息 */}
+      <CommonHead meta={meta} />
+      <Style />
 
-            {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
-            {headerSlot}
+      {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+      {headerSlot}
 
-            {/* 主区块 */}
-            <main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative md:px-5'}>
+      {/* 主区块 */}
+      <main
+        id="wrapper-outer"
+        className={'flex-grow w-full max-w-[86rem] mx-auto relative md:px-5'}
+      >
+        <div
+          id="container-inner"
+          className={
+            'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'
+          }
+        >
+          <div className={`w-full h-auto ${className || ''}`}>
+            {/* 主区上部嵌入 */}
+            {slotTop}
+            {children}
+          </div>
 
-                <div id="container-inner" className={'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
-                    <div className={`w-full h-auto ${className || ''}`}>
-                        {/* 主区上部嵌入 */}
-                        {slotTop}
-                        {children}
-                    </div>
-
-                    <div>
-                        {/* 主区快右侧 */}
-                        {slotRight}
-                    </div>
-
-                </div>
-            </main>
-
-            {/* 页脚 */}
-            <Footer title={siteInfo?.title || BLOG.TITLE} />
+          <div className="hidden xl:block">
+            {/* 主区快右侧 */}
+            {slotRight}
+          </div>
         </div>
+      </main>
+
+      {/* 页脚 */}
+      <Footer title={siteInfo?.title || BLOG.TITLE} />
+    </div>
   )
 }
 
@@ -82,28 +99,38 @@ const LayoutBase = props => {
  * @param {*} props
  * @returns
  */
-const LayoutIndex = (props) => {
-  const headerSlot = <header>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
-        {/* 通知横幅 */}
-        <NoticeBar />
-        <Hero {...props} />
-        <div className='max-w-[86rem] mx-auto px-3'>
-          <WWAds className='w-full' orientation='horizontal' />
-        </div>
+const LayoutIndex = props => {
+  const headerSlot = (
+    <header>
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper" className="h-16">
+        <NavBar {...props} />
+      </div>
+      {/* 通知横幅 */}
+      <NoticeBar />
+      <Hero {...props} />
+      <div className="max-w-[86rem] mx-auto px-3">
+        <WWAds className="w-full" orientation="horizontal" />
+      </div>
     </header>
+  )
 
   // 右侧栏 用户信息+标签列表
   const slotRight = <SideRight {...props} />
 
-  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
-        <div id='post-outer-wrapper' className='px-5 md:px-0'>
-            {/* 文章分类条 */}
-            <CategoryBar {...props} />
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-        </div>
+  return (
+    <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+      <div id="post-outer-wrapper" className="px-5 md:px-0">
+        {/* 文章分类条 */}
+        <CategoryBar {...props} />
+        {BLOG.POST_LIST_STYLE === 'page' ? (
+          <BlogPostListPage {...props} />
+        ) : (
+          <BlogPostListScroll {...props} />
+        )}
+      </div>
     </LayoutBase>
+  )
 }
 
 /**
@@ -111,21 +138,31 @@ const LayoutIndex = (props) => {
  * @param {*} props
  * @returns
  */
-const LayoutPostList = (props) => {
+const LayoutPostList = props => {
   // 右侧栏
   const slotRight = <SideRight {...props} />
-  const headerSlot = <header>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+  const headerSlot = (
+    <header>
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper" className="h-16">
+        <NavBar {...props} />
+      </div>
     </header>
+  )
 
-  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
-        <div id='post-outer-wrapper' className='px-5  md:px-0'>
-            {/* 文章分类条 */}
-            <CategoryBar {...props} />
-            {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-        </div>
+  return (
+    <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+      <div id="post-outer-wrapper" className="px-5  md:px-0">
+        {/* 文章分类条 */}
+        <CategoryBar {...props} />
+        {BLOG.POST_LIST_STYLE === 'page' ? (
+          <BlogPostListPage {...props} />
+        ) : (
+          <BlogPostListScroll {...props} />
+        )}
+      </div>
     </LayoutBase>
+  )
 }
 
 /**
@@ -137,11 +174,15 @@ const LayoutSearch = props => {
   const { keyword } = props
   const router = useRouter()
   const currentSearch = keyword || router?.query?.s
-  const headerSlot = <header className='post-bg'>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper'><NavBar {...props} /></div>
-        <PostHeader {...props} />
+  const headerSlot = (
+    <header className="post-bg">
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper">
+        <NavBar {...props} />
+      </div>
+      <PostHeader {...props} />
     </header>
+  )
 
   useEffect(() => {
     // 高亮搜索结果
@@ -159,15 +200,25 @@ const LayoutSearch = props => {
     }
   }, [])
   return (
-        <LayoutBase {...props} currentSearch={currentSearch} headerSlot={headerSlot}>
-            <div id='post-outer-wrapper' className='px-5  md:px-0'>
-                {!currentSearch
-                  ? <SearchNav {...props} />
-                  : <div id="posts-wrapper">
-                        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
-                    </div>}
-            </div>
-        </LayoutBase>
+    <LayoutBase
+      {...props}
+      currentSearch={currentSearch}
+      headerSlot={headerSlot}
+    >
+      <div id="post-outer-wrapper" className="px-5  md:px-0">
+        {!currentSearch ? (
+          <SearchNav {...props} />
+        ) : (
+          <div id="posts-wrapper">
+            {BLOG.POST_LIST_STYLE === 'page' ? (
+              <BlogPostListPage {...props} />
+            ) : (
+              <BlogPostListScroll {...props} />
+            )}
+          </div>
+        )}
+      </div>
+    </LayoutBase>
   )
 }
 
@@ -176,34 +227,40 @@ const LayoutSearch = props => {
  * @param {*} props
  * @returns
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = props
 
   // 右侧栏
   const slotRight = <SideRight {...props} />
-  const headerSlot = <header>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+  const headerSlot = (
+    <header>
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper" className="h-16">
+        <NavBar {...props} />
+      </div>
     </header>
+  )
 
   // 归档页顶部显示条，如果是默认归档则不显示。分类详情页显示分类列表，标签详情页显示当前标签
 
-  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
-        <div className='p-5 rounded-xl border dark:border-gray-600 max-w-6xl w-full bg-white dark:bg-[#1e1e1e]'>
-            {/* 文章分类条 */}
-            <CategoryBar {...props} border={false} />
+  return (
+    <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+      <div className="p-5 rounded-xl border dark:border-gray-600 max-w-6xl w-full bg-white dark:bg-[#1e1e1e]">
+        {/* 文章分类条 */}
+        <CategoryBar {...props} border={false} />
 
-            <div className='px-3'>
-                {Object.keys(archivePosts).map(archiveTitle => (
-                    <BlogPostArchive
-                        key={archiveTitle}
-                        posts={archivePosts[archiveTitle]}
-                        archiveTitle={archiveTitle}
-                    />
-                ))}
-            </div>
+        <div className="px-3">
+          {Object.keys(archivePosts).map(archiveTitle => (
+            <BlogPostArchive
+              key={archiveTitle}
+              posts={archivePosts[archiveTitle]}
+              archiveTitle={archiveTitle}
+            />
+          ))}
         </div>
+      </div>
     </LayoutBase>
+  )
 }
 
 /**
@@ -217,72 +274,88 @@ const LayoutSlug = props => {
 
   // 右侧栏
   const slotRight = <SideRight {...props} />
-  const headerSlot = <header
-        data-aos="fade-up"
-        data-aos-duration="300"
-        data-aos-once="false"
-        data-aos-anchor-placement="top-bottom"
-        className='post-bg'>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper'><NavBar {...props} /></div>
-        <PostHeader {...props} />
+  const headerSlot = (
+    <header
+      data-aos="fade-up"
+      data-aos-duration="300"
+      data-aos-once="false"
+      data-aos-anchor-placement="top-bottom"
+      className="post-bg"
+    >
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper">
+        <NavBar {...props} />
+      </div>
+      <PostHeader {...props} />
     </header>
+  )
 
   return (
-        <LayoutBase {...props} headerSlot={headerSlot} showCategory={false} showTag={false} slotRight={slotRight}>
-            <div className="w-full max-w-5xl lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article">
+    <LayoutBase
+      {...props}
+      headerSlot={headerSlot}
+      showCategory={false}
+      showTag={false}
+      slotRight={slotRight}
+    >
+      <div className="w-full max-w-5xl lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article">
+        {lock && <ArticleLock validPassword={validPassword} />}
 
-                {lock && <ArticleLock validPassword={validPassword} />}
+        {!lock && (
+          <div
+            id="article-wrapper"
+            className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 "
+          >
+            <article
+              data-aos="fade-up"
+              data-aos-duration="300"
+              data-aos-once="false"
+              data-aos-anchor-placement="top-bottom"
+              itemScope
+              itemType="https://schema.org/Movie"
+              className="subpixel-antialiased overflow-y-hidden"
+            >
+              {/* Notion文章主体 */}
+              <section className="px-5 justify-center mx-auto">
+                <WWAds orientation="horizontal" className="w-full" />
+                {post && <NotionPage post={post} />}
+                <WWAds orientation="horizontal" className="w-full" />
+              </section>
 
-                {!lock && <div id="article-wrapper" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
+              {/* 分享 */}
+              <ShareBar post={post} />
+              {post?.type === 'Post' && (
+                <div className="px-5">
+                  {/* 版权 */}
+                  <ArticleCopyright {...props} />
+                  {/* 文章推荐 */}
+                  <ArticleRecommend {...props} />
+                  {/* 上一篇\下一篇文章 */}
+                  <ArticleAdjacent {...props} />
+                </div>
+              )}
+            </article>
 
-                    <article
-                        data-aos="fade-up"
-                        data-aos-duration="300"
-                        data-aos-once="false"
-                        data-aos-anchor-placement="top-bottom"
-                        itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased overflow-y-hidden" >
-                        {/* Notion文章主体 */}
-                        <section className='px-5 justify-center mx-auto'>
-                            <WWAds orientation='horizontal' className='w-full'/>
-                            {post && <NotionPage post={post} />}
-                            <WWAds orientation='horizontal' className='w-full'/>
-                        </section>
+            <div className={`${commentEnable && post ? '' : 'hidden'}`}>
+              <hr className="my-4 border-dashed" />
 
-                        {/* 分享 */}
-                        <ShareBar post={post} />
-                        {post?.type === 'Post' && <div className='px-5'>
-
-                            {/* 版权 */}
-                            <ArticleCopyright {...props} />
-                            {/* 文章推荐 */}
-                            <ArticleRecommend {...props} />
-                            {/* 上一篇\下一篇文章 */}
-                            <ArticleAdjacent {...props} />
-                        </div>}
-
-                    </article>
-
-                    <div className={`${commentEnable && post ? '' : 'hidden'}`}>
-
-                        <hr className='my-4 border-dashed' />
-
-                        {/* 评论互动 */}
-                        <div className="duration-200 overflow-x-auto px-5">
-                            <div className='text-2xl dark:text-white'><i className='fas fa-comment mr-1' />{locale.COMMON.COMMENTS}</div>
-                            <Comment frontMatter={post} className='' />
-                            <div className='py-2'>
-                             <AdSlot/>
-                            </div>
-                        </div>
-
-                    </div>
-
-                </div>}
+              {/* 评论互动 */}
+              <div className="duration-200 overflow-x-auto px-5">
+                <div className="text-2xl dark:text-white">
+                  <i className="fas fa-comment mr-1" />
+                  {locale.COMMON.COMMENTS}
+                </div>
+                <Comment frontMatter={post} className="" />
+                <div className="py-2">
+                  <AdSlot />
+                </div>
+              </div>
             </div>
-            <FloatTocButton {...props} />
-
-        </LayoutBase>
+          </div>
+        )}
+      </div>
+      <FloatTocButton {...props} />
+    </LayoutBase>
   )
 }
 
@@ -295,59 +368,69 @@ const Layout404 = props => {
   const { meta, siteInfo } = props
   const { onLoading } = useGlobal()
   return (
-        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col'>
-            {/* 网页SEO */}
-            <CommonHead meta={meta} siteInfo={siteInfo} />
-            <Style />
-
-            {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
-            <header>
-                {/* 顶部导航 */}
-                <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
-            </header>
-
-            {/* 主区块 */}
-            <main id="wrapper-outer" className={'flex-grow max-w-4xl w-screen mx-auto px-5'}>
-
-                <div id="error-wrapper" className={'w-full mx-auto justify-center'} >
-
-                    <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 translate-y-0"
-                        leaveTo="opacity-0 -translate-y-16"
-                        unmount={false}
-                    >
-
-                        {/* 404卡牌 */}
-                        <div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-3xl'>
-                            {/* 左侧动图 */}
-                            <LazyImage className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></LazyImage>
-
-                            {/* 右侧文字 */}
-                            <div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
-                                <h1 className='error-title font-extrabold md:text-9xl text-7xl'>404</h1>
-                                <div>请尝试站内搜索寻找文章</div>
-                                <Link href='/'>
-                                    <button className='bg-blue-500 p-2 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all'>回到主页</button>
-                                </Link>
-                            </div>
-                        </div>
-
-                        {/* 404页面底部显示最新文章 */}
-                        <div className='mt-12'>
-                            <LatestPostsGroup {...props} />
-                        </div>
-
-                    </Transition>
-                </div>
-            </main>
+    <div
+      id="theme-heo"
+      className="bg-[#f7f9fe] h-full min-h-screen flex flex-col"
+    >
+      {/* 网页SEO */}
+      <CommonHead meta={meta} siteInfo={siteInfo} />
+      <Style />
 
+      {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+      <header>
+        {/* 顶部导航 */}
+        <div id="nav-bar-wrapper" className="h-16">
+          <NavBar {...props} />
         </div>
+      </header>
+
+      {/* 主区块 */}
+      <main
+        id="wrapper-outer"
+        className={'flex-grow max-w-4xl w-screen mx-auto px-5'}
+      >
+        <div id="error-wrapper" className={'w-full mx-auto justify-center'}>
+          <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 translate-y-0"
+            leaveTo="opacity-0 -translate-y-16"
+            unmount={false}
+          >
+            {/* 404卡牌 */}
+            <div className="error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-3xl">
+              {/* 左侧动图 */}
+              <LazyImage
+                className="error-img h-60 md:h-full p-4"
+                src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}
+              ></LazyImage>
+
+              {/* 右侧文字 */}
+              <div className="error-info flex-1 flex flex-col justify-center items-center space-y-4">
+                <h1 className="error-title font-extrabold md:text-9xl text-7xl">
+                  404
+                </h1>
+                <div>请尝试站内搜索寻找文章</div>
+                <Link href="/">
+                  <button className="bg-blue-500 p-2 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all">
+                    回到主页
+                  </button>
+                </Link>
+              </div>
+            </div>
+
+            {/* 404页面底部显示最新文章 */}
+            <div className="mt-12">
+              <LatestPostsGroup {...props} />
+            </div>
+          </Transition>
+        </div>
+      </main>
+    </div>
   )
 }
 
@@ -359,34 +442,50 @@ const Layout404 = props => {
 const LayoutCategoryIndex = props => {
   const { categoryOptions } = props
   const { locale } = useGlobal()
-  const headerSlot = <header>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+  const headerSlot = (
+    <header>
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper" className="h-16">
+        <NavBar {...props} />
+      </div>
     </header>
+  )
 
   return (
-        <LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
-            <div id='category-outer-wrapper' className='px-5 md:px-0'>
-                <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
-                    {locale.COMMON.CATEGORY}
+    <LayoutBase {...props} className="mt-8" headerSlot={headerSlot}>
+      <div id="category-outer-wrapper" className="px-5 md:px-0">
+        <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
+          {locale.COMMON.CATEGORY}
+        </div>
+        <div
+          id="category-list"
+          className="duration-200 flex flex-wrap m-10 justify-center"
+        >
+          {categoryOptions.map(category => {
+            return (
+              <Link
+                key={category.name}
+                href={`/category/${category.name}`}
+                passHref
+                legacyBehavior
+              >
+                <div
+                  className={
+                    'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
+                  }
+                >
+                  <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
+                  {category.name}
+                  <div className="bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 ">
+                    {category.count}
+                  </div>
                 </div>
-                <div id="category-list" className="duration-200 flex flex-wrap m-10 justify-center">
-                    {categoryOptions.map(category => {
-                      return (
-                            <Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
-                                <div className={'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
-                                    <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
-                                    {category.name}
-                                    <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
-                                        {category.count}
-                                    </div>
-                                </div>
-                            </Link>
-                      )
-                    })}
-                </div>
-            </div>
-        </LayoutBase>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </LayoutBase>
   )
 }
 
@@ -398,33 +497,49 @@ const LayoutCategoryIndex = props => {
 const LayoutTagIndex = props => {
   const { tagOptions } = props
   const { locale } = useGlobal()
-  const headerSlot = <header>
-        {/* 顶部导航 */}
-        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+  const headerSlot = (
+    <header>
+      {/* 顶部导航 */}
+      <div id="nav-bar-wrapper" className="h-16">
+        <NavBar {...props} />
+      </div>
     </header>
+  )
   return (
-        <LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
-            <div id='tag-outer-wrapper' className='px-5  md:px-0'>
-                <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
-                    {locale.COMMON.TAGS}
+    <LayoutBase {...props} className="mt-8" headerSlot={headerSlot}>
+      <div id="tag-outer-wrapper" className="px-5  md:px-0">
+        <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
+          {locale.COMMON.TAGS}
+        </div>
+        <div
+          id="tag-list"
+          className="duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center"
+        >
+          {tagOptions.map(tag => {
+            return (
+              <Link
+                key={tag.name}
+                href={`/tag/${tag.name}`}
+                passHref
+                legacyBehavior
+              >
+                <div
+                  className={
+                    'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
+                  }
+                >
+                  <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
+                  {tag.name}
+                  <div className="bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 ">
+                    {tag.count}
+                  </div>
                 </div>
-                <div id="tag-list" className="duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center">
-                    {tagOptions.map(tag => {
-                      return (
-                            <Link key={tag.name} href={`/tag/${tag.name}`} passHref legacyBehavior>
-                                <div className={'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'}>
-                                    <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
-                                    {tag.name}
-                                    <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
-                                        {tag.count}
-                                    </div>
-                                </div>
-                            </Link>
-                      )
-                    })}
-                </div>
-            </div>
-        </LayoutBase>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </LayoutBase>
   )
 }
 

themes/heo/style.js

@@ -5,60 +5,65 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    body {
-        background-color:  #f7f9fe;
+  return (
+    <style jsx global>{`
+      body {
+        background-color: #f7f9fe;
         overflow-x: hidden;
-    }
+      }
 
-    // 公告栏中的字体固定白色
-    #theme-heo #announcement-content .notion{
+      // 公告栏中的字体固定白色
+      #theme-heo #announcement-content .notion {
         color: white;
-    }
+      }
 
-    ::-webkit-scrollbar-thumb {
+      ::-webkit-scrollbar-thumb {
         background: rgba(60, 60, 67, 0.4);
         border-radius: 8px;
         cursor: pointer;
-    }
+      }
 
-    ::-webkit-scrollbar {
+      ::-webkit-scrollbar {
         width: 8px;
         height: 8px;
-    }
+      }
 
-    .today-card-cover {
+      #more {
+        white-space: nowrap;
+      }
+
+      .today-card-cover {
         -webkit-mask-image: linear-gradient(to top, transparent 5%, black 70%);
-        mask-image: linear-gradient(to top, transparent 5%, black 70%);      
-    }
+        mask-image: linear-gradient(to top, transparent 5%, black 70%);
+      }
 
-    .recent-top-post-group::-webkit-scrollbar {
+      .recent-top-post-group::-webkit-scrollbar {
         display: none;
-    }
-    
-    .scroll-hidden::-webkit-scrollbar {
-        display: none;
-    }
+      }
 
-    * {
+      .scroll-hidden::-webkit-scrollbar {
+        display: none;
+      }
+
+      * {
         box-sizing: border-box;
-    }
+      }
 
-    // 标签滚动动画
-    .tags-group-wrapper {
+      // 标签滚动动画
+      .tags-group-wrapper {
         animation: rowup 60s linear infinite;
-    }
-    
-    @keyframes rowup {
+      }
+
+      @keyframes rowup {
         0% {
-            transform: translateX(0%);
+          transform: translateX(0%);
         }
         100% {
-            transform: translateX(-50%);
+          transform: translateX(-50%);
         }
-    }
-
-  `}</style>
+      }
+    `}</style>
+  )
 }
 
 export { Style }