mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
feat: add title icon configuration
This commit is contained in:
@@ -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=
|
||||
|
||||
@@ -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, // 画册视图禁止点击,方便在友链页面的画册插入链接
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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/>}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
{/* 标题底部补充信息 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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' />
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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' && <>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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' && <>
|
||||
|
||||
@@ -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}`}>
|
||||
|
||||
@@ -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'>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user