From b4398e516e60fd73f040766944ec3662e96fd96b Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Fri, 18 Nov 2022 11:44:12 +0800
Subject: [PATCH] =?UTF-8?q?Next=E4=B8=BB=E9=A2=98=E5=8F=AF=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E5=A4=B4=E5=9B=BE=EF=BC=8C=E5=B9=B6=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionIcon.js                | 20 ++++++++++++++++++++
 lib/notion/getPageProperties.js         | 10 ++++++++++
 themes/next/components/ArticleDetail.js |  6 ++++--
 themes/next/components/BlogPostCard.js  |  3 ++-
 themes/next/config_next.js              |  2 ++
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 components/NotionIcon.js

diff --git a/components/NotionIcon.js b/components/NotionIcon.js
new file mode 100644
index 00000000..d086fee0
--- /dev/null
+++ b/components/NotionIcon.js
@@ -0,0 +1,20 @@
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http')) {
+    //   return <Image src={icon} width={30} height={30}/>
+    //   eslint-disable-next-line @next/next/no-img-element
+    return <img src={icon} className='w-8 float-left mr-1'/>
+  }
+
+  return <span className='mr-1'>{icon}</span>
+}
+
+export default NotionIcon
diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js
index 47cb9dae..59b714a6 100644
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -79,6 +79,7 @@ async function getPageProperties(id, block, schema, authToken, tagOptions, siteI
   properties.createdTime = formatDate(new Date(value.created_time).toString(), BLOG.LANG)
   properties.lastEditedTime = formatDate(new Date(value?.last_edited_time).toString(), BLOG.LANG)
   properties.fullWidth = value.format?.page_full_width ?? false
+  properties.pageIcon = getPageIcon(id, block) ?? ''
   properties.page_cover = getPostCover(id, block) ?? siteInfo?.pageCover
   properties.content = value.content ?? []
   properties.tagItems = properties?.tags?.map(tag => {
@@ -97,4 +98,13 @@ async function getPageProperties(id, block, schema, authToken, tagOptions, siteI
   }
 }
 
+function getPageIcon(id, block) {
+  const pageIcon = block[id].value?.format?.page_icon
+  if (pageIcon) {
+    if (pageIcon.startsWith('/')) return 'https://www.notion.so' + pageIcon
+    if (pageIcon.startsWith('http')) return defaultMapImageUrl(pageIcon, block[id].value)
+    return pageIcon
+  }
+}
+
 export { getPageProperties as default }
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index 340f0f5a..693b87d4 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -11,6 +11,8 @@ import { useRouter } from 'next/router'
 import ArticleCopyright from './ArticleCopyright'
 import WordCount from './WordCount'
 import NotionPage from '@/components/NotionPage'
+import CONFIG_NEXT from '../config_next'
+import NotionIcon from '@/components/NotionIcon'
 
 /**
  *
@@ -29,7 +31,7 @@ export default function ArticleDetail(props) {
     >
 
       {showArticleInfo && <header className='animate__slideInDown animate__animated'>
-        {post?.type && !post?.type.includes('Page') && post?.page_cover && (
+        {CONFIG_NEXT.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.page_cover && (
           <div className="w-full relative md:flex-shrink-0 overflow-hidden">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img alt={post.title} src={post?.page_cover} className='object-center w-full' />
@@ -38,7 +40,7 @@ export default function ArticleDetail(props) {
 
         {/* 文章Title */}
         <div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
-          {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/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
index 33049bf6..43ae9e65 100644
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -7,6 +7,7 @@ import Card from './Card'
 import TagItemMini from './TagItemMini'
 import CONFIG_NEXT from '../config_next'
 import NotionPage from '@/components/NotionPage'
+import NotionIcon from '@/components/NotionIcon'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
@@ -23,7 +24,7 @@ const BlogPostCard = ({ post, showSummary }) => {
               className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
                 } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
             >
-              {post.title}
+             <NotionIcon icon={post.pageIcon} /> {post.title}
             </a>
           </Link>
 
diff --git a/themes/next/config_next.js b/themes/next/config_next.js
index 245399ca..37839b08 100644
--- a/themes/next/config_next.js
+++ b/themes/next/config_next.js
@@ -9,6 +9,8 @@ const CONFIG_NEXT = {
   POST_LIST_PREVIEW: true, // 显示文章预览
   POST_LIST_SUMMARY: false, // 显示用户自定义摘要，有预览时优先只展示预览
 
+  POST_HEADER_IMAGE_VISIBLE: false, // 文章详情页是否显示封面图
+
   // 右侧组件
   RIGHT_BAR: true, // 是否显示右侧栏
   RIGHT_LATEST_POSTS: true, // 右侧栏最新文章