Nuxt 3.9
Nuxt 3.9 已发布 - Nuxt 团队的圣诞礼物，带来了 Vite 5、交互式...
博客列表
以水平/垂直列表的形式显示您的博客文章。
用法
使用一些 博客文章 以水平或垂直方式显示文章。
Nuxt DevTools 1.0
Nuxt DevTools v1.0 已发布，可供所有 Nuxt 项目使用！
Nuxt 3.8
Nuxt 3.8 已发布，带来了内置的 DevTools、自动安装 Nuxt Image、新的应用程序...
<template>
<UBlogList orientation="horizontal">
<UBlogPost
title="Nuxt 3.9"
description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive..."
/>
<UBlogPost
title="Nuxt DevTools 1.0"
description="Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!"
/>
<UBlogPost
title="Nuxt 3.8"
description="Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app..."
/>
</UBlogList>
</template>
当在 BlogList 组件上使用垂直方向时，您需要使用带有 水平 方向的 BlogPost 组件。
Nuxt 3.9
Nuxt 3.9 已发布 - Nuxt 团队的圣诞礼物，带来了 Vite 5、交互式...
Nuxt DevTools 1.0
Nuxt DevTools v1.0 已发布，可供所有 Nuxt 项目使用！
Nuxt 3.8
Nuxt 3.8 已发布，带来了内置的 DevTools、自动安装 Nuxt Image、新的应用程序...
<template>
<UBlogList orientation="vertical">
<UBlogPost
title="Nuxt 3.9"
description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive..."
orientation="horizontal"
/>
<UBlogPost
title="Nuxt DevTools 1.0"
description="Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!"
orientation="horizontal"
/>
<UBlogPost
title="Nuxt 3.8"
description="Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app..."
orientation="horizontal"
/>
</UBlogList>
</template>
此组件可以直接放在 登陆部分 中，其内容可以轻松地从 @nuxt/content 获取。
content/index.yml
blog:
title: Blog
description: Read the latest news from our blog.
posts:
- title: Nuxt 3.9
description: Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...
image:
src: https://picsum.photos/id/10/640/360
alt: Nuxt 3.9
- title: Nuxt DevTools 1.0
description: Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!
image:
src: https://picsum.photos/id/11/640/360
alt: Nuxt DevTools 1.0
- title: Nuxt 3.8
description: Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...
image:
src: https://picsum.photos/id/12/640/360
alt: Nuxt 3.8
我们在此处使用
.yml 文件作为示例，但您可以使用 @nuxt/content 支持的任何格式，例如 .md 或 .json。pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingSection :title="page.blog.title" :description="page.blog.description">
<UBlogList>
<UBlogPost v-for="(post, index) in page.blog.posts" :key="index" v-bind="post" />
</UBlogList>
</ULandingSection>
</template>
插槽
默认
{}
属性
ui
任何
{}方向
"水平" | "垂直"
"水平"配置
{
wrapper: 'flex flex-col lg:grid lg:grid-cols-3 gap-x-8 gap-y-16'
}