Merge pull request #2310 from Femoon/feat/add-icon-title-configuration

feat: add title icon configuration

.env.local

@@ -62,6 +62,7 @@ NEXT_PUBLIC_VERSION=4.4.3
 # NEXT_PUBLIC_ALGOLIA_INDEX=
 # NEXT_PUBLIC_PREVIEW_CATEGORY_COUNT=  
 # NEXT_PUBLIC_PREVIEW_TAG_COUNT=
+# NEXT_PUBLIC_POST_TITLE_ICON=
 # NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK=   
 # NEXT_PUBLIC_FIREWORKS=
 # NEXT_PUBLIC_FIREWORKS_COLOR=

blog.config.js

@@ -230,6 +230,7 @@ const BLOG = {
   PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
   PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
 
+  POST_TITLE_ICON: process.env.NEXT_PUBLIC_POST_TITLE_ICON || true, // 是否显示标题icon
   POST_DISABLE_GALLERY_CLICK:
     process.env.NEXT_PUBLIC_POST_DISABLE_GALLERY_CLICK || false, // 画册视图禁止点击，方便在友链页面的画册插入链接
 

themes/commerce/components/PostHeader.js

@@ -29,7 +29,7 @@ export default function PostHeader({ post }) {
 
           {/* 文章Title */}
           <div className="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">
-            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' /><div className='text-4xl mx-1'>{post.title}</div>
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />}<div className='text-4xl mx-1'>{post.title}</div>
           </div>
 
         </div>

themes/example/components/BlogPostCard.js

@@ -16,7 +16,7 @@ const BlogPostCard = ({ post }) => {
                 <Link
                     href={`/${post.slug}`}
                     className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                    <NotionIcon icon={post.pageIcon} />{post?.title}
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post?.title}
                 </Link>
             </h2>
 

themes/example/components/Title.js

@@ -12,7 +12,7 @@ export const Title = (props) => {
   const description = post?.description || siteConfig('AUTHOR')
 
   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"><NotionIcon icon={post?.pageIcon} />{title}</h1>
+        <h1 className="text-xl md:text-4xl pb-4">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{title}</h1>
         <p className="leading-loose text-gray-dark">
             {description}
         </p>

themes/fukasawa/components/ArticleDetail.js

@@ -10,6 +10,7 @@ import LazyImage from '@/components/LazyImage'
 import { formatDateFmt } from '@/lib/utils/formatDate'
 import WWAds from '@/components/WWAds'
 import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
 
 /**
  *
@@ -37,7 +38,7 @@ export default function ArticleDetail(props) {
 
           {/* 文章Title */}
           <div className="font-bold text-4xl text-black dark:text-white">
-            <NotionIcon icon={post?.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <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">

themes/fukasawa/components/BlogCard.js

@@ -71,7 +71,7 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
               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}
+              {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />} {post.title}
             </Link>
           </h2>
 

themes/game/components/BlogPost.js

@@ -15,7 +15,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">
-            <NotionIcon icon={post.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
           </h2>
           <time className="flex-shrink-0 text-gray-600 dark:text-gray-400">
             {post?.publishDay}

themes/game/components/PostInfo.js

@@ -1,6 +1,7 @@
 import NotionIcon from '@/components/NotionIcon'
 import Link from 'next/link'
 import TagItem from './TagItem'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 文章详情页说明信息
@@ -25,7 +26,7 @@ export default function PostInfo(props) {
         </div>
 
         <h1 className='font-bold text-3xl text-black dark:text-white'>
-          <NotionIcon icon={post?.pageIcon} />
+          {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}
           {post?.title}
         </h1>
 

themes/gitbook/components/BlogPostCard.js

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, className }) => {
         <Link href={url} passHref>
             <div key={post.id} className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600' : ''}`}>
                 <div className="w-full select-none">
-                    <NotionIcon icon={post?.pageIcon}/> {post.title}
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />} {post.title}
                 </div>
                 {/* 最新文章加个红点 */}
                 {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && <Badge/>}

themes/gitbook/index.js

@@ -275,7 +275,7 @@ const LayoutSlug = (props) => {
             {!lock && <div id='container'>
 
                 {/* title */}
-                <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+                <h1 className="text-3xl pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
                 {/* Notion文章主体 */}
                 {post && (<section id="article-wrapper" className="px-1">

themes/heo/components/BlogPostCard.js

@@ -44,7 +44,7 @@ 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'}>
-                            <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
+                            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}<span className='menu-link '>{post.title}</span>
                         </Link>
                     </header>
 

themes/heo/components/PostHeader.js

@@ -65,7 +65,7 @@ export default function PostHeader({ post, siteInfo }) {
 
                     {/* 文章Title */}
                     <div className="max-w-5xl font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white">
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </div>
 
                     {/* 标题底部补充信息 */}

themes/hexo/components/BlogPostCardInfo.js

@@ -25,7 +25,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
                         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`}>
 
-                        <NotionIcon icon={post.pageIcon} /><span className='menu-link '>{post.title}</span>
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}<span className='menu-link '>{post.title}</span>
 
                     </Link>
                 </h2>

themes/hexo/components/PostHeader.js

@@ -40,7 +40,7 @@ export default function PostHeader({ post, siteInfo }) {
 
           {/* 文章Title */}
           <div className="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">
-            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />}{post.title}
           </div>
 
           <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">

themes/matery/components/BlogPostCard.js

@@ -40,7 +40,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                                 className="h-full w-full group-hover:scale-125 group-hover:brightness-50 brightness-90 rounded-t-md transform object-cover duration-500"
                             />
                             <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}
+                                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                             </h2>
                         </div>
                     </Link>

themes/matery/components/PostHeader.js

@@ -1,5 +1,6 @@
 import LazyImage from '@/components/LazyImage'
 import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 文章背景图
@@ -10,7 +11,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">
-                <NotionIcon icon={post?.pageIcon} />{title}
+                {siteConfig('POST_TITLE_ICON') && <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' />

themes/medium/components/ArticleInfo.js

@@ -13,7 +13,7 @@ export default function ArticleInfo(props) {
 
   return (<>
         {/* title */}
-        <h1 className="text-3xl pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+        <h1 className="text-3xl pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
         {/* meta */}
         <section className="py-2 items-center text-sm  px-1">

themes/medium/components/BlogPostCard.js

@@ -35,7 +35,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                         {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>}
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </h2>
 
                 </Link>

themes/movie/components/BlogPostCard.js

@@ -40,7 +40,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
           </div>
           {/* 阴影遮罩 */}
           <h2 className='absolute bottom-10 px-6 transition-all duration-200 text-white text-2xl font-semibold break-words shadow-text z-20'>
-            <NotionIcon icon={post.pageIcon} />
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}
             {post.title}
           </h2>
 

themes/movie/components/Title.js

@@ -12,7 +12,7 @@ export const Title = (props) => {
   const description = post?.description || siteConfig('AUTHOR')
 
   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"><NotionIcon icon={post?.pageIcon} />{title}</h1>
+        <h1 className="text-xl md:text-4xl pb-4">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{title}</h1>
         <p className="leading-loose text-gray-dark">
             {description}
         </p>

themes/nav/components/BlogPostCard.js

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, className }) => {
     <Link href={`${url}`} target={(checkContainHttp(post.slug) ? '_blank' : '_self')} passHref>
         <div key={post.id} className={`${className} h-full rounded-2xl p-4 dark:bg-neutral-800 cursor-pointer bg-white hover:bg-white dark:hover:bg-gray-800 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>
                 <div className="stack-entry w-full flex space-x-3 select-none dark:text-neutral-200">
-                    <NotionIcon icon={pageIcon} size='10' className='text-6xl w-11 h-11 mx-1 my-0 flex-none' />
+                    {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={pageIcon} size='10' className='text-6xl w-11 h-11 mx-1 my-0 flex-none' />}
                     <div className="stack-comment flex-auto">
                         <p className="title font-bold">{post.title}</p>
                         <p className="description font-normal">{post.summary ? post.summary : '暂无简介'}</p>

themes/nav/index.js

@@ -240,7 +240,7 @@ const LayoutSlug = (props) => {
               {!lock && <div id='container'>
 
                   {/* title */}
-                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300"><NotionIcon icon={post?.pageIcon} />{post?.title}</h1>
+                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}</h1>
 
                   {/* Notion文章主体 */}
                   {post && (<section id="article-wrapper" className="px-1">

themes/next/components/ArticleDetail.js

@@ -51,7 +51,7 @@ export default function ArticleDetail(props) {
 
                     {/* title */}
                     <div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </div>
 
                     {/* meta */}

themes/next/components/BlogPostCard.js

@@ -40,7 +40,7 @@ const BlogPostCard = ({ post, index, showSummary }) => {
             passHref
             className={`cursor-pointer text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
 
-            <NotionIcon icon={post.pageIcon} /> <span className='menu-link'>{post.title}</span>
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />} <span className='menu-link'>{post.title}</span>
 
           </Link>
 

themes/nobelium/components/ArticleInfo.js

@@ -14,7 +14,7 @@ export const ArticleInfo = (props) => {
         <div>
 
             <h1 className="font-bold text-3xl text-black dark:text-white">
-                <NotionIcon icon={post?.pageIcon} />{post?.title}
+                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}
             </h1>
 
             {post?.type !== 'Page' && <>

themes/nobelium/components/BlogPost.js

@@ -15,7 +15,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">
-            <NotionIcon icon={post.pageIcon} />{post.title}
+            {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
           </h2>
           <time className="flex-shrink-0 text-gray-600 dark:text-gray-400">
             {post?.publishDay}

themes/plog/components/ArticleInfo.js

@@ -14,7 +14,7 @@ export const ArticleInfo = (props) => {
         <div>
 
             <h1 className="font-bold text-3xl text-black dark:text-white">
-                <NotionIcon icon={post?.pageIcon} />{post?.title}
+                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}
             </h1>
 
             {post?.type !== 'Page' && <>

themes/plog/components/BlogPost.js

@@ -4,6 +4,7 @@ import { usePlogGlobal } from '..'
 import { isMobile } from '@/lib/utils'
 import LazyImage from '@/components/LazyImage'
 import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 博客照片卡牌
@@ -38,7 +39,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">
-                <NotionIcon icon={post.pageIcon} /> {post?.title}
+                {siteConfig('POST_TITLE_ICON') && <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}`}>

themes/simple/components/ArticleInfo.js

@@ -19,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">
-                <NotionIcon icon={post?.pageIcon} />{post?.title}
+                {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post?.pageIcon} />}{post?.title}
             </h2>
 
             <div className='flex flex-wrap text-gray-700 dark:text-gray-300'>

themes/simple/components/BlogItem.js

@@ -35,7 +35,7 @@ export const BlogItem = props => {
                     <Link
                         href={url}
                         className="blog-item-title font-bold text-black text-2xl menu-link">
-                        <NotionIcon icon={post.pageIcon} />{post.title}
+                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
                     </Link>
                 </h2>