开发技巧

介绍 Teek 开发路程的一些技巧。

利用对象/数组减少 HTML 编写

对象形式

在 template 用 if、if-else 判断。

<script setup lang="ts">
import { A, B, C, D } from "./components";
import { useData } from "vitepress";

const { theme } = useData();
const provider = theme.value.provider;
</script>

<template>
  <template v-if="provider === 'a'" name="a"><A /></template>
  <template v-else-if="provider === 'b'" name="b"><B /></template>
  <template v-else-if="provider === 'd'" name="c"><C /></template>
  <template v-else-if="provider === 'd'" name="d"><D /></template>
</template>

可以将其转为对象：

<script setup lang="ts">
import { A, B, C, D } from "./components";
import { useData } from "vitepress";

const { theme } = useData();
const provider = theme.value.provider;

const providerMap = {
  a: { el: A, props: { name: "a" } },
  b: { el: B, props: { name: "b" } },
  c: { el: C, props: { name: "c" } },
  d: { el: D, props: { name: "d" } },
};
</script>

<template>
  <component v-if="provider" :is="providerMap[provider]?.el" v-bind="providerMap[provider]?.props" />
</template>

可以在组件 Layout 的评论区相关代码或者 HomeBanner 查看具体使用。

数组形式

在 template 编写类似的重复 HTML。

<script setup lang="ts"></script>

<template>
  <div>
    <div>
      <span class="title">A</span>
      <span class="desc">测试 A</span>
    </div>
    <div>
      <a class="link" href="/b">B</a>
      <span class="desc">测试 B</span>
    </div>
    <div>
      <img class="link" src="/c.png" />
      <span class="desc">测试 C</span>
    </div>
  </div>
</template>

可以将其转为数组：

<script setup lang="ts">
const list = [
  { title: "A", desc: "测试 A", className: "title" },
  { title: "B", desc: "测试 B", isLink: true, className: "link", link: "/b" },
  { desc: "测试 C", isImg: true, className: "img", link: "/c.png" },
];
</script>

<template>
  <div>
    <div v-for="item in list" :key="item.title">
      <a v-if="item.isLink" :class="item.className" :href="item.link">{{ item.title }}</a>
      <img v-else-if="item.isImg" :class="item.className" :src="item.link" />
      <span v-else :class="item.className">{{ item.title }}</span>

      <span class="desc">{{ item.desc }}</span>
    </div>
  </div>
</template>

仅限于重复度接近 90% 以上或者简单的 HTML，否则不建议使用数组 + for 循环，可读性会变差。

可以在组件 ArticleInfo 查看具体使用。

配置项支持方式

config 配置

如果配置项仅支持在 .vitepress/config.ts 配置：

在组件里这样使用：

<script setup lang="ts">
import { useData } from "vitepress";

const { theme } = useData();

// 赋予默认值
const { enabled = true, name = "", obj = {}, arr = [] } = { ...theme.xxx };
// 或者
// const { enabled = true, name = "", obj = {}, arr = [] } = theme.xxx || {};
</script>

<template></template>

这样避免了获取 theme.xxx 里的属性时报 undefined（没配置 xxx），同时如果 theme.xxx 里的某些属性没有配置，则赋予默认值。

config 和 frontmatter 配置

配置项同时支持在 .vitepress/config.ts 和 Markdown 的 frontmatter 配置，当两种都配置，则以 frontmatter 为准。

在组件里这样引用：

<script setup lang="ts">
import { computed } from "vue";
import { useData } from "vitepress";

const { theme, frontmatter } = useData();

const themeConfig = computed(() => {
  // 赋予默认值
  const {
    enabled = true,
    name = "",
    obj = {},
    arr = [],
  } = { ...theme.xxx, ...frontmatter.value.xxx, ...frontmatter.value.tk.xxx };

  return { enabled, name, obj, arr };
});

// 使用
console.log(themeConfig.value.xxx);
</script>

<template></template>

frontmatter.value.tk.xxx 是在首页 index.md 配置 frontmatter 时，额外添加了 tk，这是为了避免与 Vitepress 自带配置的命名冲突。

支持 frontmatter 配置时，一定要用 computed 监听 frontmatter 变化，因为不同 Markdown 的 frontmatter 有可能不一样，如果没有监听 frontmatter 变化，会导致切换 Markdown 文章后，新文章的配置不会重新生效。

如：

config

// .vitepress/config.ts
import defineTeekConfig from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
 comment: {
    provider: "giscus",
    options: {
      repo: "your repo",
      repoId: "your repoId",
      category: "your category",
      categoryId: "your categoryId",
    }
 };
});

index.md

---
tk:
  comment:
    provider: "giscus"
    options:
      repo: "your repo"
      repoId: "your repoId"
      category: "your category"
      categoryId: "your categoryId"
---

文章页.md

---
comment:
  provider: "giscus"
  options:
    repo: "your repo"
    repoId: "your repoId"
    category: "your category"
    categoryId: "your categoryId"
---