BlogiNote 开发笔记——首页(三)

·  阅读 1224
BlogiNote 开发笔记——首页(三)

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第7天,点击查看活动详情


BlogiNote 是一个基于 Nuxt Content 的静态网站模板,基于 MIT 协议进行开源。

它可用于展示你的博客文章或学习笔记,它对于不同长短、不同类型的内容提供不同的布局和多种交互上的优化。

🔗 项目仓库 github.com/Benbinbin/B…

🔗 效果演示 bloginote.vercel.app/


系列文章可以查看《BlogiNote 开发笔记》专栏


以下这些代码片段摘自 📄 /pages/index.vue 文件,是关于如何在首页获取和展示文章列表

// 获取 article 目录树结构
const queryBuilder = queryContent().where({ _path: { $contains: '/article' } })
const { data } = await useAsyncData('articleTree', () => fetchContentNavigation(queryBuilder))

const articleTree = data.value[0] // 这就是 article 目录的树结构

// 构建一个 queryBuilder
// 限制获取文章数量最多是 5 篇
// 并限制获取的字段,主要是舍弃了 body 字段,因为首页列表只需要展示文章的概要信息,如标题、封面、摘要、所述系列、标签等
const queryCategoryArticlesParams: QueryBuilderParams = {
  limit: 5,
  only: ['title', 'description', '_path', 'cover', 'series', 'seriesOrder', 'tags']
}
复制代码
<!-- 基于每一个 category 创建一个 section -->
<!-- 即对于 /content/article 目录下的每一个子文件夹都创建一个分组,每一个分组列出最多 5 篇文章 -->
<template v-for="category in articleTree.children">
  <section v-if="category.children" :key="category._path" class="...">
    <!-- 这是每个 section 的表头部分 -->
    <div class="...">
      <!-- category 名称,即子文件夹名称 -->
      <h2 class="...">
        {{ category.title }}
      </h2>
      <!-- 添加一个到 list 页面的链接,以方便查看所有属于该 category 的文章 -->
      <NuxtLink
        :to="{ path: '/list', query: { category: category.title.toLowerCase() } }"
        class="..."
      >
        More
      </NuxtLink>
    </div>

    <!-- 这是每个 section 下的具体文章列表-->
    <div>
      <ContentList v-slot="{ list }" :path="category._path" :query="queryCategoryArticlesParams">
        <!-- 省略的内容就是基于作用域插槽所暴露的 list 数据,自定义制成的文章列表,而且对于显示器大屏和移动端触屏小屏做了不同的适配 -->
      </ContentList>
    </div>
  </section>
</template>
复制代码

📢 由于 BlogiNote 使用 Tailwind CSS 设置大部分的页面样式,所以模板中各元素的类 class 会十分冗长,为了突出重点,以上代码摘要一般会用 ... 代替表示。

以上示例中使用了两个内置组件 <NuxtLink><ContentList>

  • 组件 <NuxtLink> 是 Nuxt 3 提供的内置组件。

    类似于 Vue Route 的 <RouterLink> 组件,最终会生成一个 <a> 锚标签。可以为该组件传递一系列 props 属性来定制其行为。

    💡 推荐在 Nuxt 项目中使用 <NuxtLink> 组件,而非直接使用 <a> 标签,因为它会根据链接的属性(外部链接还是内部链接)进行优化(预加载等)

  • 组件 <ContentList> 是 Nuxt Content v2 提供的内置组件。

    它会根据 prop path 所指定的目录路径获取其中包含的文章,并根据 prop query 所指定的 queryBuilder 查询器对文章进行筛选。最后通过作用域插槽 v-slot="{ list }" 暴露出所获取的文章数据。因此也可以将该组件看作是 headless 组件,这样在开发中就可以专注文章列表的 UI 设计,而不必过多地操心如何获取文章数据。

    以上示例中,:path="category._path" 就是获取 /content/article 目录下的不同子目录里的文章,:query="queryCategoryArticlesParams" 就是之前所构建的 queryBuilder 查询器,即每一个分组最多获取 5 篇文章。而作用域插槽 v-slot="{ list }" 解构出来的 list 就是所获取到的文章数据,是一个数组,可以在该组件内部使用这些数据来构建文章列表,每篇文章都会具有如 queryBuilder 查询器所列出的属性信息。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改