mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-23 15:09:46 +00:00
meta移动端适配
This commit is contained in:
tangly1024
@@ -26,114 +26,107 @@ export default function ArticleDetail(props) {
|
||||
const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)
|
||||
|
||||
return (<div id="container" className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
|
||||
<div itemScope itemType="https://schema.org/Movie"
|
||||
className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
|
||||
>
|
||||
<div itemScope itemType="https://schema.org/Movie"
|
||||
className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
|
||||
>
|
||||
|
||||
{showArticleInfo && <header className='animate__slideInDown animate__animated'>
|
||||
{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' />
|
||||
</div>
|
||||
)}
|
||||
{showArticleInfo && <header className='animate__slideInDown animate__animated'>
|
||||
{/* 头图 */}
|
||||
{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' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 文章Title */}
|
||||
<div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
|
||||
<NotionIcon icon={post.pageIcon}/>{post.title}
|
||||
{/* title */}
|
||||
<div className=" text-center font-bold text-3xl text-black dark:text-white font-serif pt-6">
|
||||
<NotionIcon icon={post.pageIcon} />{post.title}
|
||||
</div>
|
||||
|
||||
{/* meta */}
|
||||
<section className="mt-2 text-gray-400 dark:text-gray-400 font-light leading-7 text-sm">
|
||||
<div className='flex flex-wrap justify-center'>
|
||||
{post?.type !== 'Page' && (<>
|
||||
<Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
|
||||
<div className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
|
||||
<i className='far fa-calendar mr-1' /> {date}
|
||||
</div>
|
||||
</Link>
|
||||
<span className='mr-2'> | <i className='far fa-calendar-check mr-2' />{post.lastEditedTime} </span>
|
||||
|
||||
<div className="hidden busuanzi_container_page_pv font-light mr-2">
|
||||
<i className='mr-1 fas fa-eye' />
|
||||
<span className="mr-2 busuanzi_value_page_pv" />
|
||||
</div>
|
||||
|
||||
</>)}
|
||||
</div>
|
||||
|
||||
<WordCount />
|
||||
</section>
|
||||
|
||||
</header>}
|
||||
|
||||
{/* Notion内容主体 */}
|
||||
<article id='notion-article' className='px-1'>
|
||||
{post && (<NotionPage post={post} />)}
|
||||
</article>
|
||||
|
||||
<section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600 dark:text-gray-400">
|
||||
{/* 文章内嵌广告 */}
|
||||
<ins className="adsbygoogle"
|
||||
style={{ display: 'block', textAlign: 'center' }}
|
||||
data-adtest="on"
|
||||
data-ad-layout="in-article"
|
||||
data-ad-format="fluid"
|
||||
data-ad-client="ca-pub-2708419466378217"
|
||||
data-ad-slot="3806269138" />
|
||||
</section>
|
||||
|
||||
{showArticleInfo && <>
|
||||
{/* 版权声明 */}
|
||||
{post.type === 'Post' && <ArticleCopyright author={BLOG.AUTHOR} url={url} />}
|
||||
|
||||
{/* 推荐文章 */}
|
||||
{post.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
|
||||
|
||||
<section className="flex justify-between">
|
||||
{/* 分类 */}
|
||||
{post.category && <>
|
||||
<div className="cursor-pointer my-auto text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
|
||||
<Link href={`/category/${post.category}`} passHref>
|
||||
<><i className="mr-1 far fa-folder-open" /> {post.category}</>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</>}
|
||||
|
||||
{/* 标签列表 */}
|
||||
{post.type === 'Post' && (
|
||||
<>
|
||||
{post.tagItems && (
|
||||
<div className="flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto">
|
||||
<div className="hidden md:block dark:text-gray-300 whitespace-nowrap">
|
||||
{locale.COMMON.TAGS}：
|
||||
</div>
|
||||
{post.tagItems.map(tag => (
|
||||
<TagItem key={tag.name} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<ShareBar post={post} />
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
{post.type === 'Post' && <BlogAround prev={prev} next={next} />}
|
||||
</>}
|
||||
|
||||
{/* 评论互动 */}
|
||||
<div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<Comment frontMatter={post} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
|
||||
<div className='flex flex-wrap'>
|
||||
{post.category && <>
|
||||
<Link href={`/category/${post.category}`} passHref>
|
||||
<a className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
|
||||
<i className="mr-1 far fa-folder-open" /> {post.category}
|
||||
</a>
|
||||
</Link>
|
||||
<span className='mr-2'>|</span>
|
||||
</>}
|
||||
{post?.type !== 'Page' && (<>
|
||||
<Link
|
||||
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
|
||||
passHref
|
||||
>
|
||||
<a className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
|
||||
{date}
|
||||
</a>
|
||||
</Link>
|
||||
<span className='mr-2'>|</span>
|
||||
<div className="hidden busuanzi_container_page_pv font-light mr-2">
|
||||
<i className='mr-1 fas fa-eye' />
|
||||
|
||||
<span className="mr-2 busuanzi_value_page_pv" />
|
||||
</div>
|
||||
|
||||
</>)}
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mr-2'>
|
||||
<i className='far fa-clock mr-2' />{locale.COMMON.LAST_EDITED_TIME} {post.lastEditedTime}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-nowrap whitespace-nowrap items-center font-light text-md'>
|
||||
<WordCount />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</header>}
|
||||
|
||||
{/* Notion内容主体 */}
|
||||
<article id='notion-article' className='px-1'>
|
||||
{post && (<NotionPage post={post} />)}
|
||||
</article>
|
||||
|
||||
<section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600 dark:text-gray-400">
|
||||
{/* 文章内嵌广告 */}
|
||||
<ins className="adsbygoogle"
|
||||
style={{ display: 'block', textAlign: 'center' }}
|
||||
data-adtest="on"
|
||||
data-ad-layout="in-article"
|
||||
data-ad-format="fluid"
|
||||
data-ad-client="ca-pub-2708419466378217"
|
||||
data-ad-slot="3806269138" />
|
||||
</section>
|
||||
|
||||
{showArticleInfo && <>
|
||||
{/* 版权声明 */}
|
||||
{post.type === 'Post' && <ArticleCopyright author={BLOG.AUTHOR} url={url} /> }
|
||||
|
||||
{/* 推荐文章 */}
|
||||
{post.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
|
||||
|
||||
{/* 标签列表 */}
|
||||
{post.type === 'Post' && (
|
||||
<section className="md:flex md:justify-between">
|
||||
{post.tagItems && (
|
||||
<div className="flex flex-nowrap leading-8 p-1 py-4 overflow-x-auto">
|
||||
<div className="hidden md:block dark:text-gray-300 whitespace-nowrap">
|
||||
{locale.COMMON.TAGS}：
|
||||
</div>
|
||||
{post.tagItems.map(tag => (
|
||||
<TagItem key={tag.name} tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<ShareBar post={post} />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{post.type === 'Post' && <BlogAround prev={prev} next={next} /> }
|
||||
</>}
|
||||
|
||||
{/* 评论互动 */}
|
||||
<div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<Comment frontMatter={post} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>)
|
||||
</div>)
|
||||
}
|
||||
|
||||
@@ -9,8 +9,8 @@ export default function WordCount() {
|
||||
countWords()
|
||||
})
|
||||
|
||||
return <div id='wordCountWrapper' className='hidden'>
|
||||
<i className='mr-1 fas fa-file-word' /> 本文字数 <strong id='wordCount'>0</strong> | <i className='mr-1 fas fa-clock' /> 阅读时长 ≈ <strong id='readTime'>0</strong> 分钟
|
||||
return <div id='wordCountWrapper' className='flex justify-center my-auto font-light'>
|
||||
<i className='mr-1 fas fa-file-word my-auto' /> <span className='hidden md:block'>本文字数</span> <strong id='wordCount'>0</strong> | <i className='mr-1 fas fa-clock my-auto' /> <span className='hidden md:block'>阅读时长 ≈</span> <strong id='readTime'>0</strong> 分钟
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user