博客文章
一个可定制的 <article> 用于在您的博客页面中显示。
用法
The BlogPost 组件是一个预先构建的 <article> 元素，您可以在 BlogList 中使用。
使用 title、description、date、image、badge 和 authors 属性自定义文章。
您也可以传递来自 NuxtLink 组件的任何属性，例如 to、target、exact 等。
<template>
<UBlogPost
title="Nuxt 3.9"
description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more."
date="Dec 25, 2023"
orientation="vertical"
:image="{ src: 'https://picsum.photos/640/360', alt: 'Nuxt 3.9' }"
:authors="[{ name: 'Daniel Roe', avatar: { src: 'https://github.com/danielroe.png', target: '_blank' }, to: 'https://twitter.com/danielcroe' }]"
:badge="{ label: 'Release' }"
/>
</template>
The image 属性可以是一个字符串，用作 <img> 元素的 src 属性，也可以是一个包含任何 <img> 属性的对象。
The
<NuxtImg> 组件用于显示图像。如果您尚未安装 @nuxt/image，系统将提示您安装。您可以将方向从 vertical 更改为 horizontal 以将图像显示在左侧。
<template>
<UBlogPost
title="Nuxt 3.9"
description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables..."
date="Dec 25, 2023"
orientation="horizontal"
:image="{ src: 'https://picsum.photos/640/360', alt: 'Nuxt 3.9' }"
:authors="[{ name: 'Daniel Roe', avatar: { src: 'https://github.com/danielroe.png', target: '_blank' }, to: 'https://twitter.com/danielcroe' }]"
:badge="{ label: 'Release' }"
/>
</template>
插槽
图片
{}
徽章
{}
标题
{}
描述
{}
作者
{}
日期
{}
默认
{}
属性
目标
"_blank" | "_parent" | "_self" | "_top" | (string & {})
到
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
活动类
string
精确活动类
string
aria 当前值
"page" | "step" | "location" | "date" | "time" | "true" | "false"
预取类
string
日期
string | Date
undefined标题
string
undefined描述
string
undefined图片
string | Partial<HTMLImageElement>
undefined徽章
徽章
undefined作者
({ name: string; avatar: Avatar; } & NuxtLinkProps)[]
undefined方向
"vertical" | "horizontal"
"vertical"ui
any
{}href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
rel
any
替换
boolean
noRel
boolean
预取
boolean
noPrefetch
boolean
外部
boolean
配置
{
wrapper: 'relative group flex flex-col w-full gap-y-6',
image: {
wrapper: 'ring-1 ring-gray-200 dark:ring-gray-800 relative overflow-hidden aspect-[16/9] w-full rounded-lg pointer-events-none',
base: 'object-cover object-top w-full h-full transform transition-transform duration-200 group-hover:scale-105'
},
container: 'flex flex-col justify-between flex-1',
inner: 'flex-1',
badge: {
wrapper: 'mb-3',
base: ''
},
title: 'text-gray-900 dark:text-white text-xl font-semibold truncate group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-200',
description: 'text-base text-gray-500 dark:text-gray-400 mt-1',
date: 'text-sm text-gray-500 dark:text-gray-400 font-medium pointer-events-none',
authors: {
wrapper: 'relative flex items-center gap-x-3 mt-4',
avatar: {
base: 'relative ring-1 lg:hover:scale-105 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform',
size: 'xs'
}
}
}