photo-主题，首屏加公告；加入预览图

themes/photo/components/Announcement.js

@@ -1,22 +1,23 @@
-import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 
 const NotionPage = dynamic(() => import('@/components/NotionPage'))
-
-const Announcement = ({ post, className }) => {
-  const { locale } = useGlobal()
-  if (!post || Object.keys(post).length === 0) {
+/**
+ * 公告
+ * @param {*} param0
+ * @returns
+ */
+const Announcement = ({ notice, className }) => {
+  if (!notice || Object.keys(notice).length === 0) {
     return <></>
   }
-  return <aside className="rounded shadow overflow-hidden mb-6">
-
-           <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">
-                <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
-           </h3>
-
-        {post && (<div id="announcement-content">
-            <NotionPage post={post} className='text-center ' />
-        </div>)}
-</aside>
+  return (
+    <aside className={className}>
+      {notice && (
+        <div id='announcement-content'>
+          <NotionPage post={notice} className='text-center ' />
+        </div>
+      )}
+    </aside>
+  )
 }
 export default Announcement

themes/photo/components/Swiper.js

@@ -1,6 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
 import PostItemCard from './PostItemCard'
 
+/**
+ * 滑动走马灯
+ * @param {*} param0
+ * @returns
+ */
 const InertiaCarousel = ({ posts }) => {
   const carouselRef = useRef(null)
   const [isDragging, setIsDragging] = useState(false)
@@ -14,7 +19,7 @@ const InertiaCarousel = ({ posts }) => {
   const startDrag = e => {
     e.preventDefault()
     setIsDragging(true)
-    const startPosition = e.pageX || e.touches[0].pageX
+    const startPosition = e.pageX || e.touches?.[0].pageX
     setStartX(startPosition - carouselRef.current.offsetLeft)
     setScrollLeft(carouselRef.current.scrollLeft)
     setLastX(startPosition) // 初始化上一次的位置
@@ -72,7 +77,7 @@ const InertiaCarousel = ({ posts }) => {
   return (
     <div
       ref={carouselRef}
-      className={`flex w-screen overflow-x-auto space-x-6 ${
+      className={`flex w-screen overflow-x-auto space-x-6 md:h-[85vh] ${
         isDragging ? 'cursor-grabbing' : 'cursor-grab'
       }`}
       onMouseDown={startDrag}
@@ -85,11 +90,11 @@ const InertiaCarousel = ({ posts }) => {
       style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
       {/* Carousel items */}
 
-      <div className='min-w-[33vw]' />
+      <div className='min-w-[5vw] md:min-w-[27vw]' />
       {posts &&
         posts?.map((post, index) => (
           <PostItemCard
-            className='min-w-[33vw] flex items-center justify-center'
+            className='min-w-[80vw] md:min-w-[50vw]  w-full flex items-end justify-center'
             key={index}
             post={post}
           />

themes/photo/index.js

@@ -12,6 +12,7 @@ import { isBrowser } from '@/lib/utils'
 import { Transition } from '@headlessui/react'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import Announcement from './components/Announcement'
 import ArchiveDateList from './components/ArchiveDateList'
 import ArticleFooter from './components/ArticleFooter'
 import { ArticleHeader } from './components/ArticleInfo'
@@ -137,6 +138,8 @@ const LayoutPostList = props => {
       <SlotBar {...props} />
       {/* 滑动组件 */}
       <Swiper {...props} />
+      {/* 公告 */}
+      <Announcement {...props} className='mx-auto w-full max-w-5xl my-12' />
     </div>
   )
 }