One

主题

2025-03-17指南指南
1017
5.1m
Get...

插槽布局 ​

Teek 提供了很多的插槽，能够被用来在页面的特定位置注入内容，下面这个例子展示了将一个组件注入到首页右侧卡片栏底部：

ts
// .vitepress/theme/index.ts
import Teek from "vitepress-theme-teek";
import MyLayout from "./MyLayout.vue";
import "vitepress-theme-teek/index.css";

export default {
  extends: Teek,
  // 使用注入插槽的包装组件覆盖 Layout
  Layout: MyLayout,
};
vue
<!-- .vitepress/theme/MyLayout.vue -->
<script setup>
import Teek from "vitepress-theme-teek";

const { Layout } = Teek;
</script>

<template>
  <Layout>
    <template #teek-home-info-after>自定义卡片栏</template>
  </Layout>
</template>

也可以使用 h 渲染函数。

ts
// .vitepress/theme/index.ts
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";
import { h } from "vue";
import MyComponent from "./components/MyComponent.vue";

export default {
  extends: Teek,
  Layout() {
    return h(Teek.Layout, null, {
      "teek-home-info-after": () => h(MyComponent),
    });
  },
};

插槽内容 ​

Teek 主题的全部插槽如下：

首页插槽 ​

当 layout: 'home' 在 frontmatter 中被启用时：

  • teek-home-before：等于 VitePress 的 home-hero-before 插槽
  • teek-home-after
  • teek-home-banner-before
  • teek-home-banner-after
  • teek-home-banner-content-before
  • teek-home-banner-content-after
  • teek-home-banner-feature-before
  • teek-home-banner-feature-after

文章列表插槽 ​

  • teek-home-post-before
  • teek-home-post-after
  • teek-home-post-list v1.2.0

Teek 默认实现了列表风格和卡片风格的文章列表，如果您需要定制自己的文章列表风格，可以通过 teek-home-post-list 插槽将会覆盖 Teek 的文章列表，该插槽返回了当前的文章列表数量 currentPosts。

vue
<script setup lang="ts">
import Teek from "vitepress-theme-teek";
</script>

<template>
  <Teek.Layout>
    <template #teek-home-post-list="{ currentPosts, transitionName }">
      <TransitionGroup tag="ul" :name="transitionName">
        <li v-for="post in currentPosts" :key="post.url">
          <span>文章地址：{{ post.url }}</span>
          <span>文章 frontmatter 数据：{{ post.frontmatter }}</span>
          <span>文章摘要：{{ post.excerpt }}</span>
          <span>文章作者：{{ post.author }}</span>
          <span>文章 frontmatter.title：{{ post.title }}</span>
          <span>文章 frontmatter.date：{{ post.date }}</span>
          <span>文章前 300 个文字：{{ post.capture }}</span>
        </li>
      </TransitionGroup>
    </template>
  </Teek.Layout>
</template>

v-bind 返回的 transitionName 为 post 配置项的 transitionName，具体可以查看 Teek 的列表风格和卡片风格的代码实现。

卡片栏插槽 ​

  • teek-home-card-before
  • teek-home-card v1.3.1
  • teek-home-card-after
  • teek-home-card-my-before
  • teek-home-card-my v1.3.1
  • teek-home-card-my-after
  • teek-home-card-top-article-before
  • teek-home-card-top-article v1.3.1
  • teek-home-card-top-article-after
  • teek-home-card-category-before
  • teek-home-card-category v1.3.1
  • teek-home-card-category-after
  • teek-home-card-tag-before
  • teek-home-card-tag v1.3.1
  • teek-home-card-tag-after
  • teek-home-card-friend-link-before
  • teek-home-card-friend-link v1.3.1
  • teek-home-card-friend-link-after
  • teek-home-card-doc-analysis-before
  • teek-home-card-doc-analysis v1.3.1
  • teek-home-card-doc-analysis-after

移动端插槽：

  • teek-home-card-my-screen-before v1.3.1
  • teek-home-card-my-screen v1.3.1
  • teek-home-card-my-screen-after v1.3.1

不带 -before 和 -after 的插槽是直接覆盖卡片本身。

底部插槽 ​

  • teek-footer-info-before
  • teek-footer-info-after：等于 VitePress 的 layout-bottom 插槽

文章页插槽 ​

当 layout: 'doc' 在 frontmatter 中被启用时：

  • teek-article-analyze-before：等于 VitePress 的 doc-before 插槽
  • teek-article-analyze-after
  • teek-article-share-before
  • teek-article-share-after：等于 VitePress 的 aside-outline-before 插槽
  • teek-doc-after-appreciation-before：等于 VitePress 的 doc-after 插槽
  • teek-doc-after-appreciation-after：等于 Teek 的 teek-comment-before 插槽
  • teek-comment-before
  • teek-comment-after
  • teek-aside-bottom-appreciation-before：等于 VitePress 的 aside-bottom 插槽
  • teek-aside-bottom-appreciation-after
  • teek-doc-update-before v1.2.0
  • teek-doc-update-after v1.2.0

功能页插槽 ​

当 layout: 'page' 在 frontmatter 中被启用时：

  • teek-page-top-before：等于 VitePress 的 page-top 插槽
  • teek-page-top-after

归档页插槽：

  • teek-archives-top-before
  • teek-archives-top-after

目录页插槽：

  • teek-catalogue-top-before
  • teek-catalogue-top-after

登录页插槽：

  • teek-login-page v1.3.0：覆盖 Teek 的登录页，适用于自己实现一个登录页

风险链接提示页：

  • teek-risk-link-page v1.3.0：覆盖 Teek 的风险链接提示页，适用于自己实现一个风险链接提示页

全局插槽 ​

右下角按钮组插槽：

  • teek-right-bottom-before
  • teek-right-bottom-after

主题增强插槽 ​

  • teek-theme-enhance-top
  • teek-theme-enhance-bottom
最近更新