From 43287cbf74d6514de165bddd7226e639db895af1 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 13 Jul 2023 16:54:52 +0800
Subject: [PATCH] =?UTF-8?q?heo-=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/HeroIcons.js                   |   6 +
 lib/notion/getNotionData.js               |   2 +-
 themes/heo/components/AnalyticsCard.js    |  50 ++++----
 themes/heo/components/BlogPostCard.js     |   8 +-
 themes/heo/components/BlogPostListPage.js |   2 +-
 themes/heo/components/Header.js           |   2 +-
 themes/heo/components/Hero.js             | 137 ++++++++++++++++-----
 themes/heo/components/InfoCard.js         |  23 +++-
 themes/heo/components/Logo.js             |  23 ++--
 themes/heo/components/NoticeBar.js        |  18 +++
 themes/heo/components/SideRight.js        |   2 +
 themes/heo/config.js                      |  12 +-
 themes/heo/index.js                       | 143 ++++++++++++++--------
 themes/heo/style.js                       |   5 +
 14 files changed, 306 insertions(+), 127 deletions(-)
 create mode 100644 themes/heo/components/NoticeBar.js

diff --git a/components/HeroIcons.js b/components/HeroIcons.js
index c9cbcce2..f40fdfc3 100644
--- a/components/HeroIcons.js
+++ b/components/HeroIcons.js
@@ -74,3 +74,9 @@ export const ArrowRightCircle = ({ className }) => {
     <path strokeLinecap="round" strokeLinejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   </svg>
 }
+
+export const PlusSmall = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+  </svg>
+}
diff --git a/lib/notion/getNotionData.js b/lib/notion/getNotionData.js
index 89126d9c..fb6bc942 100644
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -309,7 +309,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
   const customNav = getCustomNav({ allPages: collectionData.filter(post => post?.type === 'Page' && post.status === 'Published') })
   // 新的菜单
   const customMenu = await getCustomMenu({ collectionData })
