m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-25 02:56:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix cover

Browse source
This commit is contained in:
LazuliKao 2024-09-22 19:52:29 +08:00
parent 2e17ae669f
commit bd17ed0102
4 changed files with 76 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/layouts/MoreTile.astro
View file

@ -5,32 +5,36 @@ const { title, href, cover, tags, date } = Astro.props
const dateFormatted = formatDate(date) const dateFormatted = formatDate(date)
const type = tags?.[0] ?? "默认" const type = tags?.[0] ?? "默认"
const image = cover ? cover : "https://oss.nbtca.space/CA-logo.svg" let image: string
= cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg"
if (image.startsWith("./")) {
image = `./${href}${image.slice(1)}`
}
const label = `${title} - ${type} - 发表时间 ${dateFormatted}` const label = `${title} - ${type} - 发表时间 ${dateFormatted}`;
--- ---
<li <li
role="listitem" role="listitem"
class="tile-item item-list nr-scroll-animation" class="tile-item item-list nr-scroll-animation"
style="--nr-animation-transform-y:20%;" style="--nr-animation-transform-y:20%;"
>
<a
href={href}
class="tile tile-list medium-load small-load large-load"
aria-label={label}
> >
<a <div class="tile__media" aria-hidden="true">
href={href} <img class="cover image" src={image} alt="lt" />
class="tile tile-list medium-load small-load large-load" </div>
aria-label={label} <div class="tile__description" aria-hidden="true">
> <div class="tile__head">
<div class="tile__media" aria-hidden="true"> <div class="tile__category">{type}</div>
<img class="cover image" src={image} alt="lt" /> <div class="tile__headline">{title}</div>
</div> </div>
<div class="tile__description" aria-hidden="true"> <div class="tile__timestamp icon-hide icon icon-before icon-clock">
<div class="tile__head"> {dateFormatted}
<div class="tile__category">{type}</div>
<div class="tile__headline">{title}</div>
</div>
<div class="tile__timestamp icon-hide icon icon-before icon-clock">
{dateFormatted}
</div>
</div> </div>
</a> </div>
</li> </a>
</li>

64
src/layouts/Tile.astro
View file

@ -4,32 +4,54 @@ const { title, href, cover, tags, date, level } = Astro.props
const dateFormatted = formatDate(date) const dateFormatted = formatDate(date)
const type = tags[0] const type = tags[0]
const label = `${title} - ${type} - 发表时间 ${dateFormatted}`; const label = `${title} - ${type} - 发表时间 ${dateFormatted}`
const image = cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg";
// level 1: hero // level 1: hero
// level 2: 2up // level 2: 2up
// level 3: 3up // level 3: 3up
--- ---
<li <li
role="listitem" role="listitem"
class:list={["tile-item", "nr-scroll-animation", { "item-hero": level === "1", "item-2up": level === "2", "item-3up": level === "3" }]} class:list={[
style="--nr-animation-transform-y:20%;" "tile-item",
"nr-scroll-animation",
{
"item-hero": level === "1",
"item-2up": level === "2",
"item-3up": level === "3",
},
]}
style="--nr-animation-transform-y:20%;"
>
<a
href={href}
class:list={[
"tile",
"large-load",
"medium-load",
"small-load",
{
"tile-hero": level === "1",
"tile-2up": level === "2",
"tile-3up": level === "3",
},
]}
aria-label={label}
> >
<a <div class="tile__media" aria-hidden="true">
href={href} <img class="cover image" src={image} alt="lt" />
class:list={["tile", "large-load", "medium-load", "small-load", { "tile-hero": level === "1", "tile-2up": level === "2", "tile-3up": level === "3" }]} </div>
aria-label={label}
>
<div class="tile__media" aria-hidden="true">
<img class="cover image" src={cover} alt="lt" />
</div>
<div class="tile__description" aria-hidden="true"> <div class="tile__description" aria-hidden="true">
<div class="tile__head"> <div class="tile__head">
<div class="tile__category">{type}</div> <div class="tile__category">{type}</div>
<div class="tile__headline">{title}</div> <div class="tile__headline">{title}</div>
</div>
<div class="tile__timestamp icon-hide icon icon-before icon-clock">{dateFormatted}</div>
</div> </div>
</a> <div class="tile__timestamp icon-hide icon icon-before icon-clock">
</li> {dateFormatted}
</div>
</div>
</a>
</li>

9
src/pages/index.astro
View file

@ -28,7 +28,7 @@ Blogs.sort(
href={post.url} href={post.url}
date={post.frontmatter.pubDate} date={post.frontmatter.pubDate}
tags={post.frontmatter.tags} tags={post.frontmatter.tags}
cover={post.frontmatter.cover.url} cover={post.frontmatter.cover}
level="1" level="1"
/> />
) )
@ -44,7 +44,7 @@ Blogs.sort(
href={post.url} href={post.url}
date={post.frontmatter.pubDate} date={post.frontmatter.pubDate}
tags={post.frontmatter.tags} tags={post.frontmatter.tags}
cover={post.frontmatter.cover.url} cover={post.frontmatter.cover}
level="2" level="2"
/> />
) )
@ -60,7 +60,7 @@ Blogs.sort(
href={post.url} href={post.url}
date={post.frontmatter.pubDate} date={post.frontmatter.pubDate}
tags={post.frontmatter.tags} tags={post.frontmatter.tags}
cover={post.frontmatter.cover.url} cover={post.frontmatter.cover}
level="3" level="3"
/> />
) )
@ -84,7 +84,7 @@ Blogs.sort(
href={post.url} href={post.url}
date={post.frontmatter.pubDate} date={post.frontmatter.pubDate}
tags={post.frontmatter.tags} tags={post.frontmatter.tags}
cover={post.frontmatter.cover.url} cover={post.frontmatter.cover}
/> />
) )
}) })
@ -97,6 +97,7 @@ Blogs.sort(
href={post.url} href={post.url}
date={post.frontmatter.pubDate} date={post.frontmatter.pubDate}
tags={post.frontmatter.tags} tags={post.frontmatter.tags}
cover={post.frontmatter.cover}
/> />
) )
}) })