heo主题界面对称性微调

themes/heo/components/PaginationNumber.js

@@ -44,7 +44,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   return (
     <>
       {/* pc端分页按钮 */}
-      <div className="hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto">
+      <div className='hidden lg:flex justify-between items-end mt-10 font-medium text-black duration-500 dark:text-gray-300 pt-3 space-x-2 overflow-x-auto'>
         {/* 上一页 */}
         <Link
           href={{
@@ -54,32 +54,29 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'}`}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
-            <div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
+          rel='prev'
+          className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
+          <div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
+            <div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
               {locale.PAGINATION.PREV}
             </div>
           </div>
         </Link>
 
         {/* 分页 */}
-        <div className="flex items-center space-x-2">
+        <div className='flex items-center space-x-2'>
           {pages}
 
           {/* 跳转页码 */}
-          <div className="bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200">
+          <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
             <input
               value={value}
-              className="w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
-              onInput={handleInputChange}
-            ></input>
+              className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
+              onInput={handleInputChange}></input>
             <div
               onClick={jumpToPage}
-              className="cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
-            >
+              className='cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
               <ChevronDoubleRight className={'w-4 h-4'} />
             </div>
           </div>
@@ -91,12 +88,11 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} `}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
-            <div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
+          rel='next'
+          className={`${+showNext ? 'block' : 'invisible'} `}>
+          <div className='relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
+            <div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
               {locale.PAGINATION.NEXT}
             </div>
           </div>
@@ -105,7 +101,7 @@ const PaginationNumber = ({ page, totalPage }) => {
 
       {/* 移动端分页 */}
 
-      <div className="lg:hidden w-full flex flex-row">
+      <div className='lg:hidden w-full flex flex-row'>
         {/* 上一页 */}
         <Link
           href={{
@@ -115,13 +111,12 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='prev'
+          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.PREV}
         </Link>
 
-        {showPrev && showNext && <div className="w-12"></div>}
+        {showPrev && showNext && <div className='w-12'></div>}
 
         {/* 下一页 */}
         <Link
@@ -129,9 +124,8 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='next'
+          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>
@@ -161,8 +155,7 @@ function getPageElement(page, currentPage, pagePrefix) {
           ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
           : 'dark:bg-[#1e1e1e] bg-white') +
         ' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
-      }
-    >
+      }>
       {page}
     </Link>
   )
@@ -195,7 +188,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
     if (startPage > 2) {
       pages.push(
-        <div key={-1} className="-mt-2 mx-1">
+        <div key={-1} className='-mt-2 mx-1'>
           ...{' '}
         </div>
       )

themes/heo/components/SideRight.js

@@ -1,12 +1,12 @@
+import Live2D from '@/components/Live2D'
+import dynamic from 'next/dynamic'
+import { AnalyticsCard } from './AnalyticsCard'
 import Card from './Card'
-import TagGroups from './TagGroups'
 import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
-import dynamic from 'next/dynamic'
-import Live2D from '@/components/Live2D'
-import { AnalyticsCard } from './AnalyticsCard'
-import TouchMeCard from './TouchMeCard'
 import LatestPostsGroupMini from './LatestPostsGroupMini'
+import TagGroups from './TagGroups'
+import TouchMeCard from './TouchMeCard'
 
 const FaceBookPage = dynamic(
   () => {
@@ -27,46 +27,46 @@ const FaceBookPage = dynamic(
  * @returns
  */
 export default function SideRight(props) {
-  const {
-    post, tagOptions,
-    currentTag, rightAreaSlot
-  } = props
+  const { post, tagOptions, currentTag, rightAreaSlot } = props
+
+  // 只摘取标签的前60个，防止右侧过长
+  const sortedTags = tagOptions.slice(0, 60)
 
   return (
-        <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+    <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+      <InfoCard {...props} className='w-72' />
 
-            <InfoCard {...props} className='w-72' />
+      <div className='sticky top-20 space-y-4'>
+        {/* 文章页显示目录 */}
+        {post && post.toc && post.toc.length > 0 && (
+          <Card className='bg-white dark:bg-[#1e1e1e]'>
+            <Catalog toc={post.toc} />
+          </Card>
+        )}
 
-            <div className='sticky top-20 space-y-4'>
-
-                {/* 文章页显示目录 */}
-                {post && post.toc && post.toc.length > 0 && (
-                    <Card className='bg-white dark:bg-[#1e1e1e]'>
-                        <Catalog toc={post.toc} />
-                    </Card>
-                )}
-
-                {/* 联系交流群 */}
-                <TouchMeCard />
-
-                {/* 最新文章列表 */}
-                <div className={'border dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'}>
-                    <LatestPostsGroupMini {...props} />
-                </div>
-
-                {rightAreaSlot}
-
-                <FaceBookPage />
-                <Live2D />
-
-                {/* 标签和成绩 */}
-                <Card className={'bg-white dark:bg-[#1e1e1e] dark:text-white'}>
-                    <TagGroups tags={tagOptions} currentTag={currentTag} />
-                    <hr className='mx-1 flex border-dashed relative my-4' />
-                    <AnalyticsCard {...props} />
-                </Card>
-            </div>
+        {/* 联系交流群 */}
+        <TouchMeCard />
 
+        {/* 最新文章列表 */}
+        <div
+          className={
+            'border dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
+          }>
+          <LatestPostsGroupMini {...props} />
         </div>
+
+        {rightAreaSlot}
+
+        <FaceBookPage />
+        <Live2D />
+
+        {/* 标签和成绩 */}
+        <Card className={'bg-white dark:bg-[#1e1e1e] dark:text-white'}>
+          <TagGroups tags={sortedTags} currentTag={currentTag} />
+          <hr className='mx-1 flex border-dashed relative my-4' />
+          <AnalyticsCard {...props} />
+        </Card>
+      </div>
+    </div>
   )
 }

themes/heo/index.js

@@ -56,7 +56,7 @@ const LayoutBase = props => {
   const router = useRouter()
 
   const headerSlot = (
-    <header className='shadow'>
+    <header>
       {/* 顶部导航 */}
       <Header {...props} />
 

themes/next/components/PaginationNumber.js

@@ -12,74 +12,75 @@ const PaginationNumber = ({ page, totalPage }) => {
   const router = useRouter()
   const currentPage = +page
   const showNext = currentPage !== totalPage
-  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
     <div
-        data-aos="fade-down"
-        data-aos-duration="300"
-        data-aos-once="false"
-        data-aos-anchor-placement="top-bottom"
-        className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-200 transition-all bg-white dark:bg-hexo-black-gray dark:text-gray-300 py-3 shadow space-x-2">
-        {/* 上一页 */}
-        <Link
-          href={{
-            pathname:
-                  currentPage - 1 === 1
-                    ? `${pagePrefix}/`
-                    : `${pagePrefix}/page/${currentPage - 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          passHref
-          legacyBehavior>
-            <div
-                rel="prev"
-                className={`${currentPage === 1 ? 'invisible' : 'block'
-                    } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}
-            >
-                <i className="fas fa-angle-left" />
-            </div>
-        </Link>
+      data-aos='fade-down'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-bottom'
+      className='mt-5 py-3 flex justify-center items-end font-medium text-black hover:shadow-xl duration-200 transition-all bg-white dark:bg-hexo-black-gray dark:text-gray-300 shadow space-x-2'>
+      {/* 上一页 */}
+      <Link
+        href={{
+          pathname:
+            currentPage - 1 === 1
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        legacyBehavior>
+        <div
+          rel='prev'
+          className={`${
+            currentPage === 1 ? 'invisible' : 'block'
+          } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}>
+          <i className='fas fa-angle-left' />
+        </div>
+      </Link>
 
-        {pages}
+      {pages}
 
-        {/* 下一页 */}
-        <Link
-          href={{
-            pathname: `${pagePrefix}/page/${currentPage + 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          passHref
-          legacyBehavior>
-            <div
-                rel="next"
-                className={`${+showNext ? 'block' : 'invisible'
-                    } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}
-            >
-                <i className="fas fa-angle-right" />
-            </div>
-        </Link>
+      {/* 下一页 */}
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        legacyBehavior>
+        <div
+          rel='next'
+          className={`${
+            +showNext ? 'block' : 'invisible'
+          } hover:border-t-2 border-white  hover:border-gray-400 dark:hover:border-gray-400 w-8 h-8 justify-center flex items-center cursor-pointer duration-200 transition-all hover:font-bold`}>
+          <i className='fas fa-angle-right' />
+        </div>
+      </Link>
     </div>
   )
 }
 
 function getPageElement(pagePrefix, page, currentPage) {
   return (
-    (<Link
+    <Link
       href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
       key={page}
       passHref
       className={
-          (page + '' === currentPage + ''
-            ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
-            : 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
-          ' border-white  dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
+        (page + '' === currentPage + ''
+          ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
+          : 'hover:border-t-2 duration-200 transition-all border-white hover:border-gray-400 ') +
+        ' border-white  dark:hover:border-gray-400 cursor-pointer w-8 h-8 justify-center flex items-center font-light hover:font-bold'
       }>
-
       {page}
-
-    </Link>)
+    </Link>
   )
 }
 function generatePages(pagePrefix, page, currentPage, totalPage) {
@@ -100,7 +101,11 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
       startPage = totalPage - dynamicGroupCount
     }
     if (startPage > 2) {
-      pages.push(<div key={-1} className='select-none'>... </div>)
+      pages.push(
+        <div key={-1} className='select-none'>
+          ...{' '}
+        </div>
+      )
     }
 
     for (let i = 0; i < dynamicGroupCount; i++) {
@@ -110,7 +115,11 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
 
     if (startPage + dynamicGroupCount < totalPage) {
-      pages.push(<div key={-2} className='select-none'>... </div>)
+      pages.push(
+        <div key={-2} className='select-none'>
+          ...{' '}
+        </div>
+      )
     }
 
     pages.push(getPageElement(pagePrefix, totalPage, page))

themes/theme.js

@@ -14,7 +14,11 @@ export const { THEMES = [] } = getConfig().publicRuntimeConfig
  */
 export const getGlobalLayoutByTheme = themeQuery => {
   if (themeQuery !== BLOG.THEME) {
-    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), { ssr: true })
+    return dynamic(
+      () =>
+        import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]),
+      { ssr: true }
+    )
   } else {
     return ThemeComponents[getLayoutNameByPath('-1')]
   }
@@ -36,7 +40,8 @@ export const getLayoutByTheme = ({ router, theme }) => {
             checkThemeDOM()
           }, 500)
 
