插槽布局

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

importTeek from"vitepress-theme-teek";importMyLayout from"./MyLayout.vue";import"vitepress-theme-teek/index.css";exportdefault{extends:Teek,Layout:MyLayout,};

<!-- .vitepress/theme/MyLayout.vue --><scriptsetup>importTeek from"vitepress-theme-teek";const{Layout} =Teek;</script><template><Layout><template#teek-home-info-after>自定义卡片栏</template></Layout></template>

也可以使用 h渲染函数。

importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import{h } from"vue";importMyComponent from"./components/MyComponent.vue";exportdefault{extends:Teek,Layout() {returnh(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-before
• teek-home-banner-feature-after

文章列表插槽

• teek-home-post-before
• teek-home-post-after
• teek-home-post-listv1.2.0

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

<scriptsetuplang="ts">importTeek from"vitepress-theme-teek";</script><template><Teek.Layout><template#teek-home-post-list="{currentPosts,transitionName }"><TransitionGrouptag="ul":name="transitionName"><liv-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-cardv1.3.1
• teek-home-card-after
• teek-home-card-my-before
• teek-home-card-myv1.3.1
• teek-home-card-my-after
• teek-home-card-top-article-before
• teek-home-card-top-articlev1.3.1
• teek-home-card-top-article-after
• teek-home-card-category-before
• teek-home-card-categoryv1.3.1
• teek-home-card-category-after
• teek-home-card-tag-before
• teek-home-card-tagv1.3.1
• teek-home-card-tag-after
• teek-home-card-friend-link-before
• teek-home-card-friend-linkv1.3.1
• teek-home-card-friend-link-after
• teek-home-card-doc-analysis-before
• teek-home-card-doc-analysisv1.3.1
• teek-home-card-doc-analysis-after

移动端插槽：

• teek-home-card-my-screen-beforev1.3.1
• teek-home-card-my-screenv1.3.1
• teek-home-card-my-screen-afterv1.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-beforev1.2.0
• teek-doc-update-afterv1.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-pagev1.3.0：覆盖 Teek 的登录页，适用于自己实现一个登录页

风险链接提示页：

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

全局插槽

右下角按钮组插槽：

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

主题增强插槽

• teek-theme-enhance-top
• teek-theme-enhance-bottom