One

主题

插槽布局 ​

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

Banner 插槽：

  • teek-home-banner-before
  • teek-home-banner-after
  • teek-home-banner-content-before
  • teek-home-banner-content-after
  • teek-home-banner-feature-after

为什么没有 teek-home-banner-feature-before ？

banner-content 和 banner-feature 是兄弟元素，因此 teek-home-banner-content-after 就是 teek-home-banner-feature-before。

文章列表插槽：

  • teek-home-post-before
  • teek-home-post-after

卡片栏插槽：

  • teek-home-info-before
  • teek-home-info-after
  • teek-home-my-before
  • teek-home-my-after
  • teek-home-top-article-before
  • teek-home-top-article-after
  • teek-home-category-before
  • teek-home-category-after
  • teek-home-tag-before
  • teek-home-tag-after
  • teek-home-friend-link-before
  • teek-home-friend-link-after
  • teek-home-doc-analysis-before
  • teek-home-doc-analysis-after

底部插槽：

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

文章页插槽 ​

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

  • teek-article-analyze-before：等于 Vitepress 的 doc-before 插槽
  • teek-article-analyze-after
  • teek-comment-before：等于 Vitepress 的 doc-after 插槽
  • teek-comment-after
  • teek-demo-code-button-before
  • teek-demo-code-button-after

自定义页插槽 ​

当 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-right-bottom-before
  • teek-right-bottom-after