DOCSEARCHbyAlgolia
Submit Docs

Teek Documentation

website·Indexed 32 days ago

https://vp.teek.top/

A comprehensive ecosystem of components and tools for VitePress, featuring public and theme-specific components such as ArticlePage, ArticleAnalyze, and PageCard. It provides Markdown extensions, composables, helper utilities, and integration with comment systems like Artalk, Giscus, Twikoo, and Waline to enhance blog and documentation sites.

Tokens
64.5K
Snippets
352
Records
408
Agent score
60%

What's inside Teek

  1. Overview of the Avatar component

    The Avatar component is a secondary encapsulation of the ElementPlus Avatar component. It extends the base functionality by adding specific logic for text avatars and Iconify icon support. For core functionality not mentioned here, refer to the ElementPlus Avatar documentation.

  2. Overview of Teek VitePress Theme

    Teek is a lightweight, efficient, and flexible VitePress theme that extends the default VitePress theme. It supports all standard VitePress features and configurations, allowing for zero-cost migration. It is primarily used to build structured knowledge bases, blogs, or personal documentation sites.

  3. Understand Teek's style and component separation

    Teek separates styles from Vue components to avoid scoped style blocks within .vue files. Instead, component styles are stored in theme-chalk/src/components and aggregated into a central index.scss entry file. This entry style file is then imported into the main index.ts runtime file alongside the layout components.
    *.vue ——> Layout/index.vue ——> index.ts <—— theme-chalk/index.scss <—— *.scss
Multiple functional components ——> Entry component ——> Entry runtime file <—— Entry style file <—— Multiple functional component styles

  4. Understand the Teek project directory structure

    The Teek project organizes its source code within the packages directory. Key directories include components for UI components, config for configuration files (imported in .vitepress/config.mts), helper for utility functions, composables for Vue composition functions, locale for internationalization, markdown for plugins, static for assets, teek for the entry point, and theme-chalk for styles.
    packages.
├─ components   # Component directory
├─ config       # Configuration files (imported in .vitepress/config.mts)
├─ helper       # Utility classes
├─ composables  # Vue composables
├─ locale       # i18n files
├─ markdown     # Markdown plugins
├─ static       # Static assets
├─ teek         # Teek entry file
├─ theme-chalk   # Style directory

  6. Implement dynamic top tips for articles

    Use articleTopTip to display a VitePress container tip at the top of articles. This is useful for warning users about outdated content based on the article's date. To hide the tip on specific pages, set frontmatter.articleTopTip to false or implement a check within the configuration function.
    // .vitepress/config.mts
const teekConfig = defineTeekConfig({
  articleTopTip: (frontmatter, localeIndex, page) => {
    const tip = {
      type: "warning",
      text: "文章发布较早，内容可能过时，阅读注意甄别。",
    };

    // Show tip if article is older than 6 months
    const longTime = 6 * 30 * 24 * 60 * 60 * 1000;
    if (frontmatter.date && Date.now() - new Date(frontmatter.date).getTime() > longTime) {
      return tip;
    }
  },
});

  7. Understand how Teek generates navigation titles

    Teek automatically generates sidebars, directory trees, and breadcrumbs based on the folder structure. Titles are resolved using the following priority:

    • For Folders: Teek scans for index.md, index.MD, or [folder-name].md. It uses the frontmatter.title or the H1 heading of these files; otherwise, it falls back to the folder name.
    • For Markdown Files: The priority is frontmatter.title > H1 heading > Filename.
    • For Breadcrumbs: Titles are derived from the directory hierarchy names.

    It is recommended to set a frontmatter.title for every file and ensure the filename matches that title.

  8. Understand Teek Component Types

    Teek provides two categories of components:

    • Common Components (公共组件): Basic, independent components that can be used standalone.
    • Theme Components (主题组件): Components developed specifically for the VitePress theme. They require VitePress to function and are designed to be integrated into VitePress themes.

  9. Use the Teek Pagination component

    The Teek Pagination component is based on the ElementPlus Pagination component. It provides standard pagination functionality but removes the sizes option from the layout configuration. For advanced usage and a full list of supported props and events, refer to the official ElementPlus Pagination documentation.

  10. Configure an Article Overview page in Teek

    An Article Overview page can be enabled using either articleOverviewPage: true with layout: page, or by setting layout: TkArticleOverviewPage. You can customize the date format using the publishDateFormat key (e.g., yyyy-MM-dd); the default is yyyy-MM-dd hh:mm:ss.
    ---
title: 文章清单
permalink: /articleOverview
articleOverviewPage: true
layout: page
publishDateFormat: yyyy-MM-dd
article: false
sidebar: false
---

  11. Create custom article pages with TkArticlePage

    When frontmatter.layout is set to page in a Markdown document, VitePress does not apply any default styles. The TkArticlePage component from vitepress-theme-teek provides a framework to quickly build custom pages (such as directory, archive, or checklist pages) while optionally restoring documentation styles or adding a table of contents.

  12. Integrate Microsoft Clarity into Teek

    To integrate Microsoft Clarity, add a provider object with provider: "clarity" to the siteAnalytics array. The id is the Project ID found in the Overview section of the Clarity settings page.
    // .vitepress/config.mts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  siteAnalytics: [
    {
      provider: "clarity",
      options: {
        id: "******",
      },
    },
  ],
});