文档编写样列

代码组配置

::: code-group

​```ts [各自配置]
// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置
const teekConfig = defineTeekConfig({
  teekTheme: true,
});

// VitePress 配置
export default defineConfig({
  extends: teekConfig,
  themeConfig: {
    logo: "/teek-logo-mini.svg",
  },
});

// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置 + VitePress 的 themeConfig 配置
const teekConfig = defineTeekConfig({
  teekTheme: true,
  logo: "/teek-logo-mini.svg",
});

export default defineConfig({
  extends: teekConfig,
});

:::

::: code-group

​```ts
// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置
const teekConfig = defineTeekConfig({
  teekTheme: true,
});

// VitePress 配置
export default defineConfig({
  extends: teekConfig,
  themeConfig: {
    logo: "/teek-logo-mini.svg",
  },
});

// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置 + VitePress 的 themeConfig 配置
const teekConfig = defineTeekConfig({
  teekTheme: true,
  logo: "/teek-logo-mini.svg",
});

export default defineConfig({
  extends: teekConfig,
});

:::

直接编写Vue代码

<style>

/* 彩虹动画 */
:root {
  animation: rainbow 12s linear infinite;
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(68px);
  }
}
</style>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useData } from "vitepress";
const { frontmatter } = useData();
const count = ref(0)
const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg>`;
onMounted(() => {
console.log('mounted')
});
const handleCount = ()=>{
  console.log('handleCount')
 count.value++
}
</script>

<div>
	<div>{{count}}</div>
	<button @click="handleCount">add count</button>
  <TkIcon :icon="icon" />
  <TkIcon icon="mdi:github" />
</div>

0