diff --git a/themes/example/components/BlogPostCard.js b/themes/example/components/BlogPostCard.js
index a8783f8c..b66dcca3 100644
--- a/themes/example/components/BlogPostCard.js
+++ b/themes/example/components/BlogPostCard.js
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import LazyImage from '@/components/LazyImage'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 const BlogPostCard = ({ post }) => {
   const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail
@@ -15,16 +16,18 @@ const BlogPostCard = ({ post }) => {
                 <Link
                     href={`/${post.slug}`}
                     className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                    {post?.title}
+                    <NotionIcon icon={post.pageIcon} />{post?.title}
                 </Link>
             </h2>
 
             <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
                 by <a href="#" className="text-gray-700 dark:text-gray-300">{siteConfig('AUTHOR')}</a> on {post.date?.start_date || post.createdTime}
                 <TwikooCommentCount post={post} className='pl-1'/>
+               {post.category && <>
                 <span className="font-bold mx-1"> | </span>
                 <Link href={`/category/${post.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{post.category}</Link>
-                {/* <span className="font-bold mx-1"> | </span> */}
+               </>}
+                            {/* <span className="font-bold mx-1"> | </span> */}
                 {/* <a href="#" className="text-gray-700">2 Comments</a> */}
             </div>
 
diff --git a/themes/example/components/Title.js b/themes/example/components/Title.js
index 5c251b0d..4308611a 100644
--- a/themes/example/components/Title.js
+++ b/themes/example/components/Title.js
@@ -1,3 +1,4 @@
+import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
 
 /**
@@ -9,9 +10,10 @@ export const Title = (props) => {
   const { post } = props
   const title = post?.title || siteConfig('TITLE')
   const description = post?.description || siteConfig('AUTHOR')
+  console.log('post', post)
 
   return <div className="text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b">
-        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
+        <h1 className="text-xl md:text-4xl pb-4"><NotionIcon icon={post?.pageIcon} />{title}</h1>
         <p className="leading-loose text-gray-dark">
             {description}
         </p>
diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
index 1b9076a4..fb038e3d 100644
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -9,6 +9,7 @@ import { AdSlot } from '@/components/GoogleAdsense'
 import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/formatDate'
 import WWAds from '@/components/WWAds'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  *
@@ -36,7 +37,7 @@ export default function ArticleDetail(props) {
 
           {/* 文章Title */}
           <div className="font-bold text-4xl text-black dark:text-white">
-            {post.title}
+            <NotionIcon icon={post?.pageIcon} />{post.title}
           </div>
 
           <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
index 6c85bfc8..d54daaba 100644
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -4,6 +4,7 @@ import TagItemMini from './TagItemMini'
 import CONFIG from '../config'
 import LazyImage from '@/components/LazyImage'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  * 文章列表卡片
@@ -32,7 +33,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
   const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
 
   return (
-        <div {...aosProps} style={{ maxHeight: '60rem' }}
+        <article {...aosProps} style={{ maxHeight: '60rem' }}
             className="w-full lg:max-w-sm p-3 shadow mb-4 mx-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200"
         >
             <div className="flex flex-col justify-between h-full">
@@ -51,16 +52,18 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
 
                 {/* 文字部分 */}
                 <div className="flex flex-col w-full">
-                    <Link passHref href={url}
-                         className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
-                    >
-                        {post.title}
-                    </Link>
+                    <h2>
+                        <Link passHref href={url}
+                            className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
+                        >
+                        <NotionIcon icon={post.pageIcon} /> {post.title}
+                        </Link>
+                    </h2>
 
                     {(!showPreview || showSummary) && (
-                        <p className="my-2 tracking-wide line-clamp-3 text-gray-800 dark:text-gray-300 text-md font-light leading-6">
+                        <main className="my-2 tracking-wide line-clamp-3 text-gray-800 dark:text-gray-300 text-md font-light leading-6">
                             {post.summary}
-                        </p>
+                        </main>
                     )}
 
                     {/* 分类标签 */}
@@ -83,7 +86,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
                     </div>
                 </div>
             </div>
-        </div>
+        </article>
   )
 }
 
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index b141252a..cd4f2207 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -33,6 +33,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { siteConfig } from '@/lib/config'
+import NotionIcon from '@/components/NotionIcon'
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
 // 主题全局变量
@@ -219,7 +220,7 @@ const LayoutSlug = (props) => {
             {!lock && <div id='container'>
 
                 {/* title */}
-                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
+                <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
 
                 {/* Notion文章主体 */}
                 {post && (<section id="article-wrapper" className="px-1">
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index fa16fc25..b07fa06c 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -4,6 +4,7 @@ import TagItemMini from './TagItemMini'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPreview = siteConfig('HEO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
@@ -13,7 +14,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover = siteConfig('HEO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview
   const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
   return (
-        <div className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+        <article className={` ${siteConfig('HEO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
 
             <div
                 data-aos="fade-up"
@@ -33,7 +34,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
                 {/* 文字区块 */}
                 <div className={'flex p-6 2xl:p-4 flex-col justify-between h-48 md:h-full 2xl:h-48 w-full md:w-7/12 2xl:w-full'}>
-                    <div>
+                    <header>
                         {/* 分类 */}
                         {post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
                             <Link passHref href={`/category/${post.category}`}
@@ -47,15 +48,15 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                             href={url}
                             passHref
                             className={' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
-                            <span className='menu-link '>{post.title}</span>
+                            <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
                         </Link>
-                    </div>
+                    </header>
 
                     {/* 摘要 */}
                     {(!showPreview || showSummary) && (
-                        <p className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
+                        <main className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
                             {post.summary}
-                        </p>
+                        </main>
                     )}
 
                     <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
@@ -70,7 +71,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 </div>
             </div>
 
-        </div>
+        </article>
 
   )
 }
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js
index 890952d5..6ab5eda7 100644
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -5,6 +5,7 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/formatDate'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  * 博客列表的文字内容
@@ -13,58 +14,63 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
  */
 export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => {
   const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
-  return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
+  return <article className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
        <div>
-         {/* 标题 */}
-         <Link
-            href={url}
-            passHref
-            className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
-                } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
+            <header>
+                <h2>
+                    {/* 标题 */}
+                    <Link
+                        href={url}
+                        passHref
+                        className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
+                            } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
 
-            <span className='menu-link '>{post.title}</span>
+                        <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
 
-        </Link>
+                    </Link>
+                </h2>
 
-        {/* 分类 */}
-        { post?.category && <div
-            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
-                } flex-wrap dark:text-gray-500 text-gray-400 `}
-        >
-            <Link
-                href={`/category/${post.category}`}
-                passHref
-                className="cursor-pointer font-light text-sm menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                {/* 分类 */}
+                { post?.category && <div
+                    className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
+                        } flex-wrap dark:text-gray-500 text-gray-400 `}
+                >
+                    <Link
+                        href={`/category/${post.category}`}
+                        passHref
+                        className="cursor-pointer font-light text-sm menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
 
-                <i className="mr-1 far fa-folder" />
-                {post.category}
+                        <i className="mr-1 far fa-folder" />
+                        {post.category}
 
-            </Link>
+                    </Link>
 
-            <TwikooCommentCount className='text-sm hover:text-indigo-700 dark:hover:text-indigo-400' post={post}/>
-        </div>}
+                    <TwikooCommentCount className='text-sm hover:text-indigo-700 dark:hover:text-indigo-400' post={post}/>
+                </div>}
+            </header>
 
-          {/* 摘要 */}
-          {(!showPreview || showSummary) && !post.results && (
-            <p className="line-clamp-2 replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+            {/* 摘要 */}
+            {(!showPreview || showSummary) && !post.results && (
+            <main className="line-clamp-2 replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
                 {post.summary}
-            </p>
-          )}
+            </main>
+            )}
 
-        {/* 搜索结果 */}
-        {post.results && (
-            <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                    {post.results.map((r, index) => (
-                        <span key={index}>{r}</span>
-                    ))}
-            </p>
-        )}
-        {/* 预览 */}
-        {showPreview && (
-            <div className="overflow-ellipsis truncate">
-                <NotionPage post={post} />
-            </div>
-        )}
+            {/* 搜索结果 */}
+            {post.results && (
+                <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                        {post.results.map((r, index) => (
+                            <span key={index}>{r}</span>
+                        ))}
+                </p>
+            )}
+
+            {/* 预览 */}
+            {showPreview && (
+                <div className="overflow-ellipsis truncate">
+                    <NotionPage post={post} />
+                </div>
+            )}
 
        </div>
 
@@ -92,5 +98,5 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
             </div>
         </div>
        </div>
-       </div>
+    </article>
 }
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index 7700957d..d66ee6db 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -6,6 +6,7 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/formatDate'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPreview = siteConfig('MATERY_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
@@ -27,7 +28,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
             className="w-full mb-4 overflow-hidden shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
 
             {/* 固定高度 ，空白用图片拉升填充 */}
-            <div className="group flex flex-col h-80 justify-between">
+            <header className="group flex flex-col h-80 justify-between">
 
                 {/* 头部图片 填充卡片 */}
                 {showPageCover && (
@@ -38,13 +39,15 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                                 alt={post.title}
                                 className="h-full w-full group-hover:scale-125 group-hover:brightness-50 brightness-90 rounded-t-md transform object-cover duration-500"
                             />
-                            <div className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full shadow-text'>{post.title}</div>
+                            <h2 className='absolute bottom-0 left-0 text-white p-6 text-2xl replace break-words w-full shadow-text'>
+                                <NotionIcon icon={post.pageIcon} />{post.title}
+                            </h2>
                         </div>
                     </Link>
                 )}
 
                 {/* 文字描述 */}
-                <div >
+                <main >
                     {/* 描述 */}
                     <div className="px-4 flex flex-col w-full  text-gray-700  dark:text-gray-300">
 
@@ -93,8 +96,8 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                             </div>
                         </div>
                     </>)}
