字体调整，配置文件调整

2026-05-14 15:09:22 +00:00 · 2021-12-13 16:21:54 +08:00
parent 0f46dc518c
commit b2d2afc704
9 changed files with 32 additions and 17 deletions
--- 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
--- 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
--- 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>
      })}
--- 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')
--- 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} />
--- 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}
--- 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} />
--- 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'>
--- 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,