Skip to content

Commit

Permalink
meta移动端适配
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangly1024
tangly1024 committed Dec 7, 2022
1 parent 900dc5f commit 47d2dca
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 165 deletions.
3 changes: 2 additions & 1 deletion themes/medium/LayoutSlug.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 9,8 @@ import { ArticleLock } from './components/ArticleLock'

export const LayoutSlug = props => {
const { post, lock, validPassword } = props
const { locale } = useGlobal()

if (!post) {
return <LayoutBase
{...props}
Expand All @@ -20,7 22,6 @@ export const LayoutSlug = props => {
post.content = Object.keys(post.blockMap.block)
post.toc = getPageTableOfContents(post, post.blockMap)
}
const { locale } = useGlobal()

const slotRight = post?.toc && post?.toc?.length > 3 && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
Expand Down
99 changes: 51 additions & 48 deletions themes/medium/components/ArticleDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,55 19,58 @@ export const ArticleDetail = props => {
locale.LOCALE
)
return <div id='container'>
<h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
<section className="flex py-4 items-center font-sans px-1">
<Link href="/about" passHref>
<>

{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={25}/>
{/* title */}
<h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>

<div className="mr-3 ml-1 text-green-500 cursor-pointer">
{BLOG.AUTHOR}
</div>
</>
</Link>
<div className="text-gray-500">{date}</div>
<div className='mx-2 text-gray-300 dark:text-gray-600'>
{locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
</div>
<div className="hidden busuanzi_container_page_pv text-gray-500 font-light mr-2">
<i className="ml-3 mr-0.5 fas fa-eye" />
&nbsp;
<span className="mr-2 busuanzi_value_page_pv" />
</div>
</section>
{/* Notion文章主体 */}
<section id="notion-article" className="px-1 max-w-5xl">
{post && (<NotionPage post={post} />)}
</section>
{/* meta */}
<section className="py-2 items-center font-sans px-1">
<div className='flex text-gray-500 py-1 dark:text-gray-600'>
<span> <i className='far fa-calendar mr-2' />{date}</span>
<span className='mx-2'>|</span>
<span> <i className='far fa-calendar-check mr-2'/>{post.lastEditedTime}</span>
<div className="hidden busuanzi_container_page_pv font-light mr-2">
<i className="ml-3 mr-1 fas fa-eye" />
<span className="busuanzi_value_page_pv" />
</div>
</div>
<Link href="/about" passHref>
<div className='flex pt-2'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={25} />

<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>
<section>
<div className='flex justify-between'>
{CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
<div>
{CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
</div>
{post.type === 'Post' && <ArticleAround prev={prev} next={next} /> }
<Comment frontMatter={post} />
</section>
</div>
<div className="mr-3 ml-2 text-md text-green-500 cursor-pointer">
{BLOG.AUTHOR}
</div>
</div>
</Link>
</section>
{/* Notion文章主体 */}
<section id="notion-article" className="px-1 max-w-5xl">
{post && (<NotionPage post={post} />)}
</section>

<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>
<section>
<div className='flex justify-between'>
{CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
<div>
{CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
</div>
{post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
<Comment frontMatter={post} />
</section>
</div>
}
18 changes: 9 additions & 9 deletions themes/next/LayoutSlug.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 12,6 @@ import { isBrowser } from '@/lib/utils'

export const LayoutSlug = (props) => {
const { post, latestPosts, lock, validPassword } = props
if (!post) {
return <LayoutBase
{...props}
rightAreaSlot={
CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
}
/>
}

if (!lock && post?.blockMap?.block) {
post.content = Object.keys(post.blockMap.block)
post.toc = getPageTableOfContents(post, post.blockMap)
Expand All @@ -34,6 25,15 @@ export const LayoutSlug = (props) => {
}} /></div>
: null

if (!post) {
return <LayoutBase
{...props}
rightAreaSlot={
CONFIG_NEXT.RIGHT_LATEST_POSTS && <Card><LatestPostsGroup posts={latestPosts} /></Card>
}
/>
}

return (
<LayoutBase
{...props}
Expand Down
203 changes: 98 additions & 105 deletions themes/next/components/ArticleDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>

{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}
</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' />
&nbsp;
<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 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>
)}

{/* 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>
{post.tagItems.map(tag => (
<TagItem key={tag.name} tag={tag} />
))}
</div>
)}
<div>
<ShareBar post={post} />
</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>
)}

{post.type === 'Post' && <BlogAround prev={prev} next={next} /> }
</>}
{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>
{/* 评论互动 */}
<div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-gray-800">
<Comment frontMatter={post} />
</div>
</div>

</div>)
</div>)
}
4 changes: 2 additions & 2 deletions themes/next/components/WordCount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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> &nbsp;|&nbsp; <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> &nbsp;|&nbsp; <i className='mr-1 fas fa-clock my-auto' /> <span className='hidden md:block'>阅读时长 ≈</span> <strong id='readTime'>0</strong> 分钟
</div>
}

Expand Down

0 comments on commit 47d2dca

Please sign in to comment.