适配NextJs13语法

themes/example/components/ArticleInfo.js

@@ -8,40 +8,45 @@ export const ArticleInfo = (props) => {
   const { locale } = useGlobal()
   const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)
 
-  return <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
-        <div>
-            {post?.type !== 'Page' && <>
-                <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">
+  return (
+      <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
+            <div>
+                {post?.type !== 'Page' && <>
+                    <Link
+                        href={`/category/${post.category}`}
+                        passHref
+                        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 fas 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">
+                    </Link>
+                    <span className='mr-2'>|</span>
+                </>}
+
+                {post?.type !== 'Page' && (<>
+                    <Link
+                        href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                        passHref
+                        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>
-                <span className='mx-2 text-gray-400 dark:text-gray-500'>
-                    {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+
+                    </Link>
+                    <span className='mr-2'>|</span>
+                    <span className='mx-2 text-gray-400 dark:text-gray-500'>
+                        {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+                    </span>
+                    <span className='mr-2'>|</span>
+                    <span 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" />
                 </span>
-                <span className='mr-2'>|</span>
-                <span 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" />
-            </span>
-            </>)}
+                </>)}
 
-        </div>
+            </div>
 
-    </section>
+        </section>
+  );
 }

themes/example/components/BlogListPage.js

@@ -15,47 +15,55 @@ export const BlogListPage = props => {
   const showNext = page < totalPage
   const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
-  return <div className="w-full md:pr-12 mb-12">
+  return (
+      <div className="w-full md:pr-12 mb-12">
 
-        <div id="container">
-            {posts?.map(p => (
-                <article key={p.id} className="mb-12" >
-                    <h2 className="mb-4">
-                        <Link href={`/${p.slug}`}>
-                            <a className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">  {p.title}</a>
-                        </Link>
-                    </h2>
+            <div id="container">
+                {posts?.map(p => (
+                    <article key={p.id} className="mb-12" >
+                        <h2 className="mb-4">
+                            <Link
+                                href={`/${p.slug}`}
+                                className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
+                                  {p.title}
+                            </Link>
+                        </h2>
 
-                    <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                        by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                        <span className="font-bold mx-1"> | </span>
-                        <a href="#" className="text-gray-700 dark:text-gray-300">{p.category}</a>
-                        {/* <span className="font-bold mx-1"> | </span> */}
-                        {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                    </div>
+                        <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
+                            by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                            <span className="font-bold mx-1"> | </span>
+                            <a href="#" className="text-gray-700 dark:text-gray-300">{p.category}</a>
+                            {/* <span className="font-bold mx-1"> | </span> */}
+                            {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                        </div>
 
-                    <p className="text-gray-700 dark:text-gray-400 leading-normal">
-                        {p.summary}
-                    </p>
-                        {/* 搜索结果 */}
-                    {p.results && (
-                        <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                        {p.results.map(r => (
-                            <span key={r}>{r}</span>
-                        ))}
+                        <p className="text-gray-700 dark:text-gray-400 leading-normal">
+                            {p.summary}
                         </p>
-                    )}
-                </article>
-            ))}
-        </div>
+                            {/* 搜索结果 */}
+                        {p.results && (
+                            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                            {p.results.map(r => (
+                                <span key={r}>{r}</span>
+                            ))}
+                            </p>
+                        )}
+                    </article>
+                ))}
+            </div>
 
-        <div className="flex justify-between text-xs">
-            <Link href={{ pathname: currentPage - 1 === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
-                <a className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.PREV}</a>
-            </Link>
-            <Link href={{ pathname: `${pagePrefix}/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
-                <a className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.NEXT}</a>
-            </Link>
+            <div className="flex justify-between text-xs">
+                <Link
+                    href={{ pathname: currentPage - 1 === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}
+                    className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+                    {locale.PAGINATION.PREV}
+                </Link>
+                <Link
+                    href={{ pathname: `${pagePrefix}/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}
+                    className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+                    {locale.PAGINATION.NEXT}
+                </Link>
+            </div>
         </div>
-    </div>
+  );
 }

themes/example/components/BlogListScroll.js

@@ -43,36 +43,40 @@ export const BlogListScroll = props => {
     }
   })
 
-  return <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
-          {postsToShow.map(p => (
-              <article key={p.id} className="mb-12" >
-                  <h2 className="mb-4">
-                      <Link href={`/${p.slug}`}>
-                          <a className="text-black text-xl md:text-2xl no-underline hover:underline">  {p.title}</a>
-                      </Link>
-                  </h2>
+  return (
+      <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
+              {postsToShow.map(p => (
+                  <article key={p.id} className="mb-12" >
+                      <h2 className="mb-4">
+                          <Link
+                              href={`/${p.slug}`}
+                              className="text-black text-xl md:text-2xl no-underline hover:underline">
+                                {p.title}
+                          </Link>
+                      </h2>
 
-                  <div className="mb-4 text-sm text-gray-700">
-                      by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                      <span className="font-bold mx-1"> | </span>
-                      <a href="#" className="text-gray-700">{p.category}</a>
-                      <span className="font-bold mx-1"> | </span>
-                      {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                  </div>
+                      <div className="mb-4 text-sm text-gray-700">
+                          by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                          <span className="font-bold mx-1"> | </span>
+                          <a href="#" className="text-gray-700">{p.category}</a>
+                          <span className="font-bold mx-1"> | </span>
+                          {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                      </div>
 
-                  <p className="text-gray-700 leading-normal">
-                      {p.summary}
-                  </p>
-              </article>
-          ))}
+                      <p className="text-gray-700 leading-normal">
+                          {p.summary}
+                      </p>
+                  </article>
+              ))}
+
+              <div
+                  onClick={handleGetMore}
+                  className="w-full my-4 py-4 text-center cursor-pointer "
+              >
+                  {' '}
+                  {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+              </div>
 
-          <div
-              onClick={handleGetMore}
-              className="w-full my-4 py-4 text-center cursor-pointer "
-          >
-              {' '}
-              {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
           </div>
-
-      </div>
+  );
 }

themes/example/components/ExampleRecentComments.js

@@ -26,10 +26,10 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}><a >-- {comment.nick}</a></Link></div>
+            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
         </div>)}
 
-  </>
+  </>;
 }
 
 export default ExampleRecentComments

themes/example/components/Header.js

@@ -7,15 +7,19 @@ import Link from 'next/link'
 export const Header = (props) => {
   const { siteInfo } = props
 
-  return <header className="w-full px-6 bg-white  dark:bg-black">
-        <div className="container mx-auto max-w-4xl md:flex justify-between items-center">
-            <Link href='/'>
-                <a className="py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center">
+  return (
+      <header className="w-full px-6 bg-white  dark:bg-black">
+            <div className="container mx-auto max-w-4xl md:flex justify-between items-center">
+                <Link
+                    href='/'
+                    className="py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center">
+
                     {siteInfo?.title}
-                </a></Link>
-            <div className="w-full md:w-auto text-center md:text-right">
-                {/* 右侧文字 */}
+                </Link>
+                <div className="w-full md:w-auto text-center md:text-right">
+                    {/* 右侧文字 */}
+                </div>
             </div>
-        </div>
-    </header>
+        </header>
+  );
 }

themes/example/components/Nav.js

@@ -20,20 +20,25 @@ export const Nav = (props) => {
     links = links.concat(customNav)
   }
 
-  return <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
-        <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-            <div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
-                {links.map(link => {
-                  return link && <Link href={link.to} key={link.to}>
-                        <a className="px-2 md:pl-0 md:mr-3 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
-                            {link.name}
-                        </a>
-                    </Link>
-                })}
+  return (
+      <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
+            <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
+                <div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
+                    {links.map(link => {
+                      return link && <Link
+                          href={link.to}
+                          key={link.to}
+                          className="px-2 md:pl-0 md:mr-3 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
+
+                          {link.name}
+
+                      </Link>;
+                    })}
+                </div>
+                <div className="w-full md:w-1/3 text-center md:text-right">
+                    {/* <!-- extra links --> */}
+                </div>
             </div>
-            <div className="w-full md:w-1/3 text-center md:text-right">
-                {/* <!-- extra links --> */}
-            </div>
-        </div>
-    </nav>
+        </nav>
+  );
 }

