magzine 微调

next.config.js

@@ -15,7 +15,7 @@ const themes = scanSubdirectories(path.resolve(__dirname, 'themes'))
 const locales = (function () {
   // 根据BLOG_NOTION_PAGE_ID 检查支持多少种语言数据.
   // 支持如下格式配置多个语言的页面id xxx,zh:xxx,en:xxx
-  let langs = [BLOG.LANG.slice(0, 2)]
+  const langs = [BLOG.LANG.slice(0, 2)]
   if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
     const siteIds = BLOG.NOTION_PAGE_ID.split(',')
     for (let index = 0; index < siteIds.length; index++) {
@@ -33,6 +33,7 @@ const locales = (function () {
 })()
 
 // 编译前执行
+// eslint-disable-next-line no-unused-vars
 const preBuild = (function () {
   if (
     !process.env.npm_lifecycle_event === 'export' &&

themes/magzine/components/Header.js

@@ -4,11 +4,11 @@ import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
+import { useMagzineGlobal } from '..'
 import CONFIG from '../config'
 import LogoBar from './LogoBar'
 import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
-import { useMagzineGlobal } from '..'
 
 /**
  * 顶部导航栏 + 菜单
@@ -22,7 +22,7 @@ export default function Header(props) {
   const lastScrollY = useRef(0) // 用于存储上一次的滚动位置
   const { locale } = useGlobal()
   const router = useRouter()
-  const {searchModal} = useMagzineGlobal()
+  const { searchModal } = useMagzineGlobal()
 
   const defaultLinks = [
     {
@@ -155,7 +155,7 @@ export default function Header(props) {
         )}
 
         {/* 右侧移动端折叠按钮 */}
-        <div className='flex items-center gap-x-6'>
+        <div className='flex items-center gap-x-6 pr-4'>
           {/* 搜索按钮 */}
           <div className='flex text-center items-center cursor-pointer'>
             <i

themes/magzine/components/PostGroupArchive.js

@@ -13,7 +13,7 @@ const PostGroupArchive = ({ posts = [], archiveTitle }) => {
   }
 
   return (
-    <div className=''>
+    <div className='px-2 lg:px-0'>
       {/* 分组标题 */}
       <div
         className='pb-4 text-2xl font-bold dark:text-gray-300'
@@ -22,7 +22,7 @@ const PostGroupArchive = ({ posts = [], archiveTitle }) => {
       </div>
 
       {/* 列表 */}
-      <ul className='grid grid-cols-4 *:gap-4'>
+      <ul className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
         {posts?.map((p, index) => {
           return <PostItemCard key={index} post={p} />
         })}

themes/magzine/components/PostListPage.js

@@ -25,7 +25,7 @@ const PostListPage = ({ page = 1, posts = [], postCount }) => {
     <div className='w-full justify-center'>
       <div id='posts-wrapper'>
         {/* 列表 */}
-        <ul className='grid grid-cols-4 gap-4'>
+        <ul className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
           {posts?.map((p, index) => {
             return <PostItemCard key={index} post={p} />
           })}

themes/magzine/index.js

@@ -49,7 +49,8 @@ const LayoutBase = props => {
   const searchModal = useRef(null)
 
   return (
-    <ThemeGlobalMagzine.Provider value={{ searchModal, tocVisible, changeTocVisible }}>
+    <ThemeGlobalMagzine.Provider
+      value={{ searchModal, tocVisible, changeTocVisible }}>
       {/* CSS样式 */}
       <Style />
 
@@ -68,7 +69,9 @@ const LayoutBase = props => {
             {/* 底部 */}
             <Announcement
               post={notice}
-              className={'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'}
+              className={
+                'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
+              }
             />
             <Footer title={siteConfig('TITLE')} />
           </div>
@@ -120,7 +123,7 @@ const LayoutPostList = props => {
   const { category, tag } = props
 
   return (
-    <div className=' max-w-screen-2xl mx-auto w-full'>
+    <div className=' max-w-screen-2xl mx-auto w-full px-2 lg:px-0'>
       {/* 一个顶部条 */}
       <h2 className='py-8 text-2xl font-bold'>{category || tag}</h2>
 
@@ -256,9 +259,9 @@ const LayoutSlug = props => {
         <BannerFullWidth />
         {/* 最新文章区块 */}
         <PostSimpleListHorizontal
-            title={locale.COMMON.RELATE_POSTS}
+          title={locale.COMMON.RELATE_POSTS}
-            href='/archive'
+          href='/archive'
-            posts={recommendPosts}
+          posts={recommendPosts}
         />
       </div>
     </>