排版微调

2026-05-14 15:09:22 +00:00 · 2021-10-12 11:18:03 +08:00
parent eda508e338
commit f0c6fff698
7 changed files with 16 additions and 21 deletions
--- a/blog.config.js
+++ b/blog.config.js
@@ -5,13 +5,15 @@ const BLOG = {
  link: 'https://tangly1024.com',
  description: '唐风集里，收卷波澜',
  lang: 'zh-CN', // ['zh-CN','en-US']
+  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
  appearance: 'auto', // ['light', 'dark', 'auto'],
  font: 'font-sans', // ['font-sans', 'font-serif', 'font-mono']
  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: 9,
+  postsPerPage: 6, // post counts per page
  sortByDate: false,
  showAbout: true, // WIP
  showArchive: true, // WIP
@@ -21,8 +23,6 @@ const BLOG = {
    keywords: ['Blog', 'Website', 'Notion'],
    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
  },
-  notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // DO NOT CHANGE THIS！！！
-  notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
  analytics: {
    provider: 'ga', // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it.
    ackeeConfig: {
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -26,7 +26,7 @@ const Pagination = ({ page, showNext }) => {
      >
        <button
          rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          className={`${currentPage === 1 ? 'invisible' : 'block'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
        >
          ← {locale.PAGINATION.PREV}
        </button>
@@ -39,7 +39,7 @@ const Pagination = ({ page, showNext }) => {
      }>
        <button
          rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          className={`${+showNext ? 'block' : 'invisible'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
        >
          {locale.PAGINATION.NEXT} →
        </button>
--- a/components/SideBarResponsive.js
+++ b/components/SideBarResponsive.js
@@ -38,8 +38,8 @@ const SideBarResponsive = ({ tags, currentTag, post }) => {
        {/* 联系 */}
        <section className='mt-6 mb-6 hidden xl:inline-block'>
            <strong className='text-gray-600 dark:text-gray-400 px-6'>联系我</strong>
-            <div>
-              <i className='fa fa-map-marker text-sm dark:text-gray-300 px-6 mt-3' >&nbsp;Fuzhou, China</i>
+            <div className='text-sm text-gray-600'>
+              <i className='fa fa-map-marker dark:text-gray-300 px-6 my-2' >&nbsp;Fuzhou, China</i>
            </div>
            <div>
              <SocialButton />
--- a/components/SocialButton.js
+++ b/components/SocialButton.js
@@ -7,7 +7,7 @@ import React from 'react'
 */
 const SocialButton = () => {
  return <div className='w-52'>
-    <div className='space-x-3 text-2xl text-black dark:text-gray-400 px-6'>
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 px-6'>
      <a target='_blank' rel='noreferrer' title={'github'}
          href={'https://github.com/tangly1024'} >
        <div className='fa fa-github transform hover:scale-125 duration-150'/>
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -30,7 +30,7 @@ const TopNav = ({ tags, currentTag, post }) => {
  }

  return (
-    <div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 shadow'>
+    <div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 '>

      <div className='fixed top-0 left-0 z-30 h-full'>
        <div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
@@ -89,9 +89,8 @@ const TopNav = ({ tags, currentTag, post }) => {
        </div>

        <div className='flex flex-nowrap space-x-1'>
-
          <DarkModeButton />
-          <a className='flex align-middle cursor-pointer' href='/article/about'>
+          <div className='flex align-middle cursor-pointer' >
            <Image
              alt={BLOG.author}
              width={28}
@@ -99,7 +98,7 @@ const TopNav = ({ tags, currentTag, post }) => {
              src='/avatar.svg'
              className='rounded-full border-black'
            />
-          </a>
+          </div>
        </div>
      </div>
    </div>
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -44,24 +44,22 @@ const ArticleLayout = ({
      <CommonHead meta={meta} />

      {/* live2d 看板娘 */}
-      <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' />
+       <script async src='https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js' />

      <Progress targetRef={targetRef} />

      <div className='fixed w-full top-0 z-20'>
-        <TopNav post={frontMatter}/>
+         <TopNav post={frontMatter}/>
      </div>

      {/* Wrapper */}
      <div className='flex justify-between bg-gray-100 dark:bg-black'>

-        <SideBarResponsive tags={tags} post={frontMatter} />
+         <SideBarResponsive tags={tags} post={frontMatter} />

        {/* 主体区块 */}
        <main className='bg-gray-100 dark:bg-black w-full'>
          {/* 中央区域 wrapper */}
-          <div>
-
            <header
              className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-10 lg:mt-20 md:flex-shrink-0 overflow-y-hidden animate__fadeIn animate__animated'>
              {/* 封面图 */}
@@ -73,7 +71,7 @@ const ArticleLayout = ({

            <article
              ref={targetRef}
-              className='hover:shadow-2xl mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
+              className='mb-20 overflow-x-auto px-10 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-600'>
              {/* 文章标题 */}
              <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                {frontMatter.title}
@@ -157,8 +155,6 @@ const ArticleLayout = ({
              {/* 评论互动 */}
              <Comment frontMatter={frontMatter} />
            </article>
-          </div>
-
        </main>

        {/* 下方菜单组 */}
--- a/layouts/DefaultLayout.js
+++ b/layouts/DefaultLayout.js
@@ -63,7 +63,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
            <Tags tags={tags} currentTag={currentTag} />
          </div>

-          <main id='post-list-wrapper' className='py-24 px-2 md:px-20'>
+          <main id='post-list-wrapper' className='pt-16 md:pt-28 px-2 md:px-20'>
            {(!page || page === 1) && (<div className='py-5' />)}

            {/* 当前搜索 */}