BlogPostsPRO

GitHub
在响应式网格布局中显示博客文章列表。

用法

BlogPosts 组件提供灵活的布局来显示一系列 BlogPost 组件，可以使用默认插槽或 posts 属性。

<template>
  <UBlogPosts>
    <UBlogPost
      v-for="(post, index) in posts"
      :key="index"
      v-bind="post"
    />
  </UBlogPosts>
</template>

文章

将 posts 属性用作对象数组，其中包含 BlogPost 组件的属性。

Nuxt Icon v1

Nuxt Icon v1

探索 Nuxt Icon v1！
Nuxt 3.14

Nuxt 3.14

Nuxt 3.14 发布！
Nuxt 3.13

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 Icon v1！
Nuxt 3.14

Nuxt 3.14

Nuxt 3.14 发布！
Nuxt 3.13

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 是使用 queryCollection 从 @nuxt/content 模块获取的。
to 属性在此处被覆盖，因为 @nuxt/content 使用 path 属性。

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

posts

BlogPostProps[]

orientation

'horizontal'

"horizontal" | "vertical"

博客文章的方向。

插槽

插槽类型
默认

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        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: ''
            }
          }
        }
      }
    })
  ]
})

BlogPost

一个可自定义的文章，用于在博客页面中显示。

Breadcrumb

用于在网站中导航的链接层级。