组件调整、排版调整、新增右侧目录抽屉

components/InfoCard.js

@@ -0,0 +1,27 @@
+import BLOG from '@/blog.config'
+import Image from 'next/image'
+import React from 'react'
+import Router from 'next/router'
+
+const InfoCard = () => {
+  return <>
+    <div className='flex justify-center text-center'>
+      <div className='mx-auto py-4 leading-8'>
+        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
+          <Image
+          alt={BLOG.author}
+          width={100}
+          height={100}
+          src='/avatar.svg'
+          className='rounded-full border-black'
+        />
+        </div>
+        <h1 className='text-2xl dark:text-white py-2'>{BLOG.author}</h1>
+        <h2 className='text-sm text-gray-500 dark:text-gray-400'>{BLOG.description}</h2>
+        <h2 className='text-sm fa fa-map-marker text-gray-500 dark:text-gray-400'>&nbsp;Fuzhou,China</h2>
+      </div>
+    </div>
+  </>
+}
+
+export default InfoCard