Add facebook Open Graph Url and image. Fix PATH env conflict with Vercel environment

themes/example/LayoutArchive.js

@@ -44,7 +44,10 @@ export const LayoutArchive = props => {
                       {post.date.start_date}
                     </span>{' '}
                     &nbsp;
-                    <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
+                    <Link
+                      href={`${BLOG.SUB_PATH}/article/${post.slug}`}
+                      passHref
+                    >
                       <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
                         {post.title}
                       </a>

themes/example/LayoutIndex.js

@@ -12,41 +12,63 @@ export const LayoutIndex = props => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
 
   const page = 1
-  const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
+  const showNext =
+    page < totalPage &&
+    posts.length === BLOG.POSTS_PER_PAGE &&
+    posts.length < postCount
 
   const currentPage = +page
   return (
     <LayoutBase {...props}>
       {posts.map(p => (
-        <div key={p.id} className='border dark:border-hexo-black-gray p-4 my-12'>
+        <div
+          key={p.id}
+          className="border dark:border-hexo-black-gray p-4 my-12"
+        >
           <Link href={`/article/${p.slug}`}>
-            <a className='underline cursor-pointer'>{p.title}</a>
+            <a className="underline cursor-pointer">{p.title}</a>
           </Link>
           <div>{p.summary}</div>
         </div>
       ))}
 
-    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
-     <Link
-        href={ {
-          pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
-        <a
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+      <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
+        <Link
+          href={{
+            pathname:
+              currentPage === 2
+                ? `${BLOG.SUB_PATH || '/'}`
+                : `/page/${currentPage - 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          passHref
         >
-          ← {locale.PAGINATION.PREV}
-        </a>
-      </Link>
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
-        <a
-          rel='next'
-          className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          <a
+            rel="prev"
+            className={`${
+              currentPage === 1 ? 'invisible' : 'visible'
+            } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          >
+            ← {locale.PAGINATION.PREV}
+          </a>
+        </Link>
+        <Link
+          href={{
+            pathname: `/page/${currentPage + 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          passHref
         >
-          {locale.PAGINATION.NEXT} →
-        </a>
-      </Link>
-    </div>
+          <a
+            rel="next"
+            className={`${
+              showNext ? 'visible' : 'invisible'
+            } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          >
+            {locale.PAGINATION.NEXT} →
+          </a>
+        </Link>
+      </div>
     </LayoutBase>
   )
 }

themes/example/LayoutPage.js

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import LayoutBase from './LayoutBase'
 
-export const LayoutPage = (props) => {
+export const LayoutPage = props => {
   const { page } = props
   const { posts, postCount } = props
 
@@ -12,41 +12,60 @@ export const LayoutPage = (props) => {
   const router = useRouter()
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
 
-  const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
+  const showNext =
+    page < totalPage &&
+    posts.length === BLOG.POSTS_PER_PAGE &&
+    posts.length < postCount
 
   const currentPage = +page
   return (
     <LayoutBase {...props}>
       {posts.map(p => (
-        <div key={p.id} className='border my-12'>
+        <div key={p.id} className="border my-12">
           <Link href={`/article/${p.slug}`}>
-            <a className='underline cursor-pointer'>{p.title}</a>
+            <a className="underline cursor-pointer">{p.title}</a>
           </Link>
           <div>{p.summary}</div>
         </div>
       ))}
 
-    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
-     <Link
-        href={ {
-          pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
-        <a
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+      <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
+        <Link
+          href={{
+            pathname:
+              currentPage === 2
+                ? `${BLOG.SUB_PATH || '/'}`
+                : `/page/${currentPage - 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          passHref
         >
-          ← {locale.PAGINATION.PREV}
-        </a>
-      </Link>
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
-        <a
-          rel='next'
-          className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          <a
+            rel="prev"
+            className={`${
+              currentPage === 1 ? 'invisible' : 'visible'
+            } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          >
+            ← {locale.PAGINATION.PREV}
+          </a>
+        </Link>
+        <Link
+          href={{
+            pathname: `/page/${currentPage + 1}`,
+            query: router.query.s ? { s: router.query.s } : {}
+          }}
+          passHref
         >
-          {locale.PAGINATION.NEXT} →
-        </a>
-      </Link>
-    </div>
+          <a
+            rel="next"
+            className={`${
+              showNext ? 'visible' : 'invisible'
+            } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          >
+            {locale.PAGINATION.NEXT} →
+          </a>
+        </Link>
+      </div>
     </LayoutBase>
   )
 }

themes/fukasawa/components/BlogCard.js

@@ -7,33 +7,44 @@ import Card from './Card'
 const BlogCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
   return (
-    <Card className='w-full lg:max-w-sm p-2'>
-       <div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300'>
+    <Card className="w-full lg:max-w-sm p-2">
+      <div
+        key={post.id}
+        className="animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300"
+      >
+        <div className="p-2 flex flex-col w-full">
+          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+            <a
+              className={`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`}
+            >
+              {post.title}
+            </a>
+          </Link>
 
-      <div className='p-2 flex flex-col w-full'>
-        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`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`}>
-            {post.title}
-          </a>
-        </Link>
-
-        {(!showPreview || showSummary) && <p className='mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden'>
-          {post.summary}
-        </p>}
-      </div>
-
-      {CONFIG_FUKA.POST_LIST_COVER && post?.page_cover && (
-        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-        <div className='h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden'>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={post?.page_cover} alt={post.title} className='hover:scale-125 transform duration-500'></img>
-          {/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+          {(!showPreview || showSummary) && (
+            <p className="mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
+              {post.summary}
+            </p>
+          )}
         </div>
-      </Link>
-      )}
-    </div >
-    </Card>
 
+        {CONFIG_FUKA.POST_LIST_COVER && post?.page_cover && (
+          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+            <div className="h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={post?.page_cover}
+                alt={post.title}
+                className="hover:scale-125 transform duration-500"
+              ></img>
+              {/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+            </div>
+          </Link>
+        )}
+      </div>
+    </Card>
   )
 }
 

themes/fukasawa/components/BlogPostArchive.js

@@ -12,20 +12,34 @@ const BlogArchiveItem = ({ posts = [], archiveTitle }) => {
   if (!posts || posts.length === 0) {
     return <></>
   } else {
-    return <div>
-      <div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
-      <ul>
-        {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
-            <div id={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
-              <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-                <a className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
-              </Link>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
+    return (
+      <div>
+        <div
+          className="pt-16 pb-4 text-3xl dark:text-gray-300"
+          id={archiveTitle}
+        >
+          {archiveTitle}
+        </div>
+        <ul>
+          {posts.map(post => (
+            <li
+              key={post.id}
+              className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+            >
+              <div id={post?.date?.start_date}>
+                <span className="text-gray-400">{post.date.start_date}</span>{' '}
+                &nbsp;
+                <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+                  <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                    {post.title}
+                  </a>
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
   }
 }
 

themes/fukasawa/components/PaginationSimple.js

@@ -15,22 +15,38 @@ const PaginationSimple = ({ page, showNext }) => {
   const router = useRouter()
   const currentPage = +page
   return (
-    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
-     <Link
-        href={ {
-          pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
+    <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
+              ? `${BLOG.SUB_PATH || '/'}`
+              : `/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <a
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          rel="prev"
+          className={`${
+            currentPage === 1 ? 'invisible' : 'visible'
+          } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
         >
           ← {locale.PAGINATION.PREV}
         </a>
       </Link>
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
+      <Link
+        href={{
+          pathname: `/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <a
-          rel='next'
-          className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          rel="next"
+          className={`${
+            showNext ? 'visible' : 'invisible'
+          } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
         >
           {locale.PAGINATION.NEXT} →
         </a>

themes/hexo/components/ArticleRecommend.js

@@ -8,8 +8,12 @@ import { useGlobal } from '@/lib/global'
  * @param {prev,next} param0
  * @returns
  */
-export default function ArticleRecommend ({ recommendPosts, siteInfo }) {
-  if (!CONFIG_HEXO.ARTICLE_RECOMMEND || !recommendPosts || recommendPosts.length === 0) {
+export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+  if (
+    !CONFIG_HEXO.ARTICLE_RECOMMEND ||
+    !recommendPosts ||
+    recommendPosts.length === 0
+  ) {
     return <></>
   }
   const { locale } = useGlobal()
@@ -28,21 +32,31 @@ export default function ArticleRecommend ({ recommendPosts, siteInfo }) {
             : `url("${siteInfo?.pageCover}")`
 
           return (
-            <Link key={post.id} title={post.title} href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-
-            <a key={post.id} className="flex h-40 cursor-pointer overflow-hidden">
-              <div
-                className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
-                style={{ backgroundImage: headerImage }}
+            <Link
+              key={post.id}
+              title={post.title}
+              href={`${BLOG.SUB_PATH}/article/${post.slug}`}
+              passHref
+            >
+              <a
+                key={post.id}
+                className="flex h-40 cursor-pointer overflow-hidden"
               >
-                <div className='flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 '>
-                <div className="font-sans text-sm  text-white text-center shadow-text">
-                    <div><i className='fas fa-calendar-alt mr-1'/>{post.date?.start_date}</div>
-                    <div className='hover:underline'>{post.title}</div>
+                <div
+                  className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
+                  style={{ backgroundImage: headerImage }}
+                >
+                  <div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
+                    <div className="font-sans text-sm  text-white text-center shadow-text">
+                      <div>
+                        <i className="fas fa-calendar-alt mr-1" />
+                        {post.date?.start_date}
+                      </div>
+                      <div className="hover:underline">{post.title}</div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </a>
+              </a>
             </Link>
           )
         })}

themes/hexo/components/BlogPostArchive.js

@@ -12,20 +12,34 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
   if (!posts || posts.length === 0) {
     return <></>
   } else {
-    return <div>
-      <div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
-      <ul>
-        {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500'>
-            <div id={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
-              <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-                <a className='dark:text-gray-400  dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
-              </Link>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
+    return (
+      <div>
+        <div
+          className="pt-16 pb-4 text-3xl dark:text-gray-300"
+          id={archiveTitle}
+        >
+          {archiveTitle}
+        </div>
+        <ul>
+          {posts.map(post => (
+            <li
+              key={post.id}
+              className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500"
+            >
+              <div id={post?.date?.start_date}>
+                <span className="text-gray-400">{post.date.start_date}</span>{' '}
+                &nbsp;
+                <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+                  <a className="dark:text-gray-400  dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                    {post.title}
+                  </a>
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
   }
 }
 

themes/hexo/components/BlogPostCard.js

@@ -1,73 +1,106 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import React from 'react'
-import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import {
+  Code,
+  Collection,
+  CollectionRow,
+  Equation,
+  NotionRenderer
+} from 'react-notion-x'
 import TagItemMini from './TagItemMini'
 import CONFIG_HEXO from '../config_hexo'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
   return (
-    <div className='w-full shadow-sm hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300'>
-      <div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300'>
-
-      <div className='lg:p-8 p-4 flex flex-col w-full'>
-        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`replace cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
-            {post.title}
-          </a>
-        </Link>
-
-        <div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}>
-          <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'><i className="far fa-calendar-alt mr-1"/>{post.date.start_date}</a>
+    <div className="w-full shadow-sm hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
+      <div
+        key={post.id}
+        className="animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300"
+      >
+        <div className="lg:p-8 p-4 flex flex-col w-full">
+          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+            <a
+              className={`replace cursor-pointer hover:underline text-2xl font-sans ${
+                showPreview ? 'text-center' : ''
+              } leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}
+            >
+              {post.title}
+            </a>
           </Link>
-        </div>
 
-        {(!showPreview || showSummary) && <p className='replace my-4 text-gray-700  dark:text-gray-300 text-sm font-light leading-7'>
-          {post.summary}
-        </p>}
-
-        {showPreview && <div className='overflow-ellipsis truncate'>
-          <NotionRenderer
-            bodyClassName='max-h-full'
-            recordMap={post.blockMap}
-            mapPageUrl={mapPageUrl}
-            components={{
-              equation: Equation,
-              code: Code,
-              collectionRow: CollectionRow,
-              collection: Collection
-            }}
-          />
-        </div> }
-
-        <div className='text-gray-400 justify-between flex'>
-          <Link href={`/category/${post.category}`} passHref>
-              <a className='cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform'>
-                <i className='mr-1 far fa-folder' />{post.category}
+          <div
+            className={`flex mt-2 items-center ${
+              showPreview ? 'justify-center' : 'justify-start'
+            } flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
+          >
+            <Link
+              href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+              passHref
+            >
+              <a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                <i className="far fa-calendar-alt mr-1" />
+                {post.date.start_date}
               </a>
             </Link>
-            <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
-              <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
+          </div>
+
+          {(!showPreview || showSummary) && (
+            <p className="replace my-4 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+              {post.summary}
+            </p>
+          )}
+
+          {showPreview && (
+            <div className="overflow-ellipsis truncate">
+              <NotionRenderer
+                bodyClassName="max-h-full"
+                recordMap={post.blockMap}
+                mapPageUrl={mapPageUrl}
+                components={{
+                  equation: Equation,
+                  code: Code,
+                  collectionRow: CollectionRow,
+                  collection: Collection
+                }}
+              />
             </div>
+          )}
+
+          <div className="text-gray-400 justify-between flex">
+            <Link href={`/category/${post.category}`} passHref>
+              <a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                <i className="mr-1 far fa-folder" />
+                {post.category}
+              </a>
+            </Link>
+            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+              <div>
+                {' '}
+                {post.tagItems.map(tag => (
+                  <TagItemMini key={tag.name} tag={tag} />
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
 
+        {CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && (
+          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+            <div className="flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={post?.page_cover}
+                alt={post.title}
+                className="hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500"
+              />
+              {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+            </div>
+          </Link>
+        )}
       </div>
-
-      {CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && (
-        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-        <div className='flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden'>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={post?.page_cover} alt={post.title} className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500'/>
-          {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
-        </div>
-      </Link>
-      )}
     </div>
-
-    </div>
-
   )
 }
 

themes/hexo/components/LatestPostsGroup.js

@@ -26,7 +26,7 @@ const LatestPostsGroup = ({ posts, siteInfo }) => {
         </div>
       </div>
       {posts.map(post => {
-        const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
+        const selected = currentPath === `${BLOG.SUB_PATH}/article/${post.slug}`
         const headerImage = post?.page_cover
           ? `url("${post.page_cover}")`
           : `url("${siteInfo?.pageCover}")`
@@ -35,7 +35,7 @@ const LatestPostsGroup = ({ posts, siteInfo }) => {
           <Link
             key={post.id}
             title={post.title}
-            href={`${BLOG.PATH}/article/${post.slug}`}
+            href={`${BLOG.SUB_PATH}/article/${post.slug}`}
             passHref
           >
             <a className={'my-1 flex font-sans'}>

themes/hexo/components/PaginationNumber.js

@@ -16,46 +16,69 @@ const PaginationNumber = ({ page, totalPage }) => {
   const pages = generatePages(page, currentPage, totalPage)
 
   return (
-    <div className='mt-10 mb-5 font-sans flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2'>
-
+    <div className="mt-10 mb-5 font-sans flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
       {/* 上一页 */}
       <Link
-        href={ {
-          pathname: (currentPage - 1 === 1 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
+        href={{
+          pathname:
+            currentPage - 1 === 1
+              ? `${BLOG.SUB_PATH || '/'}`
+              : `/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <div
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
+          rel="prev"
+          className={`${
+            currentPage === 1 ? 'invisible' : 'block'
+          } pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
         >
-          <i className='fas fa-angle-left'/>
+          <i className="fas fa-angle-left" />
         </div>
       </Link>
 
       {pages}
 
       {/* 下一页 */}
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
+      <Link
+        href={{
+          pathname: `/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <div
-          rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
+          rel="next"
+          className={`${
+            +showNext ? 'block' : 'invisible'
+          } pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
         >
-          <i className='fas fa-angle-right'/>
+          <i className="fas fa-angle-right" />
         </div>
       </Link>
     </div>
   )
 }
 
-function getPageElement (page, currentPage) {
-  return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
-      <a className={(page + '' === currentPage + '' ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white ' : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
-      ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
-      {page}
+function getPageElement(page, currentPage) {
+  return (
+    <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
+      <a
+        className={
+          (page + '' === currentPage + ''
+            ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
+            : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
+          ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
+        }
+      >
+        {page}
       </a>
     </Link>
+  )
 }
 
-function generatePages (page, currentPage, totalPage) {
+function generatePages(page, currentPage, totalPage) {
   const pages = []
   const groupCount = 7 // 最多显示页签数
   if (totalPage <= groupCount) {

themes/medium/LayoutArchive.js

@@ -44,7 +44,10 @@ export const LayoutArchive = props => {
                       {post.date.start_date}
                     </span>{' '}
                     &nbsp;
-                    <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
+                    <Link
+                      href={`${BLOG.SUB_PATH}/article/${post.slug}`}
+                      passHref
+                    >
                       <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
                         {post.title}
                       </a>

themes/medium/components/BlogPostCard.js

@@ -11,32 +11,48 @@ const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
   const { locale } = useGlobal()
   return (
-      <div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
+    <div
+      key={post.id}
+      className="animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 "
+    >
+      <div className="lg:p-8 p-4 flex flex-col w-full">
+        <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+          <a
+            className={
+              'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'
+            }
+          >
+            {post.title}
+          </a>
+        </Link>
 
-        <div className='lg:p-8 p-4 flex flex-col w-full'>
-          <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
-              {post.title}
-            </a>
-          </Link>
+        <div
+          className={
+            'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
+          }
+        >
+          <div className="text-sm py-1">{post.date.start_date}</div>
+          {CONFIG_MEDIUM.POST_LIST_CATEGORY && (
+            <CategoryItem category={post.category} />
+          )}
+          {CONFIG_MEDIUM.POST_LIST_TAG &&
+            post?.tagItems?.map(tag => (
+              <TagItemMini key={tag.name} tag={tag} />
+            ))}
+        </div>
 
-          <div className={'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'}>
-            <div className='text-sm py-1'>{post.date.start_date}</div>
-            { CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category}/>}
-            { CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-          </div>
+        <div className="flex"></div>
 
-          <div className='flex'>
-
-          </div>
-
-          {(!showPreview || showSummary) && <p className='my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
+        {(!showPreview || showSummary) && (
+          <p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
             {post.summary}
-          </p>}
+          </p>
+        )}
 
-          {showPreview && <div className='overflow-ellipsis truncate'>
+        {showPreview && (
+          <div className="overflow-ellipsis truncate">
             <NotionRenderer
-              bodyClassName='max-h-full'
+              bodyClassName="max-h-full"
               recordMap={post.blockMap}
               mapPageUrl={mapPageUrl}
               components={{
@@ -45,20 +61,20 @@ const BlogPostCard = ({ post, showSummary }) => {
                 collection: Collection
               }}
             />
-             <div className='pointer-events-none border-t pt-8 border-dashed'>
-                <div className='w-full justify-start flex'>
-                  <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-                      <a className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer'>
-                        {locale.COMMON.ARTICLE_DETAIL}
-                        <i className='ml-1 fas fa-angle-right'/></a>
-
-                   </Link>
-                </div>
+            <div className="pointer-events-none border-t pt-8 border-dashed">
+              <div className="w-full justify-start flex">
+                <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+                  <a className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
+                    {locale.COMMON.ARTICLE_DETAIL}
+                    <i className="ml-1 fas fa-angle-right" />
+                  </a>
+                </Link>
               </div>
-          </div> }
-        </div>
+            </div>
+          </div>
+        )}
       </div>
-
+    </div>
   )
 }
 

themes/medium/components/PaginationSimple.js

@@ -16,22 +16,38 @@ const PaginationSimple = ({ page, totalPage }) => {
   const currentPage = +page
   const showNext = currentPage < totalPage
   return (
-    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
-     <Link
-        href={ {
-          pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
+    <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
+              ? `${BLOG.SUB_PATH || '/'}`
+              : `/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <a
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
+          rel="prev"
+          className={`${
+            currentPage === 1 ? 'invisible' : 'block'
+          } text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
         >
           ← {locale.PAGINATION.PREV}
         </a>
       </Link>
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
+      <Link
+        href={{
+          pathname: `/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <a
-          rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
+          rel="next"
+          className={`${
+            +showNext ? 'block' : 'invisible'
+          } text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
         >
           {locale.PAGINATION.NEXT} →
         </a>

themes/next/components/BlogPostArchive.js

@@ -12,20 +12,34 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
   if (!posts || posts.length === 0) {
     return <></>
   } else {
-    return <div>
-      <div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
-      <ul>
-        {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
-            <div id={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
-              <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-                <a className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
-              </Link>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
+    return (
+      <div>
+        <div
+          className="pt-16 pb-4 text-3xl dark:text-gray-300"
+          id={archiveTitle}
+        >
+          {archiveTitle}
+        </div>
+        <ul>
+          {posts.map(post => (
+            <li
+              key={post.id}
+              className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+            >
+              <div id={post?.date?.start_date}>
+                <span className="text-gray-400">{post.date.start_date}</span>{' '}
+                &nbsp;
+                <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+                  <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                    {post.title}
+                  </a>
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
   }
 }
 

themes/next/components/BlogPostCard.js

@@ -3,7 +3,13 @@ import { useGlobal } from '@/lib/global'
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
-import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import {
+  Code,
+  Collection,
+  CollectionRow,
+  Equation,
+  NotionRenderer
+} from 'react-notion-x'
 import Card from './Card'
 import TagItemMini from './TagItemMini'
 import CONFIG_NEXT from '../config_next'
@@ -12,77 +18,115 @@ const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
   const showPreview = CONFIG_NEXT.POST_LIST_PREVIEW && post.blockMap
   return (
-    <Card className='w-full animate__animated animate__fadeIn'>
-       <div key={post.id} className='flex flex-col-reverse justify-between duration-300'>
-
-      <div className='lg:p-8 p-4 flex flex-col w-full'>
-        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
-            {post.title}
-          </a>
-        </Link>
-
-        <div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}>
-          <div>
-          { post.category && (<>
-          <Link href={`/category/${post.category}`} passHref>
-            <a className='cursor-pointer font-light text-sm hover:underline transform'>
-              <i className='mr-1 fas fa-folder' />{post.category}
+    <Card className="w-full animate__animated animate__fadeIn">
+      <div
+        key={post.id}
+        className="flex flex-col-reverse justify-between duration-300"
+      >
+        <div className="lg:p-8 p-4 flex flex-col w-full">
+          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+            <a
+              className={`cursor-pointer font-bold hover:underline text-3xl ${
+                showPreview ? 'text-center' : ''
+              } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
+            >
+              {post.title}
             </a>
           </Link>
-          <span className='mx-2'>|</span>
-          </>) }
-          <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'>{post.date.start_date}</a>
-          </Link>
+
+          <div
+            className={`flex mt-2 items-center ${
+              showPreview ? 'justify-center' : 'justify-start'
+            } flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}
+          >
+            <div>
+              {post.category && (
+                <>
+                  <Link href={`/category/${post.category}`} passHref>
+                    <a className="cursor-pointer font-light text-sm hover:underline transform">
+                      <i className="mr-1 fas fa-folder" />
+                      {post.category}
+                    </a>
+                  </Link>
+                  <span className="mx-2">|</span>
+                </>
+              )}
+              <Link
+                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                passHref
+              >
+                <a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                  {post.date.start_date}
+                </a>
+              </Link>
+            </div>
+            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+              <div>
+                {' '}
+                {post.tagItems.map(tag => (
+                  <TagItemMini key={tag.name} tag={tag} />
+                ))}
+              </div>
+            </div>
           </div>
-          <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
-            <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
-          </div>
-        </div>
 
-        {(!showPreview || showSummary) && !post.results && <p className='mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
-          {post.summary}
-        </p>}
+          {(!showPreview || showSummary) && !post.results && (
+            <p className="mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+              {post.summary}
+            </p>
+          )}
 
-        {/* 搜索结果 */}
-        {post.results && <p className='mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
-            {post.results.map(r => <span key={r}>{r}</span>)}
-        </p> }
+          {/* 搜索结果 */}
+          {post.results && (
+            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+              {post.results.map(r => (
+                <span key={r}>{r}</span>
+              ))}
+            </p>
+          )}
 
-        {showPreview && post?.blockMap && <div className='overflow-ellipsis truncate'>
-          <NotionRenderer
-            bodyClassName='max-h-full'
-            recordMap={post.blockMap}
-            mapPageUrl={mapPageUrl}
-            components={{
-              equation: Equation,
-              code: Code,
-              collectionRow: CollectionRow,
-              collection: Collection
-            }}
-          />
-        </div> }
+          {showPreview && post?.blockMap && (
+            <div className="overflow-ellipsis truncate">
+              <NotionRenderer
+                bodyClassName="max-h-full"
+                recordMap={post.blockMap}
+                mapPageUrl={mapPageUrl}
+                components={{
+                  equation: Equation,
+                  code: Code,
+                  collectionRow: CollectionRow,
+                  collection: Collection
+                }}
+              />
+            </div>
+          )}
 
-        <div className='text-right border-t pt-8 border-dashed'>
-          <Link href={`${BLOG.PATH}/article/${post.slug}`}>
-              <a className='hover:bg-opacity-100 hover:underline transform duration-300 p-3 text-white bg-gray-800 dark:bg-black cursor-pointer'>
+          <div className="text-right border-t pt-8 border-dashed">
+            <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`}>
+              <a className="hover:bg-opacity-100 hover:underline transform duration-300 p-3 text-white bg-gray-800 dark:bg-black cursor-pointer">
                 {locale.COMMON.ARTICLE_DETAIL}
-                <i className='ml-1 fas fa-angle-right' /></a>
+                <i className="ml-1 fas fa-angle-right" />
+              </a>
+            </Link>
+          </div>
+        </div>
+
+        {CONFIG_NEXT.POST_LIST_COVER && post?.page_cover && (
+          <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
+            <div className="h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden">
+              <Image
+                className="hover:scale-105 transform duration-500"
+                src={post?.page_cover}
+                alt={post.title}
+                layout="fill"
+                objectFit="cover"
+                loading="lazy"
+              />
+            </div>
           </Link>
-        </div>
+        )}
       </div>
-
-      {CONFIG_NEXT.POST_LIST_COVER && post?.page_cover && (
-        <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-        <div className='h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden'>
-          <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
-        </div>
-      </Link>
-      )}
-    </div >
     </Card>
-
   )
 }
 

themes/next/components/LatestPostsGroup.js

@@ -17,24 +17,41 @@ const LatestPostsGroup = ({ posts }) => {
   const currentPath = useRouter().asPath
   const { locale } = useGlobal()
 
-  return <>
-      <div className='text-sm pb-1 px-2 flex flex-nowrap justify-between'>
-        <div className='font-light text-gray-600  dark:text-gray-200'><i className='mr-2 fas fa-archive' />{locale.COMMON.LATEST_POSTS}</div>
+  return (
+    <>
+      <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between">
+        <div className="font-light text-gray-600  dark:text-gray-200">
+          <i className="mr-2 fas fa-archive" />
+          {locale.COMMON.LATEST_POSTS}
+        </div>
       </div>
       {posts.map(post => {
-        const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
+        const selected = currentPath === `${BLOG.SUB_PATH}/article/${post.slug}`
         return (
-          <Link key={post.id} title={post.title} href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={ 'my-1 flex font-light'}>
-              <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
-                'hover:text-white dark:hover:text-white cursor-pointer' }>
-                <i className='mr-2 fas fa-file-alt'/>
-                <div className='truncate'>{post.title}</div>
+          <Link
+            key={post.id}
+            title={post.title}
+            href={`${BLOG.SUB_PATH}/article/${post.slug}`}
+            passHref
+          >
+            <a className={'my-1 flex font-light'}>
+              <div
+                className={
+                  (selected
+                    ? 'text-white  bg-gray-600 '
+                    : 'text-gray-500 dark:text-gray-400 ') +
+                  ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
+                  'hover:text-white dark:hover:text-white cursor-pointer'
+                }
+              >
+                <i className="mr-2 fas fa-file-alt" />
+                <div className="truncate">{post.title}</div>
               </div>
             </a>
           </Link>
         )
       })}
     </>
+  )
 }
 export default LatestPostsGroup

themes/next/components/PaginationNumber.js

@@ -16,45 +16,68 @@ const PaginationNumber = ({ page, totalPage }) => {
   const pages = generatePages(page, currentPage, totalPage)
 
   return (
-    <div className='my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-500 bg-white dark:bg-gray-700 dark:text-gray-300 py-3 shadow space-x-2'>
-
+    <div className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-500 bg-white dark:bg-gray-700 dark:text-gray-300 py-3 shadow space-x-2">
       {/* 上一页 */}
       <Link
-        href={ {
-          pathname: (currentPage - 1 === 1 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
+        href={{
+          pathname:
+            currentPage - 1 === 1
+              ? `${BLOG.SUB_PATH || '/'}`
+              : `/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <div
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
+          rel="prev"
+          className={`${
+            currentPage === 1 ? 'invisible' : 'block'
+          } border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
         >
-          <i className='fas fa-angle-left'/>
+          <i className="fas fa-angle-left" />
         </div>
       </Link>
 
       {pages}
 
       {/* 下一页 */}
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
+      <Link
+        href={{
+          pathname: `/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <div
-          rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} border-t-2 border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
+          rel="next"
+          className={`${
+            +showNext ? 'block' : 'invisible'
+          } border-t-2 border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
         >
-          <i className='fas fa-angle-right'/>
+          <i className="fas fa-angle-right" />
         </div>
       </Link>
     </div>
   )
 }
 
-function getPageElement (page, currentPage) {
-  return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
-      <a className={(page + '' === currentPage + '' ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white ' : 'border-t-2 duration-500 border-white hover:border-gray-400 ') +
-      ' border-white dark:border-gray-700 dark:hover:border-gray-400 cursor-pointer w-6 text-center font-light hover:font-bold'}>
-      {page}
+function getPageElement(page, currentPage) {
+  return (
+    <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
+      <a
+        className={
+          (page + '' === currentPage + ''
+            ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
+            : 'border-t-2 duration-500 border-white hover:border-gray-400 ') +
+          ' border-white dark:border-gray-700 dark:hover:border-gray-400 cursor-pointer w-6 text-center font-light hover:font-bold'
+        }
+      >
+        {page}
       </a>
     </Link>
+  )
 }
-function generatePages (page, currentPage, totalPage) {
+function generatePages(page, currentPage, totalPage) {
   const pages = []
   const groupCount = 7 // 最多显示页签数
   if (totalPage <= groupCount) {

themes/next/components/PaginationSimple.js

@@ -15,22 +15,38 @@ const PaginationSimple = ({ page, showNext }) => {
   const router = useRouter()
   const currentPage = +page
   return (
-    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
+    <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
       <Link
-        href={ {
-          pathname: (currentPage - 1 === 1 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
-        } } passHref >
+        href={{
+          pathname:
+            currentPage - 1 === 1
+              ? `${BLOG.SUB_PATH || '/'}`
+              : `/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <button
-          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          rel="prev"
+          className={`${
+            currentPage === 1 ? 'invisible' : 'block'
+          } w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
         >
           ← {locale.PAGINATION.PREV}
         </button>
       </Link>
-      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
+      <Link
+        href={{
+          pathname: `/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+      >
         <button
-          rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          rel="next"
+          className={`${
+            +showNext ? 'block' : 'invisible'
+          } w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
         >
           {locale.PAGINATION.NEXT} →
         </button>