magzine 微调

2026-05-14 07:26:52 +00:00 · 2024-09-13 20:49:49 +08:00
parent 67d3c055d0
commit 79b02047f0
11 changed files with 37 additions and 35 deletions
--- a/themes/magzine/components/Announcement.js
+++ b/themes/magzine/components/Announcement.js
@@ -13,11 +13,11 @@ const Announcement = ({ post, className }) => {
      <div className={className}>
        <section
          id='announcement-wrapper'
-          className='dark:text-gray-300 rounded-xl px-2'>
+          className='rounded-xl px-2'>
          {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
          {post && (
            <div id='announcement-content'>
-              <NotionPage post={post} className='' />
+              <NotionPage post={post}/>
            </div>
          )}
        </section>
--- a/themes/magzine/components/BannerFullWidth.js
+++ b/themes/magzine/components/BannerFullWidth.js
@@ -15,11 +15,11 @@ export default function BannerFullWidth() {
    return null
  }
  return (
-    <div className='w-full flex lg:flex-row flex-col justify-between h-96 bg-black'>
+    <div className='w-full flex lg:flex-row flex-col justify-between lg:h-96 bg-black'>
      <LazyImage
        alt={siteInfo?.title}
        src={siteInfo?.pageCover}
-        className={`banner-cover w-full h-96 object-cover object-center `}
+        className={`banner-cover w-full lg:h-96 object-cover object-center `}
      />

      <div className='w-full flex items-center justify-center'>
--- a/themes/magzine/components/CategoryGroup.js
+++ b/themes/magzine/components/CategoryGroup.js
@@ -13,7 +13,7 @@ const CategoryGroup = ({ currentCategory, categoryOptions }) => {
  }
  return (
    <div id='category-list' className='pt-4'>
-      <div className='text-lg font-bold mb-2'>{locale.COMMON.CATEGORY}</div>
+      <div className='text-xl font-bold mb-2'>{locale.COMMON.CATEGORY}</div>
      <div className=''>
        {categoryOptions?.map(category => {
          const selected = currentCategory === category.name
--- a/themes/magzine/components/Footer.js
+++ b/themes/magzine/components/Footer.js
@@ -46,7 +46,7 @@ const Footer = ({ title }) => {
            {MAGZINE_FOOTER_LINKS?.map((group, index) => {
              return (
                <div key={index}>
-                  <div className='font-bold text-lg text-white lg:pb-8 pb-4'>
+                  <div className='font-bold text-xl text-white lg:pb-8 pb-4'>
                    {group.name}
                  </div>
                  <div className='flex flex-col gap-y-2'>
--- a/themes/magzine/components/Header.js
+++ b/themes/magzine/components/Header.js
@@ -8,6 +8,7 @@ import CONFIG from '../config'
 import LogoBar from './LogoBar'
 import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
+import { useMagzineGlobal } from '..'

 /**
 * 顶部导航栏 + 菜单
@@ -21,6 +22,7 @@ export default function Header(props) {
  const lastScrollY = useRef(0) // 用于存储上一次的滚动位置
  const { locale } = useGlobal()
  const router = useRouter()
+  const {searchModal} = useMagzineGlobal()

  const defaultLinks = [
    {
@@ -119,14 +121,14 @@ export default function Header(props) {
      {/* 导航栏菜单内容 */}
      <div
        id='top-navbar'
-        className='px-2 lg:px-0 flex w-full mx-auto max-w-screen-2xl h-20 transition-all duration-200 items-center justify-between'>
+        className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-2xl h-20 transition-all duration-200 items-center justify-between'>
        {/* 搜索栏 */}
        {showSearchInput && (
          <input
            autoFocus
            id='simple-search'
            onKeyUp={onKeyUp}
-            className='outline-none flex flex-row text-base relative w-full border-b py-2'
+            className='outline-none dark:bg-hexo-black-gray dark:text flex flex-row text-base relative w-full border-b py-2'
            aria-label='Submit search'
            type='search'
            name='s'
@@ -153,7 +155,7 @@ export default function Header(props) {
        )}

        {/* 右侧移动端折叠按钮 */}
-        <div className='flex items-center gap-x-2'>
+        <div className='flex items-center gap-x-6'>
          {/* 搜索按钮 */}
          <div className='flex text-center items-center cursor-pointer'>
            <i
--- a/themes/magzine/components/PostBannerGroupByCategory.js
+++ b/themes/magzine/components/PostBannerGroupByCategory.js
@@ -7,7 +7,7 @@ import PostListHorizontal from './PostListHorizontal'
 * @constructor
 */
 const PostBannerGroupByCategory = props => {
-  const { posts, categoryOptions, allNavPages, latestPosts } = props
+  const { posts, categoryOptions, allNavPages } = props
  if (!posts || posts.length === 0) {
    return null
  }
@@ -52,7 +52,7 @@ function groupArticles(categoryOptions, allPosts) {
    const item = allPosts[i]
    const categoryName = item?.category ? item?.category : '' // 将 category 转换为字符串

-    let existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
+    const existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组

    if (existingGroup && existingGroup.category === categoryName) {
      // 如果分组已存在，并且该分组中的文章数量小于4，添加文章
--- a/themes/magzine/components/PostItemCard.js
+++ b/themes/magzine/components/PostItemCard.js
@@ -39,7 +39,7 @@ const PostItemCard = ({ post }) => {
          href={post?.href}
          passHref
          className={
-            'cursor-pointer  hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
+            'text-lg cursor-pointer hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
          }>
          <h2>
            {siteConfig('POST_TITLE_ICON') && (
--- a/themes/magzine/components/PostListHorizontal.js
+++ b/themes/magzine/components/PostListHorizontal.js
@@ -15,7 +15,7 @@ const PostListHorizontal = ({ title, href, posts, hasBg }) => {
  }

  return (
-    <div className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1]' : ''}`}>
+    <div className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1] dark:bg-black' : ''}`}>
      <div className='max-w-screen-2xl w-full mx-auto'>
        {/* 标题 */}
        <div className='flex justify-between items-center py-6'>
--- a/themes/magzine/components/PostListRecommend.js
+++ b/themes/magzine/components/PostListRecommend.js
@@ -18,7 +18,7 @@ const PostListRecommend = ({ latestPosts, allNavPages }) => {
  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE')

  return (
-    <div className={`w-full py-10 px-2 bg-[#F6F6F1]`}>
+    <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
      <div className='max-w-screen-2xl w-full mx-auto'>
        {/* 标题 */}
        <div className='flex justify-between items-center py-6'>
--- a/themes/magzine/components/PostListSimpleHorizontal.js
+++ b/themes/magzine/components/PostListSimpleHorizontal.js
@@ -13,7 +13,7 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
  }

  return (
-    <div className='w-full py-10 bg-[#F6F6F1]'>
+    <div className='w-full py-10 bg-[#F6F6F1] dark:bg-black'>
      <div className='max-w-screen-2xl w-full mx-auto px-2'>
        {/* 标题 */}
        <div className='flex justify-between items-center py-6'>
--- a/themes/magzine/index.js
+++ b/themes/magzine/index.js
@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import Announcement from './components/Announcement'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
@@ -44,15 +44,12 @@ export const useMagzineGlobal = () => useContext(ThemeGlobalMagzine)
 * @constructor
 */
 const LayoutBase = props => {
-  const { children, notice, showInfoCard = true, post } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
+  const { children, notice } = props
  const [tocVisible, changeTocVisible] = useState(false)
-  const { onLoading, fullWidth } = useGlobal()
-  const [slotRight, setSlotRight] = useState(null)
+  const searchModal = useRef(null)

  return (
-    <ThemeGlobalMagzine.Provider value={{ tocVisible, changeTocVisible }}>
+    <ThemeGlobalMagzine.Provider value={{ searchModal, tocVisible, changeTocVisible }}>
      {/* CSS样式 */}
      <Style />

@@ -71,7 +68,7 @@ const LayoutBase = props => {
            {/* 底部 */}
            <Announcement
              post={notice}
-              className={'text-center text-black bg-[#7BE986] py-16'}
+              className={'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'}
            />
            <Footer title={siteConfig('TITLE')} />
          </div>
@@ -89,7 +86,7 @@ const LayoutBase = props => {
 * @returns
 */
 const LayoutIndex = props => {
-  const { posts, categoryOptions, allNavPages, latestPosts } = props
+  const { posts } = props
  // 最新文章 从第4个元素开始截取出4个
  const newPosts = posts.slice(3, 7)

@@ -142,7 +139,7 @@ const LayoutPostList = props => {
 * @returns
 */
 const LayoutSlug = props => {
-  const { post, recommendPosts, prev, next, lock, validPassword } = props
+  const { post, recommendPosts, lock, validPassword } = props
  const { locale } = useGlobal()
  const router = useRouter()

@@ -212,8 +209,8 @@ const LayoutSlug = props => {

              <div className='lg:col-span-1 flex flex-col justify-between px-2 lg:px-0 space-y-2 lg:space-y-0'>
                {/* meta信息 */}
-                <section className='text-lg gap-y-6 '>
-                  <div className='text-gray-500 py-1 dark:text-gray-600'>
+                <section className='text-lg gap-y-6 text-center lg:text-left'>
+                  <div className='text-gray-500 py-1 dark:text-gray-600 '>
                    {/* <div className='whitespace-nowrap'>
                      <i className='far fa-calendar mr-2' />
                      {post?.publishDay}
@@ -253,14 +250,17 @@ const LayoutSlug = props => {
          </div>
        )}
      </div>
-      {/* 广告醒图 */}
-      <BannerFullWidth />
-      {/* 最新文章区块 */}
-      <PostSimpleListHorizontal
-        title={locale.COMMON.RELATE_POSTS}
-        href='/archive'
-        posts={recommendPosts}
-      />
+      
+      <div>
+        {/* 广告醒图 */}
+        <BannerFullWidth />
+        {/* 最新文章区块 */}
+        <PostSimpleListHorizontal
+            title={locale.COMMON.RELATE_POSTS}
+            href='/archive'
+            posts={recommendPosts}
+        />
+      </div>
    </>
  )
 }