@@ -5,42 +5,58 @@ import CONFIG from '../config'
5
5
import { BlogPostCardInfo } from './BlogPostCardInfo'
6
6
7
7
const BlogPostCard = ( { index, post, showSummary, siteInfo } ) => {
8
- const showPreview = siteConfig ( 'HEXO_POST_LIST_PREVIEW' , null , CONFIG ) && post . blockMap
9
- if ( post && ! post . pageCoverThumbnail && siteConfig ( 'HEXO_POST_LIST_COVER_DEFAULT' , null , CONFIG ) ) {
8
+ const showPreview =
9
+ siteConfig ( 'HEXO_POST_LIST_PREVIEW' , null , CONFIG ) && post . blockMap
10
+ if (
11
+ post &&
12
+ ! post . pageCoverThumbnail &&
13
+ siteConfig ( 'HEXO_POST_LIST_COVER_DEFAULT' , null , CONFIG )
14
+ ) {
10
15
post . pageCoverThumbnail = siteInfo ?. pageCover
11
16
}
12
- const showPageCover = siteConfig ( 'HEXO_POST_LIST_COVER' , null , CONFIG ) && post ?. pageCoverThumbnail && ! showPreview
17
+ const showPageCover =
18
+ siteConfig ( 'HEXO_POST_LIST_COVER' , null , CONFIG ) &&
19
+ post ?. pageCoverThumbnail &&
20
+ ! showPreview
13
21
// const delay = (index % 2) * 200
14
22
15
23
return (
16
-
17
- < div className = { `${ siteConfig ( 'HEXO_POST_LIST_COVER_HOVER_ENLARGE' , null , CONFIG ) ? ' hover:scale-110 transition-all duration-150' : '' } ` } >
18
- < div key = { post . id }
19
- data-aos = "fade-up"
20
- data-aos-easing = "ease-in-out"
21
- data-aos-duration = "800"
22
- data-aos-once = "false"
23
- data-aos-anchor-placement = "top-bottom"
24
- id = 'blog-post-card'
25
- className = { `group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${ siteConfig ( 'HEXO_POST_LIST_IMG_CROSSOVER' , null , CONFIG ) && index % 2 === 1 ? 'md:flex-row-reverse' : '' }
24
+ < div
25
+ className = { `${ siteConfig ( 'HEXO_POST_LIST_COVER_HOVER_ENLARGE' , null , CONFIG ) ? ' hover:scale-110 transition-all duration-150' : '' } ` } >
26
+ < div
27
+ key = { post . id }
28
+ data-aos = 'fade-up'
29
+ data-aos-easing = 'ease-in-out'
30
+ data-aos-duration = '800'
31
+ data-aos-once = 'false'
32
+ data-aos-anchor-placement = 'top-bottom'
33
+ id = 'blog-post-card'
34
+ className = { `group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${ siteConfig ( 'HEXO_POST_LIST_IMG_CROSSOVER' , null , CONFIG ) && index % 2 === 1 ? 'md:flex-row-reverse' : '' }
26
35
overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray` } >
27
-
28
- { /* 文字内容 */ }
29
- < BlogPostCardInfo index = { index } post = { post } showPageCover = { showPageCover } showPreview = { showPreview } showSummary = { showSummary } />
30
-
31
- { /* 图片封面 */ }
32
- { showPageCover && (
33
- < div className = "md:w-5/12 overflow-hidden" >
34
- < Link href = { post ?. href } passHref legacyBehavior >
35
- < LazyImage priority = { index === 1 } src = { post ?. pageCoverThumbnail } className = 'h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
36
- </ Link >
37
- </ div >
38
- ) }
39
-
40
- </ div >
41
-
42
- </ div >
43
-
36
+ { /* 文字内容 */ }
37
+ < BlogPostCardInfo
38
+ index = { index }
39
+ post = { post }
40
+ showPageCover = { showPageCover }
41
+ showPreview = { showPreview }
42
+ showSummary = { showSummary }
43
+ />
44
+
45
+ { /* 图片封面 */ }
46
+ { showPageCover && (
47
+ < div className = 'md:w-5/12 overflow-hidden' >
48
+ < Link href = { post ?. href } passHref legacyBehavior >
49
+ < LazyImage
50
+ priority = { index === 1 }
51
+ alt = { post ?. title }
52
+ src = { post ?. pageCoverThumbnail }
53
+ className = 'h-56 w-full object-cover object-center group-hover:scale-110 duration-500'
54
+ />
55
+ </ Link >
56
+ </ div >
57
+ ) }
58
+ </ div >
59
+ </ div >
44
60
)
45
61
}
46
62
0 commit comments