meta移动端适配

themes/medium/LayoutSlug.js

@@ -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}
@@ -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} >

themes/medium/components/ArticleDetail.js

@@ -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>
 }

themes/next/LayoutSlug.js

@@ -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)
@@ -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}

themes/next/components/ArticleDetail.js

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

themes/next/components/WordCount.js

@@ -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>
 }