-                </div>
-            </div>
+                </main>
+            </header>
 
         </div>
   )
diff --git a/themes/matery/components/PostHeader.js b/themes/matery/components/PostHeader.js
index 56f8e541..9279b78c 100644
--- a/themes/matery/components/PostHeader.js
+++ b/themes/matery/components/PostHeader.js
@@ -1,4 +1,5 @@
 import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  * 文章背景图
@@ -9,7 +10,7 @@ export default function PostHeader({ post, siteInfo }) {
   return (
         <div id='header' className="flex h-96 justify-center align-middle items-center w-full relative bg-black">
             <div className="z-10 leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
-                {title}
+                <NotionIcon icon={post?.pageIcon} />{title}
             </div>
             <LazyImage alt={title} src={headerImage} className='pointer-events-none select-none w-full h-full object-cover opacity-30 absolute'
                 placeholder='blur' blurDataURL='/bg_image.jpg' />
diff --git a/themes/medium/components/ArticleInfo.js b/themes/medium/components/ArticleInfo.js
index 12c189db..c96ccbf7 100644
--- a/themes/medium/components/ArticleInfo.js
+++ b/themes/medium/components/ArticleInfo.js
@@ -1,6 +1,7 @@
 import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  * 文章详情页介绍
@@ -12,7 +13,7 @@ export default function ArticleInfo(props) {
 
   return (<>
         {/* title */}
-        <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
+        <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
 
         {/* meta */}
         <section className="py-2 items-center text-sm  px-1">
diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js
index a3e9e6bf..7b2cda0e 100644
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -8,6 +8,7 @@ import TagItemMini from './TagItemMini'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import LazyImage from '@/components/LazyImage'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = siteConfig('MEDIUM_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
@@ -23,19 +24,19 @@ const BlogPostCard = ({ post, showSummary }) => {
             className="mb-6 max-w-7xl border-b dark:border-gray-800 "
         >
 
-            <div className="lg:py-8 py-4 flex flex-col w-full">
+            <header className="lg:py-8 py-4 flex flex-col w-full">
                 <Link
                     href={url}
                     passHref
                     className={
                         'cursor-pointer font-bold  hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
                     }>
-                    <div>
+                    <h2>
                         {siteConfig('MEDIUM_POST_LIST_COVER', null, CONFIG) && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
                             <LazyImage src={post.pageCoverThumbnail} style={post.pageCoverThumbnail ? {} : { height: '0px' }} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
                         </div>}
-                        {post.title}
-                    </div>
+                        <NotionIcon icon={post.pageIcon} />{post.title}
+                    </h2>
 
                 </Link>
 
@@ -53,9 +54,9 @@ const BlogPostCard = ({ post, showSummary }) => {
                 <div className="flex"></div>
 
                 {(!showPreview || showSummary) && (
-                    <p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                    <main className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
                         {post.summary}
-                    </p>
+                    </main>
                 )}
 
                 {showPreview && (
@@ -76,7 +77,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                         </div>
                     </div>
                 )}
-            </div>
+            </header>
         </div>
   )
 }
diff --git a/themes/nav/index.js b/themes/nav/index.js
index c8006469..1e263050 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -33,6 +33,7 @@ import LogoBar from './components/LogoBar'
 import { siteConfig } from '@/lib/config'
 import Live2D from '@/components/Live2D'
 import BlogArchiveItem from './components/BlogArchiveItem'
+import NotionIcon from '@/components/NotionIcon'
 
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
@@ -221,7 +222,7 @@ const LayoutSlug = (props) => {
               {!lock && <div id='container'>
 
                   {/* title */}
-                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{post?.title}</h1>
+                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
 
                   {/* Notion文章主体 */}
                   {post && (<section id="article-wrapper" className="px-1">
diff --git a/themes/nobelium/components/ArticleInfo.js b/themes/nobelium/components/ArticleInfo.js
index 3e6a6220..b916d8cc 100644
--- a/themes/nobelium/components/ArticleInfo.js
+++ b/themes/nobelium/components/ArticleInfo.js
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import TagItem from './TagItem'
 import md5 from 'js-md5'
 import { siteConfig } from '@/lib/config'
+import NotionIcon from '@/components/NotionIcon'
 
 export const ArticleInfo = (props) => {
   const { post } = props
@@ -12,9 +13,9 @@ export const ArticleInfo = (props) => {
   return <section className="flex-wrap flex mt-2 text-gray--600 dark:text-gray-400 font-light leading-8">
         <div>
 
-            <div className="font-bold text-3xl text-black dark:text-white">
-                {post?.title}
-            </div>
+            <h1 className="font-bold text-3xl text-black dark:text-white">
+                <NotionIcon icon={post?.pageIcon} />{post?.title}
+            </h1>
 
             {post?.type !== 'Page' && <>
                 <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
diff --git a/themes/nobelium/components/BlogPost.js b/themes/nobelium/components/BlogPost.js
index 8af88325..6d3996a9 100644
--- a/themes/nobelium/components/BlogPost.js
+++ b/themes/nobelium/components/BlogPost.js
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 const BlogPost = ({ post }) => {
   const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
@@ -11,7 +12,7 @@ const BlogPost = ({ post }) => {
       <article key={post.id} className="mb-6 md:mb-8">
         <header className="flex flex-col justify-between md:flex-row md:items-baseline">
           <h2 className="text-lg md:text-xl font-medium mb-2 cursor-pointer text-black dark:text-gray-100">
-            {post.title}
+            <NotionIcon icon={post.pageIcon} />{post.title}
           </h2>
           <time className="flex-shrink-0 text-gray-600 dark:text-gray-400">
             {post?.publishDay}
diff --git a/themes/plog/components/ArticleInfo.js b/themes/plog/components/ArticleInfo.js
index 784faa48..56d61a42 100644
--- a/themes/plog/components/ArticleInfo.js
+++ b/themes/plog/components/ArticleInfo.js
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import TagItem from './TagItem'
 import md5 from 'js-md5'
 import { siteConfig } from '@/lib/config'
+import NotionIcon from '@/components/NotionIcon'
 
 export const ArticleInfo = (props) => {
   const { post } = props
@@ -12,9 +13,9 @@ export const ArticleInfo = (props) => {
   return <section className="flex-wrap flex mt-2 text-gray--600 dark:text-gray-400 font-light leading-8">
         <div>
 
-            <div className="font-bold text-3xl text-black dark:text-white">
-            {post?.title}
-            </div>
+            <h1 className="font-bold text-3xl text-black dark:text-white">
+                <NotionIcon icon={post?.pageIcon} />{post?.title}
+            </h1>
 
             {post?.type !== 'Page' && <>
             <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
diff --git a/themes/plog/components/BlogPost.js b/themes/plog/components/BlogPost.js
index 66811a80..76ad9937 100644
--- a/themes/plog/components/BlogPost.js
+++ b/themes/plog/components/BlogPost.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { usePlogGlobal } from '..'
 import { isMobile } from '@/lib/utils'
 import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  * 博客照片卡牌
@@ -37,7 +38,7 @@ const BlogPost = (props) => {
             <LazyImage src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
 
             <h2 className="text-md absolute left-0 bottom-0 m-4 text-gray-100 shadow-text">
-                {post?.title}
+                <NotionIcon icon={post.pageIcon} /> {post?.title}
             </h2>
             {post?.category && <div className='text-xs rounded-lg absolute left-0 top-0 m-4 px-2 py-1 bg-gray-200 dark:bg-black dark:bg-opacity-25 hover:bg-blue-700 hover:text-white duration-200'>
                 <Link href={`/category/${post?.category}`}>
diff --git a/themes/simple/components/ArticleInfo.js b/themes/simple/components/ArticleInfo.js
index f4d3f7fc..98777244 100644
--- a/themes/simple/components/ArticleInfo.js
+++ b/themes/simple/components/ArticleInfo.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/formatDate'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  * 文章描述
@@ -18,7 +19,7 @@ export default function ArticleInfo (props) {
         <section className="mt-2 text-gray-600 dark:text-gray-400 leading-8">
             <h2
                 className="blog-item-title mb-5 font-bold text-black text-xl md:text-2xl no-underline">
-                {post?.title}
+                <NotionIcon icon={post?.pageIcon} />{post?.title}
             </h2>
 
             <div className='flex flex-wrap text-gray-700 dark:text-gray-300'>
diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js
index 625435af..befcd3d8 100644
--- a/themes/simple/components/BlogItem.js
+++ b/themes/simple/components/BlogItem.js
@@ -5,6 +5,7 @@ import { formatDateFmt } from '@/lib/formatDate'
 import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
 
 export const BlogItem = props => {
   const { post } = props
@@ -26,18 +27,18 @@ export const BlogItem = props => {
                 )}
             </div>
 
-            <div className='article-info'>
+            <article className='article-info'>
+
                 <h2 className="mb-2">
                     <Link
                         href={url}
                         className="blog-item-title font-bold text-black text-2xl menu-link">
-                        {post.title}
+                        <NotionIcon icon={post.pageIcon} />{post.title}
                     </Link>
                 </h2>
 
                 {/* 文章信息 */}
-
-                <div className="mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6">
+                <header className="mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6">
                     <div className='space-x-2'>
                         <span>  <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)} className='p-1 hover:text-red-400 transition-all duration-200'><i className="fa-regular fa-user"></i> {siteConfig('AUTHOR')}</a></span>
                         <span>
@@ -52,13 +53,13 @@ export const BlogItem = props => {
                         {post.category && <Link href={`/category/${post.category}`} className='p-1'> <span className="hover:text-red-400 transition-all duration-200"><i className="fa-regular fa-folder mr-0.5" />{post.category}</span></Link>}
                         {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <Link key={t} href={`/tag/${t}`} className=' hover:text-red-400 transition-all duration-200'><span > /{t}</span></Link>)}
                     </div>
-                </div>
+                </header>
 
-                <div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
+                <main className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
                     {post.summary}
                     {post.summary && <span>...</span>}
-                </div>
-            </div>
+                </main>
+            </article>
         </div>
 
         <div className='block'>