feature:

SEO优化

blog.config.js

@@ -1,9 +1,9 @@
 const BLOG = {
-  title: '塘里1024',
+  title: '塘里独立博客',
-  author: '塘里',
+  author: '塘里1024',
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
-  description: '分享有趣的技术与思考',
+  description: '欢迎访问塘里1024的博客，这里主要是关于编程技术与投资理财相关的思考。我的本职是一名程序员、写博客是我的业余爱好',
   lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public

components/BlogPostCard.js

@@ -30,9 +30,9 @@ const BlogPostCard = ({ post, tags }) => {
         </div>
 
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <div className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
+          <p className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
             {post.title}
-          </div>
+          </p>
         </Link>
 
         <p className='mt-2 text-gray-400 dark:text-gray-400 text-sm'>{post.summary}</p>

components/InfoCard.js

@@ -5,21 +5,18 @@ import Router from 'next/router'
 
 const InfoCard = () => {
   return <>
-    <div className='flex justify-center text-center'>
+    <div className='flex text-center pb-3 pl-4 cursor-pointer'>
-      <div className='pb-6 mx-auto leading-8'>
+        <div className='hover:rotate-45 hover:scale-125 transform duration-200' onClick={ () => { Router.push('/') }}>
-        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
           <Image
-          alt={BLOG.author}
+          alt={BLOG.title}
-          width={100}
+          width={60}
-          height={100}
+          height={60}
           loading='lazy'
           src='/avatar.svg'
           className='rounded-full border-black'
         />
         </div>
-        <h1 className='text-2xl dark:text-white py-2'>{BLOG.author}</h1>
+        <div className='text-3xl dark:text-white ml-5 py-3 hover:scale-105 transform duration-200'>{BLOG.title}</div>
-        <h2 className='text-sm text-gray-500 dark:text-gray-400'>{BLOG.description}</h2>
-      </div>
     </div>
   </>
 }

components/NavBar.js

@@ -86,7 +86,7 @@ const Header = ({ navBarTitle, fullWidth = true }) => {
               <FontAwesomeIcon icon={faBars} className='hover:scale-125 transform duration-200' />
             </div>
             <Image
-              alt={BLOG.author}
+              alt={BLOG.title}
               width={28}
               height={28}
               src='/avatar.svg'

components/RecommendPosts.js

@@ -38,7 +38,7 @@ const RecommendPosts = ({ currentPost, totalPosts }) => {
   const { locale } = useGlobal()
 
   return <div className='dark:text-gray-300 dark:bg-gray-800 bg-gray-100 p-2 my-2  border-l-4 border-yellow-500'>
-    <h2 className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</h2>
+    <div className='mb-2 font-bold text-xl'>{locale.COMMON.RELATE_POSTS}</div>
     <ul className='list-disc px-5 text-sm '>
       {filteredPosts.map(post => (
         <li className='py-1' key={post.id} ><Link href={`/article/${post.slug}`}><a className='cursor-pointer hover:underline'>{post.title}</a></Link></li>

components/SideBar.js

@@ -25,7 +25,7 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
  */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
-  return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+  return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <InfoCard />
 
     <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>

components/TopNav.js

@@ -29,7 +29,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         <div className='w-96'>
           <Link href='/' passHref>
             <div className='cursor-pointer'>
-            <span className='text-lg dark:text-gray-200'>{BLOG.title}</span> | <span className='dark:text-gray-300'>{BLOG.description}</span>
+             <h1 className='text-lg dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
             </div>
           </Link>
         </div>

package.json

@@ -26,6 +26,7 @@
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@popperjs/core": "^2.9.3",
     "animate.css": "^4.1.1",
+    "axios": ">=0.21.1",
     "copy-to-clipboard": "^3.3.1",
     "feed": "^4.2.2",
     "gitalk": "^1.7.2",
@@ -42,6 +43,7 @@
     "react-cusdis": "^2.0.1",
     "react-dom": "17.0.2",
     "react-notion-x": "4.6.5",
+    "styled-components": "^5.3.3",
     "use-ackee": "^3.0.0"
   },
   "devDependencies": {

pages/404.js

@@ -28,7 +28,7 @@ export default function Custom404 () {
     <div
       className='text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
       <div className='dark:text-gray-200'>
-        <h1 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><FontAwesomeIcon icon={faSpinner} spin={true} className='mr-2'/>404</h1>
+        <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><FontAwesomeIcon icon={faSpinner} spin={true} className='mr-2'/>404</h2>
         <div className='inline-block text-left h-32 leading-10 align-middle'>
           <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
         </div>

pages/_app.js

@@ -3,7 +3,7 @@ import 'rc-dropdown/assets/index.css'
 import 'katex/dist/katex.min.css'
 import '@/styles/globals.css'
 import 'animate.css'
-import BLOG from '@/blog.config'
+import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 

pages/article/[slug].js

@@ -37,7 +37,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
     return <Custom404 />
   }
   const meta = {
-    title: `${post.title} | ${BLOG.title}`,
+    title: `${post.title}`,
     description: post.summary,
     type: 'article',
     tags: post.tags
@@ -60,9 +60,9 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
           </header>
         </>)}
 
-        <article className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+        <article itemScope itemType="https://schema.org/Movie" className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
           {/* 文章Title */}
-          <h1 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
+          <h2 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h2>
           <hr className='mt-4' />
           <section className='flex-nowrap flex  mt-1 dark:text-white'>
             <Link href={`/category/${post.category}`} passHref>