Nuxt Icon v1
探索 Nuxt Icon v1！
博客文章列表
在响应式网格布局中显示博客文章列表。
用法
BlogPosts 组件提供了一个灵活的布局，可以使用默认插槽或 posts 属性来显示 BlogPost 组件列表。
<template>
<UBlogPosts>
<UBlogPost
v-for="(post, index) in posts"
:key="index"
v-bind="post"
/>
</UBlogPosts>
</template>
文章
将 posts 属性用作对象数组，其中包含 BlogPost 组件的属性。
Nuxt 3.14
Nuxt 3.14 发布！
Nuxt 3.13
Nuxt 3.13 发布！
<script setup lang="ts">
const posts = ref([
{
title: 'Nuxt Icon v1',
description: 'Discover Nuxt Icon v1!',
image: 'https://nuxtjs.org.cn/assets/blog/nuxt-icon/cover.png',
date: '2024-11-25'
},
{
title: 'Nuxt 3.14',
description: 'Nuxt 3.14 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.14.png',
date: '2024-11-04'
},
{
title: 'Nuxt 3.13',
description: 'Nuxt 3.13 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.13.png',
date: '2024-08-22'
}
])
</script>
<template>
<UBlogPosts :posts="posts" />
</template>
Orientation
使用 orientation 属性更改 BlogPosts 的方向。默认为 horizontal。
Nuxt Icon v1
探索 Nuxt Icon v1！
Nuxt 3.14
Nuxt 3.14 发布！
Nuxt 3.13
Nuxt 3.13 发布！
<script setup lang="ts">
const posts = ref([
{
title: 'Nuxt Icon v1',
description: 'Discover Nuxt Icon v1!',
image: 'https://nuxtjs.org.cn/assets/blog/nuxt-icon/cover.png',
date: '2024-11-25'
},
{
title: 'Nuxt 3.14',
description: 'Nuxt 3.14 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.14.png',
date: '2024-11-04'
},
{
title: 'Nuxt 3.13',
description: 'Nuxt 3.13 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.13.png',
date: '2024-08-22'
}
])
</script>
<template>
<UBlogPosts orientation="vertical" :posts="posts" />
</template>
当使用
posts 属性而不是默认插槽时，文章的 orientation 会自动反转，horizontal 变为 vertical，反之亦然。示例
尽管这些示例使用Nuxt Content，但这些组件可以与任何内容管理系统集成。
在页面内
在页面中使用 BlogPosts 组件创建博客页面
pages/blog/index.vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () => queryCollection('posts').all())
</script>
<template>
<UPage>
<UPageHero title="Blog" />
<UPageBody>
<UContainer>
<UBlogPosts>
<UBlogPost
v-for="(post, index) in posts"
:key="index"
v-bind="post"
:to="post.path"
/>
</UBlogPosts>
</UContainer>
</UPageBody>
</UPage>
</template>
在此示例中，
posts 是使用 @nuxt/content 模块中的 queryCollection 获取的。由于
@nuxt/content 使用 path 属性，因此 to 属性在此处被覆盖。API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
posts | BlogPostProps[]
| |
orientation | 'horizontal' | "horizontal" | "vertical"博客文章的方向。 |
插槽
| 插槽 | 类型 |
|---|---|
日期 | { post: BlogPostProps; } |
徽章 | { post: BlogPostProps; } |
title | { post: BlogPostProps; } |
description | { post: BlogPostProps; } |
authors | { ui: object; } & { post: BlogPostProps; } |
页头 | { ui: object; } & { post: BlogPostProps; } |
主体 | { post: BlogPostProps; } |
页脚 | { post: BlogPostProps; } |
default | {} |
主题
app.config.ts
export default defineAppConfig({
ui: {
blogPosts: {
base: 'flex flex-col gap-8 lg:gap-y-16',
variants: {
orientation: {
horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
vertical: ''
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
blogPosts: {
base: 'flex flex-col gap-8 lg:gap-y-16',
variants: {
orientation: {
horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
vertical: ''
}
}
}
}
})
]
})