布局

框架 API 目前默认支持以下布局,布局支持与最终表现通常与主题有关。

  • post:文章布局
  • tags:标签布局
  • archives:归档布局
  • categories:分类布局
  • collections:合集布局

使用布局

合集布局

合集允许你将一系列相关文章(如小说、系列教程)组织为一个整体,并提供有序的导航。

目录结构

txt[object Promise]

1. 创建总览页

新建 pages/collections/index.md,并指定布局为 collections

pages/collections/index.md
md[object Promise]

2. 创建合集

新建合集文件夹 pages/collections/hamster/,包含以下文件:

  • index.ts:合集配置文件(必需)。
  • index.md:合集入口页。
  • 1.md2.md、…:合集中的文章。

新建入口页 pages/collections/hamster/index.md

pages/collections/hamster/index.md
md[object Promise]

index.ts 中定义合集配置:

pages/collections/hamster/index.ts
ts[object Promise]

3. 创建文章

layout: collection 可省略,pages/collections/ 目录下的所有文章默认使用 collection 布局。

pages/collections/hamster/1.md
md[object Promise]

效果预览:合集 | Valaxy Theme Yun

CollectionConfig

字段类型默认值说明
keystring目录名唯一标识符。未指定时自动从目录名派生。
titlestring合集显示标题。
coverstring封面图 URL。
descriptionstring简短描述。
categoriesstring[]合集卡片的分类。
tagsstring[]合集卡片的标签。
collapsebooleantrue是否在首页/归档文章列表中以单个折叠卡片展示。详见折叠模式
items{ title?, key?, link? }[]有序文章列表。key 对应 .md 文件名(如 key: '1'1.md)。link 引用已有页面或外部 URL。keylink 互斥,若同时设置,link 优先。决定文章阅读顺序和上下篇导航。

折叠模式

提示

collapse 为实验性功能,自 v0.28.0 起可用。

collapsetrue(默认)时,合集在首页和归档文章列表中显示为一张卡片。由于合集文章位于 /collections/ 路径下,它们不会单独出现在文章列表中——折叠卡片提供了进入合集的便捷入口。

ts[object Promise]

collapsefalse 时,不会在文章列表中添加合集条目。

ts[object Promise]

链接外部内容

你可以使用 link 字段在合集的阅读顺序中引用已有的博客文章或外部 URL。当合集包含不在合集目录中的内容时,这个功能非常有用。

  • 内部链接(以 / 开头)通过 <RouterLink> 在站内导航。
  • 外部链接(如 https://...)在新标签页中打开,并显示外部链接图标。
  • keylink 互斥。若同时设置,link 优先。
ts[object Promise]

实现布局(主题开发者)

valaxy-theme-yunv0.25.9 起支持 collections 布局。

按约定,主题需要在 layouts 目录下创建对应的布局文件,文件名与布局名称相同。

在主题中,你可以使用以下合集相关 API:

  • useCollections() — 获取所有合集配置。
  • useCollection() — 获取当前合集(根据路由路径判断)。
  • useCollectionPosts(key) — 获取指定合集的文章列表,按 items 定义的顺序排列。
  • usePostListWithCollections() — 获取合并了折叠合集条目的文章列表。
collections.vue
vue[object Promise]

FAQ

子页面发生了多层布局嵌套

Vue Router 的页面会自动嵌套父级布局,请参考 Nested Routes | Unplugin Vue Router

例如将:

pages/users/create.vue 修改为 pages/users.create.vue

贡献者