themes/example/components/SideBar.js

@@ -8,48 +8,58 @@ const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
 export const SideBar = (props) => {
   const { locale } = useGlobal()
   const { latestPosts, categories } = props
-  return <div className="w-full md:w-64 sticky top-8">
+  return (
+      <div className="w-full md:w-64 sticky top-8">
 
-        <aside className="rounded shadow overflow-hidden mb-6">
-            <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.CATEGORY}</h3>
+            <aside className="rounded shadow overflow-hidden mb-6">
+                <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.CATEGORY}</h3>
 
-            <div className="p-4">
-                <ul className="list-reset leading-normal">
-                    {categories?.map(category => {
-                      return <Link key={category.name} href={`/category/${category.name}`} passHref>
-                            <li>  <a href="#" className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
-                        </Link>
-                    })}
-                </ul>
-            </div>
+                <div className="p-4">
+                    <ul className="list-reset leading-normal">
+                        {categories?.map(category => {
+                          return (
+                              <Link
+                                  key={category.name}
+                                  href={`/category/${category.name}`}
+                                  passHref
+                                  legacyBehavior>
+                                    <li>  <a href="#" className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
+                                </Link>
+                          );
+                        })}
+                    </ul>
+                </div>
 
-        </aside>
+            </aside>
 
-        <aside className="rounded shadow overflow-hidden mb-6">
-            <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.LATEST_POSTS}</h3>
+            <aside className="rounded shadow overflow-hidden mb-6">
+                <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.LATEST_POSTS}</h3>
 
-            <div className="p-4">
-                <ul className="list-reset leading-normal">
-                    {latestPosts?.map(p => {
-                      return <Link key={p.id} href={`/${p.slug}`} passHref>
-                            <li>  <a href="#" className="text-gray-darkest text-sm">{p.title}</a></li>
-                        </Link>
-                    })}
-                </ul>
-            </div>
-        </aside>
+                <div className="p-4">
+                    <ul className="list-reset leading-normal">
+                        {latestPosts?.map(p => {
+                          return (
+                              <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
+                                    <li>  <a href="#" className="text-gray-darkest text-sm">{p.title}</a></li>
+                                </Link>
+                          );
+                        })}
+                    </ul>
+                </div>
+            </aside>
 
-        {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
-            <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
+            {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
+                <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
 
-            <div className="p-4">
-                <ExampleRecentComments/>
-            </div>
-        </aside>}
+                <div className="p-4">
+                    <ExampleRecentComments/>
+                </div>
+            </aside>}
 
-        <aside className="rounded  overflow-hidden mb-6">
-            <Live2D />
-        </aside>
+            <aside className="rounded  overflow-hidden mb-6">
+                <Live2D />
+            </aside>
 
-    </div>
+        </div>
+  );
 }