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 |
|
此组件应渲染为的元素或组件。 |
文章 |
| |
orientation |
|
博客文章的方向。 |
插槽
| 插槽 | 类型 |
|---|---|
日期 | |
徽章 | |
title | |
description | |
authors | |
页头 |
|
主体 | |
页脚 |
|
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: ''
}
}
}
}
})
]
})