diff --git a/README.md b/README.md
index 51825621..ea2e5d67 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,20 @@
     - Notion token 的有效期只有 180 天，请确保在 Vercel Dashboard 上手动更新，我们可能会在未来切换到官方 API 来解决这个问题。此外，如果数据库是非公开到，Notion 中的图片可能无法正常显示到网页上。
 - **稍微等等就可以访问了！** 简单吗?
 
+
+## 快速开发
+
+```bash
+yarn # 安装依赖
+
+yarn run dev # 本地开发
+
+yarn run build # 本地打包编译
+
+yarn run start # 本地启动NextJS服务
+
+```
+
 ## 引用技术
 
 - **生成**: Next.js SSG 和 Incremental Static Regeneration
diff --git a/blog.config.js b/blog.config.js
index 082c10ce..dd007a5b 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -9,19 +9,19 @@ const BLOG = {
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
   appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono']
+  font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
   since: 2020, // if leave this empty, current year will be used.
   postsPerPage: 6, // post counts per page
   sortByDate: false,
-  showAbout: true, // WIP
-  showArchive: true, // WIP
+  showAbout: true, // WIP 是否显示关于
+  showArchive: true, // WIP 是否显示归档
   autoCollapsedNavBar: false, // the automatically collapsed navigation bar
   socialLink: 'https://weibo.com/u/2245301913',
   seo: {
-    keywords: ['建站', 'Notion', '赚钱', '写作', '副业'],
+    keywords: ['Notion', '写作', '博客'],
     googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
   },
   analytics: {
@@ -58,10 +58,11 @@ const BLOG = {
       repo: 'tangly1024/NotionNext'
     }
   },
-  isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
   googleAdsenseId: 'ca-pub-2708419466378217', // 谷歌广告ID
   DaoVoiceId: '', // 在线聊天 DaoVoice http://dashboard.daovoice.io/get-started
-  TidioId: '' // 在线聊天 https://www.tidio.com/
+  TidioId: '', // 在线聊天 https://www.tidio.com/
+  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+
 }
 // export default BLOG
 module.exports = BLOG
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index f182b9d6..3e7ca5f5 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -12,7 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
           <div className={(selected
             ? 'bg-gray-200 dark:bg-black text-black dark:text-white'
             : 'dark:text-gray-400 text-gray-500') +
-            ' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer pt-2 font-serif'}>
+            ' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer pt-2 font-light'}>
             <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 w-5`} />{category}({categories[category]})</div>
         </Link>
       })}
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 3c5fd670..811dde22 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -31,7 +31,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex justify-between'}>
+            <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex font-light justify-between'}>
               <div className={ 'text-xs py-1 flex w-40 overflow-x-hidden whitespace-nowrap overflow-hidden ' +
                 'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' +
                   (selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300')
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 48b13581..aa207e14 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -4,14 +4,15 @@ import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArchive, faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import BLOG from 'blog.config'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
   const { locale } = useGlobal()
   const router = useRouter()
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: true },
-    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/article/about', show: true }
+    { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.showArchive },
+    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/article/about', show: BLOG.showAbout }
     // { id: 7, icon: 'faGithub', name: 'Github', to: 'https://github.com/tangly1024', show: true },
     // { id: 5, icon: 'faWeibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
     // { id: 4, icon: 'faEnvelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
@@ -27,7 +28,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white cursor-pointer duration-100 flex flex-nowrap align-middle ' +
+            <a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white cursor-pointer duration-100 font-light flex flex-nowrap align-middle ' +
               (selected ? 'bg-blue-500 text-white ' : ' ')} >
               <div className='my-auto w-5 justify-center flex'>
                 <FontAwesomeIcon icon={link.icon} />
diff --git a/components/SearchInput.js b/components/SearchInput.js
index 8648aa09..424a8d60 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -42,7 +42,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'w-full pl-2 transition leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'w-full pl-2 transition font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
diff --git a/components/SideBar.js b/components/SideBar.js
index 5ad963fb..1fdd730f 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -83,7 +83,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
     {post && (
       <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900'>
-        <div className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
+        <div className='border-b text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 0e9bf7a2..80eb38e7 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -66,7 +66,7 @@ const BaseLayout = ({
   const targetRef = useRef(null)
 
   return (
-    <div id='wrapper' className={[BLOG.font, 'subpixel-antialiased', theme].join(' ')}>
+    <div id='wrapper' className={theme}>
       <CommonHead meta={meta} />
 
       {/* 顶部导航栏 */}
@@ -78,7 +78,6 @@ const BaseLayout = ({
           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
         </div>
         <div className='flex flex-grow min-h-screen' ref={targetRef}>
-
           {onLoading
             ? <LoadingCover/>
             : <div className='flex-grow bg-gray-50 dark:bg-black shadow-inner animate__animated animate__fadeIn'>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 1f03857e..c9fcbc29 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -85,13 +85,13 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </div>
           </section>
 
-          <section className='px-1 py-2 my-1 text-sm  font-light italic bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
+          <section className='px-1 py-2 my-1 text-sm font-light italic bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
             {post.summary}
           </section>
 
           {/* Notion文章主体 */}
           {blockMap && (
-            <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+            <NotionRenderer className={`${BLOG.font}`} recordMap={blockMap} mapPageUrl={mapPageUrl}
               components={{
                 equation: Equation,
                 code: Code,