Merge pull request #146 from txs:feature_og_url_image_path_env_fix

Feature og url image, path env fix for vercel deploy
2026-05-14 07:26:52 +00:00 · 2022-04-04 10:19:13 +08:00
parent 28cc3e3053 ebdaf4273f
commit 6de1102bfb
34 changed files with 903 additions and 470 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,7 +23,8 @@ module.exports = {
    }
  },
  rules: {
-    'react/prop-types': 'off'
+    'react/prop-types': 'off',
+    'space-before-function-paren': 0
  },
  globals: {
    React: true
--- a/blog.config.js
+++ b/blog.config.js
@@ -5,7 +5,8 @@ const BLOG = {
  LINK: 'https://tangly1024.com', // 网站地址
  AVATAR: '/avatar.png', // 个人头像 默认取public目录下的avatar.png
  KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
-  NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+  NOTION_PAGE_ID:
+    process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
  NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
  DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮

@@ -17,10 +18,11 @@ const BLOG = {
  BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
  APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
  FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
-  FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
+  FONT_AWESOME_PATH:
+    'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
  BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
  BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
-  PATH: '', // leave this empty unless you want to deploy in a folder
+  SUB_PATH: '', // leave this empty unless you want to deploy in a folder

  POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
  POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
@@ -41,7 +43,8 @@ const BLOG = {

  // 悬浮挂件
  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
-  WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+  WIDGET_PET_LINK:
+    'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
  WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题

  // 评论互动 可同时开启多个支持 GISCUS CUSDIS UTTERRANCES GITALK
@@ -49,27 +52,40 @@ const BLOG = {
  // giscus @see https://giscus.app/
  COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext'
  COMMENT_GISCUS_REPO_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID || '', // 你的Github Repo ID e.g ( 設定完 giscus 即可看到 )
-  COMMENT_GISCUS_CATEGORY_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
-  COMMENT_GISCUS_MAPPING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
-  COMMENT_GISCUS_REACTIONS_ENABLED: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
-  COMMENT_GISCUS_EMIT_METADATA: process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
-  COMMENT_GISCUS_INPUT_POSITION: process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
+  COMMENT_GISCUS_CATEGORY_ID:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
+  COMMENT_GISCUS_MAPPING:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
+  COMMENT_GISCUS_REACTIONS_ENABLED:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
+  COMMENT_GISCUS_EMIT_METADATA:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
+  COMMENT_GISCUS_INPUT_POSITION:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
  COMMENT_GISCUS_LANG: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LANG || 'zh-CN', // 你的 Giscus 語言 e.g 'en', 'zh-TW', 'zh-CN', 預設 'en'
-  COMMENT_GISCUS_LOADING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
-  COMMENT_GISCUS_CROSSORIGIN: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
+  COMMENT_GISCUS_LOADING:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
+  COMMENT_GISCUS_CROSSORIGIN:
+    process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'

  COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
-  COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
-  COMMENT_CUSDIS_SCRIPT_SRC: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
+  COMMENT_CUSDIS_HOST:
+    process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+  COMMENT_CUSDIS_SCRIPT_SRC:
+    process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC ||
+    'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version

-  COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
+  COMMENT_UTTERRANCES_REPO:
+    process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/

  // gitalk评论插件 更多参考 https://gitalk.github.io/
  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
  COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024
  COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // 管理员用户名、一般是自己 e.g 'tangly1024'
-  COMMENT_GITALK_CLIENT_ID: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
-  COMMENT_GITALK_CLIENT_SECRET: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
+  COMMENT_GITALK_CLIENT_ID:
+    process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
+  COMMENT_GITALK_CLIENT_SECRET:
+    process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
  COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式

  COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
@@ -82,17 +98,22 @@ const BLOG = {
  ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
  ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX

-  ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
-  ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
-  ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
+  ANALYTICS_ACKEE_TRACKER:
+    process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
+  ANALYTICS_ACKEE_DATA_SERVER:
+    process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
+  ANALYTICS_ACKEE_DOMAIN_ID:
+    process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'

-  SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
+  SEO_GOOGLE_SITE_VERIFICATION:
+    process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

  ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx

  // 无关紧要的配置
  TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
-  DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
+  DESCRIPTION:
+    process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖

  isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
  VERSION: '2.9.1' // 版本号
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -2,47 +2,59 @@ import BLOG from '@/blog.config'
 import Head from 'next/head'

 const CommonHead = ({ meta, children }) => {
-  let url = BLOG?.PATH?.length ? `${BLOG.LINK}/${BLOG.PATH}` : BLOG.LINK
+  let url = BLOG?.PATH?.length ? `${BLOG.LINK}/${BLOG.SUB_PATH}` : BLOG.LINK
+  let image
  if (meta) {
    url = `${url}/${meta.slug}`
+    image = meta.image || ''
  }
  const title = meta?.title || BLOG.TITLE
  const description = meta?.description || BLOG.DESCRIPTION
  const type = meta?.type || 'website'
  const keywords = meta?.tags || BLOG.KEYWORDS

-  return <Head>
-    <title>{title}</title>
-    <meta name='theme-color' content={BLOG.BACKGROUND_DARK} />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
-    <meta name='robots' content='follow, index' />
-    <meta charSet='UTF-8' />
-    {BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
-      <meta name='google-site-verification' content={BLOG.SEO_GOOGLE_SITE_VERIFICATION} />
-    )}
-    <meta name='keywords' content={keywords} />
-    <meta name='description' content={description} />
-    <meta property='og:locale' content={BLOG.LANG} />
-    <meta property='og:title' content={title} />
-    <meta property='og:description' content={description} />
-    <meta property='og:url' content={url}
-    />
-    <meta property='og:type' content={type} />
-    <meta name='twitter:card' content='summary_large_image' />
-    <meta name='twitter:description' content={description} />
-    <meta name='twitter:title' content={title} />
-    {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade"/> }
-    {meta?.type === 'article' && (
-      <>
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="theme-color" content={BLOG.BACKGROUND_DARK} />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, user-scalable=no"
+      />
+      <meta name="robots" content="follow, index" />
+      <meta charSet="UTF-8" />
+      {BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
        <meta
-          property='article:published_time'
-          content={meta.date || meta.createdTime}
+          name="google-site-verification"
+          content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
        />
-        <meta property='article:author' content={BLOG.AUTHOR} />
-      </>
-    )}
-    {children}
-  </Head>
+      )}
+      <meta name="keywords" content={keywords} />
+      <meta name="description" content={description} />
+      <meta property="og:locale" content={BLOG.LANG} />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:url" content={url} />
+      <meta property="og:image" content={image} />
+      <meta property="og:type" content={type} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:title" content={title} />
+      {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && (
+        <meta name="referrer" content="no-referrer-when-downgrade" />
+      )}
+      {meta?.type === 'article' && (
+        <>
+          <meta
+            property="article:published_time"
+            content={meta.date || meta.createdTime}
+          />
+          <meta property="article:author" content={BLOG.AUTHOR} />
+        </>
+      )}
+      {children}
+    </Head>
+  )
 }

 export default CommonHead
--- a/lib/rss.js
+++ b/lib/rss.js
@@ -1,7 +1,13 @@
 import { Feed } from 'feed'
 import BLOG from '@/blog.config'
 import ReactDOMServer from 'react-dom/server'
-import { NotionRenderer, Equation, Code, Collection, CollectionRow } from 'react-notion-x'
+import {
+  NotionRenderer,
+  Equation,
+  Code,
+  Collection,
+  CollectionRow
+} from 'react-notion-x'
 import { getPostBlocks } from './notion'

 const mapPageUrl = id => 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -13,28 +19,31 @@ const createFeedContent = async post => {
  }
  const blockMap = await getPostBlocks(post.id, 'rss-content')
  if (blockMap) {
-    const content = ReactDOMServer.renderToString(<NotionRenderer
-      recordMap={blockMap}
-      components={{
-        equation: Equation,
-        code: Code,
-        collection: Collection,
-        collectionRow: CollectionRow
-      }}
-      mapPageUrl={mapPageUrl}
-    />)
-    const regexExp = /<div class="notion-collection-row"><div class="notion-collection-row-body"><div class="notion-collection-row-property"><div class="notion-collection-column-title"><svg.*?class="notion-collection-column-title-icon">.*?<\/svg><div class="notion-collection-column-title-body">.*?<\/div><\/div><div class="notion-collection-row-value">.*?<\/div><\/div><\/div><\/div>/g
+    const content = ReactDOMServer.renderToString(
+      <NotionRenderer
+        recordMap={blockMap}
+        components={{
+          equation: Equation,
+          code: Code,
+          collection: Collection,
+          collectionRow: CollectionRow
+        }}
+        mapPageUrl={mapPageUrl}
+      />
+    )
+    const regexExp =
+      /<div class="notion-collection-row"><div class="notion-collection-row-body"><div class="notion-collection-row-property"><div class="notion-collection-column-title"><svg.*?class="notion-collection-column-title-icon">.*?<\/svg><div class="notion-collection-column-title-body">.*?<\/div><\/div><div class="notion-collection-row-value">.*?<\/div><\/div><\/div><\/div>/g
    return content.replace(regexExp, '')
  }
  return post.summary
 }

-export async function generateRss (posts) {
+export async function generateRss(posts) {
  const year = new Date().getFullYear()
  const feed = new Feed({
    title: BLOG.TITLE,
    description: BLOG.DESCRIPTION,
-    link: `${BLOG.LINK}/${BLOG.PATH}`,
+    link: `${BLOG.LINK}/${BLOG.SUB_PATH}`,
    language: BLOG.LANG,
    favicon: `${BLOG.LINK}/favicon.png`,
    copyright: `All rights reserved ${year}, ${BLOG.AUTHOR}`,
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -15,7 +15,7 @@ const Slug = props => {
  const ThemeComponents = ThemeMap[theme]
  const { post } = props
  if (!post) {
-    return <ThemeComponents.Layout404 {...props}/>
+    return <ThemeComponents.Layout404 {...props} />
  }

  // 文章锁🔐
@@ -43,15 +43,17 @@ const Slug = props => {
    title: `${post.title} | ${siteInfo.title}`,
    description: post.summary,
    type: 'article',
+    image: post.page_cover,
+    slug: post.slug,
    tags: post.tags
  }

  props = { ...props, meta, lock, setLock, validPassword }

-  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false}/>
+  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false} />
 }

-export async function getStaticPaths () {
+export async function getStaticPaths() {
  if (!BLOG.isProd) {
    return {
      paths: [],
@@ -61,7 +63,8 @@ export async function getStaticPaths () {

  const from = 'slug-paths'
  const { allPosts } = await getGlobalNotionData({ from, pageType: ['Page'] })
-  const filterPosts = allPosts?.filter(e => e?.slug?.indexOf('http') !== 0) || []
+  const filterPosts =
+    allPosts?.filter(e => e?.slug?.indexOf('http') !== 0) || []

  return {
    paths: filterPosts.map(row => ({ params: { slug: row.slug } })),
@@ -69,7 +72,7 @@ export async function getStaticPaths () {
  }
 }

-export async function getStaticProps ({ params: { slug } }) {
+export async function getStaticProps({ params: { slug } }) {
  const from = `slug-props-${slug}`
  const props = await getGlobalNotionData({ from, pageType: ['Page'] })
  const { allPosts } = props
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -10,13 +10,14 @@ const ArchiveIndex = props => {
  const meta = {
    title: `${locale.NAV.ARCHIVE} | ${siteInfo.title}`,
    description: siteInfo.description,
+    slug: 'archive',
    type: 'website'
  }

-  return <ThemeComponents.LayoutArchive {...props} meta={meta}/>
+  return <ThemeComponents.LayoutArchive {...props} meta={meta} />
 }

-export async function getStaticProps () {
+export async function getStaticProps() {
  const props = await getGlobalNotionData({ from: 'archive-index' })
  props.posts = props.allPosts
  return {
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -61,13 +61,17 @@ const Slug = props => {
    title: `${props.post.title} | ${siteInfo.title}`,
    description: props.post.summary,
    type: 'article',
+    slug: 'article/' + props.post.slug,
+    image: props.post.page_cover,
    tags: props.post.tags
  }

-  return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta}/>
+  return (
+    <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
+  )
 }

-export async function getStaticPaths () {
+export async function getStaticPaths() {
  if (!BLOG.isProd) {
    return {
      paths: [],
@@ -83,7 +87,7 @@ export async function getStaticPaths () {
  }
 }

-export async function getStaticProps ({ params: { slug } }) {
+export async function getStaticProps({ params: { slug } }) {
  const from = `slug-props-${slug}`
  const props = await getGlobalNotionData({ from, pageType: ['Post'] })
  const allPosts = props.allPosts
@@ -96,7 +100,11 @@ export async function getStaticProps ({ params: { slug } }) {
  const index = allPosts.indexOf(props.post)
  props.prev = allPosts.slice(index - 1, index)[0] ?? allPosts.slice(-1)[0]
  props.next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0]
-  props.recommendPosts = getRecommendPost(props.post, allPosts, BLOG.POST_RECOMMEND_COUNT)
+  props.recommendPosts = getRecommendPost(
+    props.post,
+    allPosts,
+    BLOG.POST_RECOMMEND_COUNT
+  )
  return {
    props,
    revalidate: 1
@@ -110,7 +118,7 @@ export async function getStaticProps ({ params: { slug } }) {
 * @param {*} count
 * @returns
 */
-function getRecommendPost (post, allPosts, count = 6) {
+function getRecommendPost(post, allPosts, count = 6) {
  let recommendPosts = []
  const postIds = []
  const currentTags = post.tags || []
--- a/pages/category/[category].js
+++ b/pages/category/[category].js
@@ -3,23 +3,26 @@ import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'

-export default function Category (props) {
+export default function Category(props) {
  const { theme } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
  const { siteInfo, posts } = props
  const { locale } = useGlobal()
  if (!posts) {
-    return <ThemeComponents.Layout404 {...props}/>
+    return <ThemeComponents.Layout404 {...props} />
  }
  const meta = {
-    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${siteInfo?.title || ''}`,
+    title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
+      siteInfo?.title || ''
+    }`,
    description: siteInfo?.description,
+    slug: 'category/' + props.category,
    type: 'website'
  }
  return <ThemeComponents.LayoutCategory {...props} meta={meta} />
 }

-export async function getStaticProps ({ params: { category } }) {
+export async function getStaticProps({ params: { category } }) {
  const from = 'category-props'
  let props = await getGlobalNotionData({ from })
  const posts = props.allPosts.filter(
@@ -33,11 +36,13 @@ export async function getStaticProps ({ params: { category } }) {
  }
 }

-export async function getStaticPaths () {
+export async function getStaticPaths() {
  const from = 'category-paths'
  const { categories } = await getGlobalNotionData({ from })
  return {
-    paths: Object.keys(categories).map(category => ({ params: { category: categories[category]?.name } })),
+    paths: Object.keys(categories).map(category => ({
+      params: { category: categories[category]?.name }
+    })),
    fallback: true
  }
 }
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'

-export default function Category (props) {
+export default function Category(props) {
  const { theme } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
  const { locale } = useGlobal()
@@ -11,13 +11,17 @@ export default function Category (props) {
  const meta = {
    title: `${locale.COMMON.CATEGORY} | ${siteInfo.title}`,
    description: siteInfo.description,
+    slug: 'category',
    type: 'website'
  }
-  return <ThemeComponents.LayoutCategoryIndex {...props} meta={meta}/>
+  return <ThemeComponents.LayoutCategoryIndex {...props} meta={meta} />
 }

-export async function getStaticProps () {
-  const props = await getGlobalNotionData({ from: 'category-index-props', categoryCount: 0 })
+export async function getStaticProps() {
+  const props = await getGlobalNotionData({
+    from: 'category-index-props',
+    categoryCount: 0
+  })
  return {
    props,
    revalidate: 1
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,19 +3,21 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalNotionData } from '@/lib/notion/getNotionData'
 import * as ThemeMap from '@/themes'
 import { useGlobal } from '@/lib/global'
-const Index = (props) => {
+const Index = props => {
  const { theme } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
-  return <ThemeComponents.LayoutIndex {...props}/>
+  return <ThemeComponents.LayoutIndex {...props} />
 }

-export async function getStaticProps () {
+export async function getStaticProps() {
  const from = 'index'
  const props = await getGlobalNotionData({ from, pageType: ['Post'] })
  const { allPosts, siteInfo } = props
  const meta = {
    title: `${siteInfo.title} | ${siteInfo.description}`,
    description: siteInfo.description,
+    image: siteInfo.pageCover,
+    slug: '',
    type: 'website'
  }

@@ -35,7 +37,11 @@ export async function getStaticProps () {
        if (post.password && post.password !== '') {
          continue
        }
-        const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
+        const blockMap = await getPostBlocks(
+          post.id,
+          'slug',
+          BLOG.POST_PREVIEW_LINES
+        )
        if (blockMap) {
          post.blockMap = blockMap
        }
@@ -46,7 +52,8 @@ export async function getStaticProps () {

  return {
    props: {
-      meta, ...props
+      meta,
+      ...props
    },
    revalidate: 1
  }
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -14,23 +14,26 @@ const Page = props => {
  const meta = {
    title: `${props.page} | Page | ${siteInfo.title}`,
    description: siteInfo.description,
+    slug: 'page/' + props.page,
    type: 'website'
  }
  return <ThemeComponents.LayoutPage {...props} meta={meta} />
 }

-export async function getStaticPaths () {
+export async function getStaticPaths() {
  const from = 'page-paths'
  const { postCount } = await getGlobalNotionData({ from })
  const totalPages = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
  return {
    // remove first page, we 're not gonna handle that.
-    paths: Array.from({ length: totalPages - 1 }, (_, i) => ({ params: { page: '' + (i + 2) } })),
+    paths: Array.from({ length: totalPages - 1 }, (_, i) => ({
+      params: { page: '' + (i + 2) }
+    })),
    fallback: true
  }
 }

-export async function getStaticProps ({ params: { page } }) {
+export async function getStaticProps({ params: { page } }) {
  const from = `page-${page}`
  const props = await getGlobalNotionData({ from })
  props.page = page
@@ -45,7 +48,11 @@ export async function getStaticProps ({ params: { page } }) {
      if (post.password && post.password !== '') {
        continue
      }
-      const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
+      const blockMap = await getPostBlocks(
+        post.id,
+        'slug',
+        BLOG.POST_PREVIEW_LINES
+      )
      if (blockMap) {
        post.blockMap = blockMap
      }
--- a/pages/search/[keyword].js
+++ b/pages/search/[keyword].js
@@ -7,13 +7,22 @@ const Index = props => {
  const { keyword, siteInfo } = props
  const { locale } = useGlobal()
  const meta = {
-    title: `${keyword || ''} | ${locale.NAV.SEARCH} | ${siteInfo.title}`,
+    title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${
+      siteInfo.title
+    }`,
    description: siteInfo.title,
+    slug: 'search/' + (keyword || ''),
    type: 'website'
  }
  const { theme } = useGlobal()
  const ThemeComponents = ThemeMap[theme]
-  return <ThemeComponents.LayoutSearch {...props} meta={meta} currentSearch={keyword} />
+  return (
+    <ThemeComponents.LayoutSearch
+      {...props}
+      meta={meta}
+      currentSearch={keyword}
+    />
+  )
 }

 /**
@@ -21,8 +30,11 @@ const Index = props => {
 * @param {*} param0
 * @returns
 */
-export async function getServerSideProps ({ params: { keyword } }) {
-  const props = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
+export async function getServerSideProps({ params: { keyword } }) {
+  const props = await getGlobalNotionData({
+    from: 'search-props',
+    pageType: ['Post']
+  })
  props.posts = await filterByMemCache(props.allPosts, keyword)
  props.keyword = keyword
  return {
@@ -37,7 +49,7 @@ export async function getServerSideProps ({ params: { keyword } }) {
 * @param key
 * @returns {*}
 */
-function appendText (sourceTextArray, targetObj, key) {
+function appendText(sourceTextArray, targetObj, key) {
  if (!targetObj) {
    return sourceTextArray
  }
@@ -54,7 +66,7 @@ function appendText (sourceTextArray, targetObj, key) {
 * @param {*} textArray
 * @returns
 */
-function getTextContent (textArray) {
+function getTextContent(textArray) {
  if (typeof textArray === 'object' && isIterable(textArray)) {
    let result = ''
    for (const textObj of textArray) {
@@ -71,7 +83,8 @@ function getTextContent (textArray) {
 * @param {*} obj
 * @returns
 */
-const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'function'
+const isIterable = obj =>
+  obj != null && typeof obj[Symbol.iterator] === 'function'

 /**
 * 在内存缓存中进行全文索引
@@ -79,7 +92,7 @@ const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'functi
 * @param keyword 关键词
 * @returns
 */
-async function filterByMemCache (allPosts, keyword) {
+async function filterByMemCache(allPosts, keyword) {
  const filterPosts = []
  for (const post of allPosts) {
    const cacheKey = 'page_block_' + post.id
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -12,7 +12,8 @@ const Search = props => {
    filteredPosts = posts.filter(post => {
      const tagContent = post.tags ? post.tags.join(' ') : ''
      const categoryContent = post.category ? post.category.join(' ') : ''
-      const searchContent = post.title + post.summary + tagContent + categoryContent
+      const searchContent =
+        post.title + post.summary + tagContent + categoryContent
      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
    })
  } else {
@@ -21,22 +22,35 @@ const Search = props => {

  const { locale } = useGlobal()
  const meta = {
-    title: `${searchKey || ''} | ${locale.NAV.SEARCH} | ${siteInfo.title}`,
+    title: `${searchKey || ''}${searchKey ? ' | ' : ''}${locale.NAV.SEARCH} | ${
+      siteInfo.title
+    }`,
    description: siteInfo.description,
+    slug: 'search',
    type: 'website'
  }

  const { theme } = useGlobal()
  const ThemeComponents = ThemeMap[theme]

-  return <ThemeComponents.LayoutSearch {...props} posts={filteredPosts} currentSearch={searchKey} meta={meta} />
+  return (
+    <ThemeComponents.LayoutSearch
+      {...props}
+      posts={filteredPosts}
+      currentSearch={searchKey}
+      meta={meta}
+    />
+  )
 }

 /**
 * 浏览器前端搜索
 */
-export async function getStaticProps () {
-  const props = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
+export async function getStaticProps() {
+  const props = await getGlobalNotionData({
+    from: 'search-props',
+    pageType: ['Post']
+  })
  props.posts = props.allPosts
  return {
    props,
@@ -44,7 +58,7 @@ export async function getStaticProps () {
  }
 }

-function getSearchKey () {
+function getSearchKey() {
  const router = useRouter()
  if (router.query && router.query.s) {
    return router.query.s
--- a/pages/tag/[tag].js
+++ b/pages/tag/[tag].js
@@ -9,21 +9,28 @@ const Tag = props => {
  const { tag, siteInfo, posts } = props

  if (!posts) {
-    return <ThemeComponents.Layout404 {...props}/>
+    return <ThemeComponents.Layout404 {...props} />
  }

  const meta = {
    title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
    description: siteInfo?.description,
+    slug: 'tag/' + tag,
    type: 'website'
  }
-  return <ThemeComponents.LayoutTag {...props} meta={meta}/>
+  return <ThemeComponents.LayoutTag {...props} meta={meta} />
 }

-export async function getStaticProps ({ params: { tag } }) {
-  const props = await getGlobalNotionData({ from: 'tag-props', includePage: false, tagsCount: 0 })
+export async function getStaticProps({ params: { tag } }) {
+  const props = await getGlobalNotionData({
+    from: 'tag-props',
+    includePage: false,
+    tagsCount: 0
+  })
  const { allPosts } = props
-  props.posts = allPosts.filter(post => post && post.tags && post.tags.includes(tag))
+  props.posts = allPosts.filter(
+    post => post && post.tags && post.tags.includes(tag)
+  )
  props.tag = tag
  return {
    props,
@@ -36,7 +43,7 @@ export async function getStaticProps ({ params: { tag } }) {
 * @returns
 * @param tags
 */
-function getTagNames (tags) {
+function getTagNames(tags) {
  const tagNames = []
  tags.forEach(tag => {
    tagNames.push(tag.name)
@@ -44,13 +51,15 @@ function getTagNames (tags) {
  return tagNames
 }

-export async function getStaticPaths () {
+export async function getStaticPaths() {
  const from = 'tag-static-path'
  const { tags } = await getGlobalNotionData({ from, tagsCount: 0 })
  const tagNames = getTagNames(tags)

  return {
-    paths: Object.keys(tagNames).map(index => ({ params: { tag: tagNames[index] } })),
+    paths: Object.keys(tagNames).map(index => ({
+      params: { tag: tagNames[index] }
+    })),
    fallback: true
  }
 }
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -11,12 +11,13 @@ const TagIndex = props => {
  const meta = {
    title: `${locale.COMMON.TAGS} | ${siteInfo.title}`,
    description: siteInfo.description,
+    slug: 'tag',
    type: 'website'
  }
  return <ThemeComponents.LayoutTagIndex {...props} meta={meta} />
 }

-export async function getStaticProps () {
+export async function getStaticProps() {
  const from = 'tag-index-props'
  const props = await getGlobalNotionData({ from, tagsCount: 0 })
  return {
--- a/themes/example/LayoutArchive.js
+++ b/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>
--- a/themes/example/LayoutIndex.js
+++ b/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>
  )
 }
--- a/themes/example/LayoutPage.js
+++ b/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>
  )
 }
--- a/themes/fukasawa/components/BlogCard.js
+++ b/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>
  )
 }

--- a/themes/fukasawa/components/BlogPostArchive.js
+++ b/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>
+    )
  }
 }

--- a/themes/fukasawa/components/PaginationSimple.js
+++ b/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>
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/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>
          )
        })}
--- a/themes/hexo/components/BlogPostArchive.js
+++ b/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>
+    )
  }
 }

--- a/themes/hexo/components/BlogPostCard.js
+++ b/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>
-
  )
 }

--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/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'}>
--- a/themes/hexo/components/PaginationNumber.js
+++ b/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) {
--- a/themes/medium/LayoutArchive.js
+++ b/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>
--- a/themes/medium/components/BlogPostCard.js
+++ b/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>
  )
 }

--- a/themes/medium/components/PaginationSimple.js
+++ b/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>
--- a/themes/next/components/BlogPostArchive.js
+++ b/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>
+    )
  }
 }

--- a/themes/next/components/BlogPostCard.js
+++ b/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>
-
  )
 }

--- a/themes/next/components/LatestPostsGroup.js
+++ b/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
--- a/themes/next/components/PaginationNumber.js
+++ b/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) {
--- a/themes/next/components/PaginationSimple.js
+++ b/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>