-  const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
+  const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 6 })
   const allNavPages = getNavPages({ allPages })
 
   return {
diff --git a/themes/heo/components/AnalyticsCard.js b/themes/heo/components/AnalyticsCard.js
index 0ee1e1cd..9732fcd4 100644
--- a/themes/heo/components/AnalyticsCard.js
+++ b/themes/heo/components/AnalyticsCard.js
@@ -1,30 +1,28 @@
-import Card from './Card'
-
-export function AnalyticsCard (props) {
+export function AnalyticsCard(props) {
   const { postCount } = props
-  return <Card>
-    <div className='ml-2 mb-3 '>
-      <i className='fas fa-chart-area' /> 统计
-    </div>
-    <div className='text-xs  font-light justify-center mx-7'>
-      <div className='inline'>
-        <div className='flex justify-between'>
-          <div>文章数:</div>
-          <div>{postCount}</div>
+  return <>
+        <div className='ml-2 mb-3 '>
+            <i className='fas fa-chart-area' /> 统计
         </div>
-      </div>
-      <div className='hidden busuanzi_container_page_pv ml-2'>
-        <div className='flex justify-between'>
-          <div>访问量:</div>
-          <div className='busuanzi_value_page_pv' />
+        <div className='text-xs  font-light justify-center mx-7'>
+            <div className='inline'>
+                <div className='flex justify-between'>
+                    <div>文章数:</div>
+                    <div>{postCount}</div>
+                </div>
+            </div>
+            <div className='hidden busuanzi_container_page_pv ml-2'>
+                <div className='flex justify-between'>
+                    <div>访问量:</div>
+                    <div className='busuanzi_value_page_pv' />
+                </div>
+            </div>
+            <div className='hidden busuanzi_container_site_uv ml-2'>
+                <div className='flex justify-between'>
+                    <div>访客数:</div>
+                    <div className='busuanzi_value_site_uv' />
+                </div>
+            </div>
         </div>
-      </div>
-      <div className='hidden busuanzi_container_site_uv ml-2'>
-        <div className='flex justify-between'>
-          <div>访客数:</div>
-          <div className='busuanzi_value_site_uv' />
-        </div>
-      </div>
-    </div>
-  </Card>
+        </>
 }
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index 43be9051..142a54fc 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React, { useState } from 'react'
 import CONFIG from '../config'
 import BLOG from '@/blog.config'
 import TagItemMini from './TagItemMini'
@@ -7,20 +6,19 @@ import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
-  const [onHover, setOnHover] = useState(false)
   if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
   const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
   return (
         <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div onMouseEnter={() => setOnHover(true)} onMouseLeave={() => setOnHover(false)} className={'w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden  rounded-xl bg-white '}>
+            <div className={'group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between flex flex-col lg:h-96 overflow-hidden  rounded-xl bg-white '}>
 
                 {/* 图片封面 */}
                 {showPageCover && (
                     <div className="flex-1 h-60 md:w-5/12 lg:w-full overflow-hidden">
                         <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                            <div className={`h-60 bg-center bg-cover ${onHover ? 'scale-105 brightness-75' : ''} transition-all duration-300`} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
+                            <div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
                         </Link>
                     </div>
                 )}
@@ -41,7 +39,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                         <Link
                             href={`${BLOG.SUB_PATH}/${post.slug}`}
                             passHref
-                            className={`${onHover ? 'text-indigo-700 dark:text-indigo-400' : ' text-black dark:text-gray-100'} line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight`}>
+                            className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight'}>
 
                             <span className='menu-link '>{post.title}</span>
 
diff --git a/themes/heo/components/BlogPostListPage.js b/themes/heo/components/BlogPostListPage.js
index bf4fa625..c2ec5869 100644
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -20,7 +20,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return (
       <div id="container" className='w-full'>
         {/* 文章列表 */}
-        <div className="lg:grid lg:grid-cols-2 gap-5">
+        <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
           {posts?.map(post => (
             <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
           ))}
diff --git a/themes/heo/components/Header.js b/themes/heo/components/Header.js
index 4056da31..81c3ee0e 100644
--- a/themes/heo/components/Header.js
+++ b/themes/heo/components/Header.js
@@ -45,7 +45,7 @@ const Header = props => {
   return (<>
         {/* 头条 */}
         <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center top-0 duration-300 transition-all sticky text-black w-full z-20 transform`}>
-            <div className='w-full max-w-[88rem] mx-auto flex justify-between items-center px-5'>
+            <div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-5'>
                 <div className='flex'>
                     <Logo {...props} />
                 </div>
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index cdc96506..8f8c24c8 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -1,43 +1,124 @@
 // import Image from 'next/image'
 
+import BLOG from '@/blog.config'
+import { PlusSmall } from '@/components/HeroIcons'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
 /**
- * 顶部全屏大图
+ * 顶部英雄区
+ * 左右布局，
+ * 左侧：banner组
+ * 右侧：今日卡牌遮罩
  * @returns
  */
 const Hero = props => {
-  return (
-        <>
-            <notice className="max-w-[88rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-                <div className="bg-white rounded-xl border w-full h-full flex items-center justify-between px-5">
-                    <div>左侧 图表</div>
-                    <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">这里是公告栏</div>
-                    <div>右侧按钮</div>
+  return (<hero id="hero" style={{ zIndex: 1 }} className="max-w-[86rem] w-full mx-auto flex relative space-x-6 px-5" >
+        {/* 左侧banner组 */}
+        <BannerGroup />
+
+        {/* 右侧置顶文章组 */}
+        <TopGroup {...props} />
+
+    </hero>)
+}
+
+/**
+ * 英雄区左侧banner组
+ * @returns
+ */
+function BannerGroup() {
+  return <div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
+        <div className="h-60 bg-white rounded-xl border my-2"></div>
+
+        <div className="h-20 flex flex-nowrap justify-between space-x-3 my-2">
+            <Link href="/tag/必看精选" className="bg-blue-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out ">
+                <div className="font-bold text-lg pl-4 relative">
+                    必看精选
+                    <span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
                 </div>
-            </notice>
+            </Link>
+            <Link href="/tag/热门文章" className="bg-orange-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
+                <div className="font-bold text-lg pl-4 relative">
+                    热门文章
+                    <span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
+                </div>
+            </Link>
+            <Link href="/tag/实用教程" className="bg-emerald-500 flex justify-start items-center text-white rounded-xl hover:w-1/2 w-1/3 transition-all duration-300 ease-in-out">
+                <div className="font-bold text-lg pl-4 relative">
+                    实用教程
+                    <span className="absolute -bottom-0.5 left-4 w-5 h-0.5 bg-white rounded-full"></span>
+                </div>
+            </Link>
+        </div>
 
-            <hero id="hero" style={{ zIndex: 1 }} className="max-w-[88rem] w-full mx-auto flex relative space-x-3 px-5" >
-                <div id='hero-left' className='flex flex-col flex-1 bg-red-200'>
-                    <div className="h-60 bg-white rounded-xl border my-2"></div>
-                    <div className="h-20 flex flex-nowrap justify-between space-x-3 my-2">
-                        <div className="bg-white rounded-xl border flex-1">
+    </div>
+}
 
-                        </div>
-                        <div className="bg-white rounded-xl border flex-1">
-
-                        </div>
-                        <div className="bg-white rounded-xl border flex-1">
-
-                        </div>
+/**
+ * 置顶文章区域
+ */
+function TopGroup(props) {
+  const { latestPosts, siteInfo } = props
+  return <div id='hero-right' className='bg-green-200 flex-1 relative'>
+        <div id='top-group' className='w-full h-full grid grid-cols-3 gap-3 py-2'>
+            {latestPosts?.map(p => {
+              return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
+                    <div className='cursor-pointer group relative flex flex-col w-52 overflow-hidden shadow bg-white rounded-xl'>
+                        {/* eslint-disable-next-line */}
+                        <img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
+                        <div className='h-16 line-clamp-2 overflow-hidden p-3 font-semibold'>{p?.title}</div>
+                        <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 text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>荐</div>
                     </div>
-                </div>
-                <div id='hero-right' className='flex flex-col flex-1 bg-green-200 '>
-                    <div className="my-2 h-full bg-white rounded-xl border "></div>
+                </Link>
+            })}
+        </div>
 
-                </div>
-            </hero>
+        <TodayCard />
+    </div>
+}
 
-        </>
-  )
+/**
+ * 英雄区右侧，今日卡牌
+ * @returns
+ */
+function TodayCard() {
+  // 卡牌是否盖住下层
+  const [isCoverUp, setIsCoverUp] = useState(true)
+  const router = useRouter()
+  function handleMouseLeave() {
+    setIsCoverUp(true)
+  }
+
+  function handleClickMore(e) {
+    e.stopPropagation()
+    setIsCoverUp(false)
+  }
+
+  /**
+     * 点击卡片跳转的链接
+     * @param {*} e
+     */
+  function handleCardClick(e) {
+    router.push('https://tangly1024.com')
+  }
+
+  return <div id='today-card' className={'overflow-hidden absolute flex flex-1 flex-col h-full top-0 w-full'}>
+        <div id='card-body' onMouseLeave={handleMouseLeave} onClick={handleCardClick} className={`${isCoverUp ? 'opacity-100 cursor-pointer' : 'opacity-0 transform scale-110'} transition-all duration-150today-card my-2 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-sm font-light'>新版上线</div>
+                    <div className='text-3xl font-extrabold'>NotionNext4.0轻松定制主题</div>
+                </div>
+                <div onClick={handleClickMore} className={`'${isCoverUp ? '' : 'hidden pointer-events-none '} cursor-zoom-in 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>
+            </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
diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js
index 34bca55d..58d2e758 100644
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -1,6 +1,8 @@
 import BLOG from '@/blog.config'
 import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
 import Link from 'next/link'
+import { useState } from 'react'
+import CONFIG from '../config'
 import Announcement from './Announcement'
 import Card from './Card'
 
@@ -14,9 +16,7 @@ export function InfoCard(props) {
   return (
         <Card className='bg-[#4f65f0] text-white flex flex-col w-72'>
             <div className='flex justify-between'>
-
-                <div className='py-1 px-2 bg-indigo-500 text-sm rounded-lg hover:bg-indigo-50 hover:text-indigo-950 duration-200 transition-colors'>你好！我是</div>
-
+                <GreetingsWords />
                 <div className='justify-center items-center flex dark:text-gray-100 transform duration-200 cursor-pointer'>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={siteInfo?.icon} className='rounded-full' width={28} alt={BLOG.AUTHOR} />
@@ -42,6 +42,23 @@ export function InfoCard(props) {
   )
 }
 
+/**
+ * 欢迎语
+ */
+function GreetingsWords() {
+  const greetings = CONFIG.INFOCARD_GREETINGS
+  const [greeting, setGreeting] = useState(greetings[0])
+  // 每次点击，随机获取greetings中的一个
+  const handleChangeGreeting = () => {
+    const randomIndex = Math.floor(Math.random() * greetings.length)
+    setGreeting(greetings[randomIndex])
+  }
+
+  return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 text-sm rounded-lg hover:bg-indigo-50 hover:text-indigo-950 duration-200 transition-colors'>
+    {greeting}
+  </div>
+}
+
 /**
  * 了解更多按鈕
  * @returns
diff --git a/themes/heo/components/Logo.js b/themes/heo/components/Logo.js
index 5163a566..846c22ae 100644
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -1,17 +1,26 @@
 import BLOG from '@/blog.config'
+import { Home } from '@/components/HeroIcons'
 import Link from 'next/link'
 import React from 'react'
 
 const Logo = props => {
   const { siteInfo } = props
   return (
-    <Link href='/' passHref legacyBehavior>
-      <div className='flex justify-center items-center cursor-pointer font-extrabold'>
-        {/*  eslint-disable-next-line @next/next/no-img-element */}
-        <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
-        <div className='text-lg my-auto rounded dark:border-white transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
-      </div>
-    </Link>
+        <Link href='/' passHref legacyBehavior>
+            <div className='flex justify-center items-center cursor-pointer font-extrabold'>
+                {/*  eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
+                <div id='logo-text' className='group hover:bg-indigo-600 rounded-2xl'>
+                    <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200  transition-all '>
+                        {siteInfo?.title || BLOG.TITLE}
+                    </div>
+                    <div className='group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-4 justify-center px-8 py-1 transition-all duration-200'>
+                        <Home className={'w-6 h-6 stroke-white stroke-2'}/>
+                    </div>
+                </div>
+            </div>
+
+        </Link>
   )
 }
 export default Logo
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
new file mode 100644
index 00000000..5d9e8843
--- /dev/null
+++ b/themes/heo/components/NoticeBar.js
@@ -0,0 +1,18 @@
+
+import { ArrowRightCircle } from '@/components/HeroIcons'
+import Link from 'next/link'
+
+/**
+ * 通知横幅
+ */
+export function NoticeBar() {
+  return (
+          <notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
+              <Link href='https://tangly1024.com' className="bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
+                  <span className='whitespace-nowrap'>此刻</span>
+                  <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">欢迎来到我的博客</div>
+                  <div><ArrowRightCircle className={'w-5 h-5'} /></div>
+              </Link>
+          </notice>
+  )
+}
diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js
index b929b934..2f5b3875 100644
--- a/themes/heo/components/SideRight.js
+++ b/themes/heo/components/SideRight.js
@@ -7,6 +7,7 @@ import Live2D from '@/components/Live2D'
 import MenuGroupCard from './MenuGroupCard'
 import FlipCard from '@/components/FlipCard'
 import Link from 'next/link'
+import { AnalyticsCard } from './AnalyticsCard'
 
 const FaceBookPage = dynamic(
   () => {
@@ -63,6 +64,7 @@ export default function SideRight(props) {
                 <TagGroups tags={tagOptions} currentTag={currentTag} />
                 <hr className='mx-1 flex border-dashed relative my-2'/>
                 <MenuGroupCard {...props} />
+                <AnalyticsCard {...props} />
             </Card>
 
             <div className='sticky top-20'>
diff --git a/themes/heo/config.js b/themes/heo/config.js
index b24d4fd1..6f0fe77f 100644
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -1,7 +1,15 @@
 const CONFIG = {
   HOME_BANNER_ENABLE: true,
-  // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
-  HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  // 欢迎语
+  INFOCARD_GREETINGS: [
+    '你好！我是',
+    '🔍 分享与热心帮助',
+    '🤝 专修交互与设计',
+    '🏃 脚踏实地行动派',
+    '🏠 智能家居小能手',
+    '🤖️ 数码科技爱好者',
+    '🧱 团队小组发动机'
+  ],
 
   HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
   // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 3e2c1322..16260482 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -27,11 +27,12 @@ import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
 import ArticleRecommend from './components/ArticleRecommend'
 import ShareBar from '@/components/ShareBar'
-import TagItemMini from './components/TagItemMini'
 import Link from 'next/link'
 import CategoryBar from './components/CategoryBar'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
+import { NoticeBar } from './components/NoticeBar'
+import { HashTag } from '@/components/HeroIcons'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -40,7 +41,7 @@ import { Style } from './style'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, headerSlot, slotTop, meta, siteInfo, className } = props
+  const { children, headerSlot, slotTop, slotRight, meta, siteInfo } = props
   const { onLoading } = useGlobal()
 
   // 加载主题样式
@@ -49,10 +50,10 @@ const LayoutBase = props => {
   }
 
   return (
-        <div id='theme-heo' className='bg-[#f7f9fe]'>
+        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col'>
             {/* 网页SEO */}
             <CommonHead meta={meta} siteInfo={siteInfo} />
-            <Style/>
+            <Style />
 
             {/* 顶部导航 */}
             <Header {...props} />
@@ -73,30 +74,41 @@ const LayoutBase = props => {
             </Transition>
 
             {/* 主区块 */}
-            <main id="wrapper-outer" className={'w-full max-w-[88rem] mx-auto min-h-screen relative p-5'}>
-                <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
-                    <div className={`${className || ''} w-full  h-full`}>
+            <main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative p-5'}>
+                <div id="container-inner" className={' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
 
-                        <Transition
-                            show={!onLoading}
-                            appear={true}
-                            enter="transition ease-in-out duration-700 transform order-first"
-                            enterFrom="opacity-0 translate-y-16"
-                            enterTo="opacity-100 translate-y-0"
-                            leave="transition ease-in-out duration-300 transform"
-                            leaveFrom="opacity-100 translate-y-0"
-                            leaveTo="opacity-0 -translate-y-16"
-                            unmount={false}
-                        >
-                            {/* 主区上部嵌入 */}
-                            {slotTop}
+                    <Transition
+                        show={!onLoading}
+                        appear={true}
+                        enter="transition ease-in-out duration-700 transform order-first"
+                        enterFrom="opacity-0 translate-y-16"
+                        enterTo="opacity-100 translate-y-0"
+                        leave="transition ease-in-out duration-300 transform"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 -translate-y-16"
+                        unmount={false}
+                    >
+                        {/* 主区上部嵌入 */}
+                        {slotTop}
 
-                            {children}
-                        </Transition>
-                    </div>
+                        {children}
+                    </Transition>
 
-                    {/* 右侧栏 */}
-                    <SideRight {...props} />
+                    <Transition
+                        show={!onLoading}
+                        appear={true}
+                        enter="transition ease-in-out duration-700 transform order-first"
+                        enterFrom="opacity-0 translate-y-16"
+                        enterTo="opacity-100 translate-y-0"
+                        leave="transition ease-in-out duration-300 transform"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 -translate-y-16"
+                        unmount={false}
+                    >
+                        {/* 主区快右侧 */}
+                        {slotRight}
+
+                    </Transition>
                 </div>
             </main>
 
@@ -113,7 +125,7 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = (props) => {
-  return <LayoutPostList {...props}/>
+  return <LayoutPostList {...props} />
 }
 
 /**
@@ -122,9 +134,24 @@ const LayoutIndex = (props) => {
  * @returns
  */
 const LayoutPostList = (props) => {
-  return <LayoutBase {...props} headerSlot={<Hero {...props} />}>
+  // 博客列表上方嵌入一个 通知横幅和英雄块
+  const headerSlot = <>
+        {/* 通知横幅 */}
+        <NoticeBar />
+        <Hero {...props} />
+    </>
+
+  // 右侧栏
+  const slotRight = <SideRight {...props} />
+
+  return <LayoutBase {...props} headerSlot={headerSlot} slotRight={slotRight}>
+
+       {/* 文章分类条 */}
         <CategoryBar {...props} />
-        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+
+        {BLOG.POST_LIST_STYLE === 'page'
+          ? <BlogPostListPage {...props} />
+          : <BlogPostListScroll {...props} />}
     </LayoutBase>
 }
 
@@ -295,22 +322,24 @@ const LayoutCategoryIndex = props => {
   const { locale } = useGlobal()
   return (
         <LayoutBase {...props} className='mt-8'>
-            <Card className="w-full min-h-screen">
-                <div className="dark:text-gray-200 mb-5 mx-3">
-                    <i className="mr-4 fas fa-th" />  {locale.COMMON.CATEGORY}:
-                </div>
-                <div id="category-list" className="duration-200 flex flex-wrap mx-8">
-                    {categoryOptions.map(category => {
-                      return (
-                            <Link key={category.name} href={`/category/${category.name}`} passHref legacyBehavior>
-                                <div className={' duration-300 dark:hover:text-white px-5 cursor-pointer py-2 hover:text-indigo-400'}>
-                                    <i className="mr-4 fas fa-folder" />  {category.name}({category.count})
+            <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 space-x-5 m-10 justify-center">
+                {categoryOptions.map(category => {
+                  return (
+                        <Link key={category.name} href={`/category/${category.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'} />
+                                {category.name}
+                                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
+                                    {category.count}
                                 </div>
-                            </Link>
-                      )
-                    })}
-                </div>
-            </Card>
+                            </div>
+                        </Link>
+                  )
+                })}
+            </div>
         </LayoutBase>
   )
 }
@@ -325,16 +354,24 @@ const LayoutTagIndex = props => {
   const { locale } = useGlobal()
   return (
         <LayoutBase {...props} className='mt-8'>
-            <Card className='w-full'>
-                <div className="dark:text-gray-200 mb-5 ml-4">
-                    <i className="mr-4 fas fa-tag" /> {locale.COMMON.TAGS}:
-                </div>
-                <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
-                    {tagOptions.map(tag => <div key={tag.name} className="p-2">
-                        <TagItemMini key={tag.name} tag={tag} />
-                    </div>)}
-                </div>
-            </Card>
+            <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 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>
         </LayoutBase>
   )
 }
diff --git a/themes/heo/style.js b/themes/heo/style.js
index a02cc7d9..0f223060 100644
--- a/themes/heo/style.js
+++ b/themes/heo/style.js
@@ -27,6 +27,11 @@ const Style = () => {
         height: 8px;
     }
 
+    .today-card-cover {
+        -webkit-mask-image: linear-gradient(to top, transparent 5%, black 70%);
+        mask-image: linear-gradient(to top, transparent 5%, black 70%);      
+    }
+
   `}</style>
 }