-          const components = m[getLayoutNameByPath(router.pathname, router.asPath)]
+          const components =
+            m[getLayoutNameByPath(router.pathname, router.asPath)]
           if (components) {
             return components
           } else {
@@ -49,7 +54,8 @@ export const getLayoutByTheme = ({ router, theme }) => {
     setTimeout(() => {
       checkThemeDOM()
     }, 100)
-    const components = ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
+    const components =
+      ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
     if (components) {
       return components
     } else {
@@ -102,7 +108,7 @@ export const initDarkMode = (updateDarkMode, defaultDarkMode) => {
   const userDarkMode = loadDarkModeFromLocalStorage()
   if (userDarkMode) {
     newDarkMode = userDarkMode === 'dark' || userDarkMode === 'true'
-    saveDarkModeToLocalStorage(newDarkMode)  //用户手动的才保存
+    saveDarkModeToLocalStorage(newDarkMode) // 用户手动的才保存
   }
 
   // 如果站点强制设置默认深色，则优先级改过用
@@ -117,7 +123,9 @@ export const initDarkMode = (updateDarkMode, defaultDarkMode) => {
   }
 
   updateDarkMode(newDarkMode)
-  document.getElementsByTagName('html')[0].setAttribute('class', newDarkMode ? 'dark' : 'light')
+  document
+    .getElementsByTagName('html')[0]
+    .setAttribute('class', newDarkMode ? 'dark' : 'light')
 }
 
 /**
@@ -131,11 +139,14 @@ export function isPreferDark() {
   if (BLOG.APPEARANCE === 'auto') {
     // 系统深色模式或时间是夜间时，强行置为夜间模式
     const date = new Date()
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const prefersDarkMode = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    ).matches
     return (
       prefersDarkMode ||
       (BLOG.APPEARANCE_DARK_TIME &&
-        (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
+        (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] ||
+          date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
     )
   }
   return false