diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
index 3f0872ea..0c4b7600 100644
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -51,10 +51,10 @@ const LayoutBase = (props) => {
 
     {headerSlot}
 
-    <main id='wrapper' className='w-full justify-center py-8 min-h-screen'>
+    <main id='wrapper' className='w-full py-8 min-h-screen'>
 
-      <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-between md:space-x-4 max-w-7xl'>
-        <div className='flex-grow w-full'>
+      <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-center md:space-x-4'>
+        <div className='flex-grow w-full max-w-4xl'>
           {onLoading ? <LoadingCover/> : children}
         </div>
 
diff --git a/themes/hexo/components/ArticleAdjacent.js b/themes/hexo/components/ArticleAdjacent.js
index b7e36420..3ce2d17d 100644
--- a/themes/hexo/components/ArticleAdjacent.js
+++ b/themes/hexo/components/ArticleAdjacent.js
@@ -10,15 +10,15 @@ export default function ArticleAdjacent ({ prev, next }) {
   if (!prev || !next || !CONFIG_HEXO.ARTICLE_ADJACENT) {
     return <></>
   }
-  return <section className='text-gray-800 h-14 flex items-center justify-between space-x-5 my-1'>
+  return <section className='text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
     <Link href={`/article/${prev.slug}`} passHref>
-      <a className='text-sm cursor-pointer hover:underline justify-start items-center flex w-full h-full duration-200'>
-        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+      <a className='py-1  cursor-pointer hover:underline justify-start items-center dark:text-white flex w-full h-full duration-200'>
+        <i className='mr-1 fas fa-angle-left' />{prev.title}
       </a>
     </Link>
     <Link href={`/article/${next.slug}`} passHref>
-      <a className='text-sm  cursor-pointer hover:underline justify-end items-center flex w-full h-full duration-200'>{next.title}
-        <i className='ml-1 my-1 fas fa-angle-double-right' />
+      <a className='py-1 cursor-pointer hover:underline justify-end items-center dark:text-white flex w-full h-full duration-200'>{next.title}
+        <i className='ml-1 my-1 fas fa-angle-right' />
       </a>
     </Link>
   </section>
diff --git a/themes/hexo/components/ArticleCopyright.js b/themes/hexo/components/ArticleCopyright.js
index 42a27552..aadf73b9 100644
--- a/themes/hexo/components/ArticleCopyright.js
+++ b/themes/hexo/components/ArticleCopyright.js
@@ -16,7 +16,7 @@ export default function ArticleCopyright () {
   })
 
   const { locale } = useGlobal()
-  return <section className="dark:text-gray-300 mt-6">
+  return <section className="dark:text-gray-300 mt-6 mx-1 font-sans">
     <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-700 bg-gray-100 p-5 leading-8 border-l-2 border-blue-500">
       <li>
         <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
diff --git a/themes/hexo/components/ArticleDetail.js b/themes/hexo/components/ArticleDetail.js
index f0fa966b..38c7e073 100644
--- a/themes/hexo/components/ArticleDetail.js
+++ b/themes/hexo/components/ArticleDetail.js
@@ -10,6 +10,7 @@ import { useEffect, useRef } from 'react'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 import ArticleAdjacent from './ArticleAdjacent'
 import ArticleCopyright from './ArticleCopyright'
+import ArticleRecommend from './ArticleRecommend'
 
 /**
  *
@@ -67,6 +68,7 @@ export default function ArticleDetail (props) {
       </section>
 
       <ArticleCopyright {...props}/>
+      <ArticleRecommend {...props}/>
       <ArticleAdjacent {...props}/>
 
     </article>
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
new file mode 100644
index 00000000..a0503694
--- /dev/null
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -0,0 +1,52 @@
+import Link from 'next/link'
+import CONFIG_HEXO from '../config_hexo'
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 关联推荐文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleRecommend ({ recommendPosts }) {
+  if (!recommendPosts || !CONFIG_HEXO.ARTICLE_RECOMMEND) {
+    return <></>
+  }
+  const { locale } = useGlobal()
+  return (
+    <div className="p-2">
+      <div className="font-sans mb-2 px-1 flex flex-nowrap justify-between">
+        <div>
+          <i className="mr-2 fas fa-thumbs-up" />
+          {locale.COMMON.RELATE_POSTS}
+        </div>
+      </div>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        {recommendPosts.map(post => {
+          const headerImage = post?.page_cover
+            ? `url("${post.page_cover}")`
+            : `url("/${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+
+          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 }}
+              >
+                <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>
+            </a>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index 5829570c..5b0425ef 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import CONFIG_HEXO from '../config_hexo'
 
 /**
  * 最新文章列表
@@ -19,16 +20,24 @@ const LatestPostsGroup = ({ posts }) => {
 
   return <>
       <div className='font-sans mb-2 px-1 flex flex-nowrap justify-between'>
-        <div><i className='mr-2 fas fa-archive' />{locale.COMMON.LATEST_POSTS}</div>
+        <div><i className='mr-2 fas fas fa-history' />{locale.COMMON.LATEST_POSTS}</div>
       </div>
       {posts.map(post => {
         const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
+        const headerImage = post?.page_cover
+          ? `url("${post.page_cover}")`
+          : `url("/${CONFIG_HEXO.HOME_BANNER_IMAGE}")`
+
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.PATH}/article/${post.slug}`} passHref>
             <a className={ 'my-1 flex '}>
-              <div className={ (selected ? 'text-white  bg-blue-400 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-blue-400 px-2 duration-200 w-full rounded ' +
-                'hover:text-white dark:hover:text-white cursor-pointer items-center'}>
-                <div className='truncate'>{post.title}</div>
+              <div className='w-20 h-16 bg-cover bg-center bg-no-repeat' style={{ backgroundImage: headerImage }}/>
+              <div className={ (selected ? ' text-blue-400 ' : 'dark:text-gray-400 ') + ' text-sm py-1.5 overflow-x-hidden hover:text-blue-400 px-2 duration-200 w-full rounded ' +
+                'hover:text-white dark:hover:text-white cursor-pointer items-center flex'}>
+            <div>
+            <div style={{ WebkitLineClamp: 2 }}>{post.title}</div>
+                <div className='text-gray-500'>{post.date?.start_date}</div>
+            </div>
               </div>
             </a>
           </Link>
diff --git a/themes/hexo/components/SideRight.js b/themes/hexo/components/SideRight.js
index ddddb89d..5114c1aa 100644
--- a/themes/hexo/components/SideRight.js
+++ b/themes/hexo/components/SideRight.js
@@ -5,7 +5,7 @@ import TagGroups from './TagGroups'
 import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
 import { AnalyticsCard } from './AnalyticsCard'
-
+import CONFIG_HEXO from '../config_hexo'
 export default function SideRight (props) {
   const {
     post, currentCategory, categories, latestPosts, tags,
@@ -13,9 +13,9 @@ export default function SideRight (props) {
   } = props
 
   return (
-    <div className={'md:w-80 p-2 space-y-4'}>
+    <div className={'lg:w-80 p-2 space-y-4'}>
       <InfoCard {...props}/>
-      <AnalyticsCard {...props}/>
+      { CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props}/>}
 
       {showCategory && (
         <Card>
@@ -33,7 +33,7 @@ export default function SideRight (props) {
           <TagGroups tags={tags} currentTag={currentTag} />
         </Card>
       )}
-      {latestPosts && <Card>
+      {CONFIG_HEXO.WIDGET_LATEST_POSTS && latestPosts && <Card>
         <LatestPostsGroup posts={latestPosts} />
       </Card>}
 
diff --git a/themes/hexo/config_hexo.js b/themes/hexo/config_hexo.js
index 8b5b6723..819f181b 100644
--- a/themes/hexo/config_hexo.js
+++ b/themes/hexo/config_hexo.js
@@ -16,7 +16,10 @@ const CONFIG_HEXO = {
 
   ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
   ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+  ARTICLE_RECOMMEND: true, // 文章关联推荐
 
+  WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+  WIDGET_ANALYTICS: false, // 显示统计卡
   WIDGET_TO_TOP: true,
   WIDGET_TO_COMMENT: true, // 跳到评论区
   WIDGET_DARK_MODE: true, // 夜间模式