### JSON Build and Development Scripts for VitePress

Source: https://context7.com/typst-doc-cn/guide/llms.txt

Defines npm scripts for managing the VitePress project, including starting the development server, building the production site, and serving the production build locally. This uses the 'vitepress' command-line tool. Dependencies include vitepress.

```json
{
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs"
  }
}
```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Bash Commands for VitePress Development

Source: https://context7.com/typst-doc-cn/guide/llms.txt

Provides bash commands to execute the VitePress scripts defined in the package.json. These commands are used to run the development server, build the project, and preview the production build. Dependencies include vitepress.

```bash
# Start development server with hot reload
pnpm dev

# Build production site to docs/.vitepress/dist
pnpm build

# Preview production build locally
pnpm serve
```

--------------------------------

### TypeScript VitePress Theme Registration and Enhancement

Source: https://context7.com/typst-doc-cn/guide/llms.txt

Registers custom components and enhances the default VitePress theme. This includes importing a custom layout, FAQ list component, custom CSS, and UnoCSS. Dependencies include vitepress.

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import Layout from './Layout.vue';
import FAQList from './FAQList.vue';
import './custom.css';
import 'virtual:uno.css';

export default {
  extends: DefaultTheme,
  Layout: Layout,
  enhanceApp({ app }) {
    app.component('FAQList', FAQList);
  },
} satisfies Theme;
```

--------------------------------

### Load FAQ Metadata with VitePress createContentLoader (TypeScript)

Source: https://context7.com/typst-doc-cn/guide/llms.txt

This code snippet uses `createContentLoader` from `vitepress` to load FAQ data from markdown files located in the 'FAQ/' directory. It extracts the title from the first H1 tag or uses the URL as a fallback, and processes tags from frontmatter. The function returns a structured `Data` object containing all posts, a map of URLs to posts, and a map of tags to posts. It includes basic error handling for missing titles.

```typescript
// docs/.vitepress/theme/faqlist.data.ts
import { createContentLoader } from 'vitepress';

export interface PostData {
  title: string;
  url: string;
  tags: string[];
}

export interface Data {
  posts: PostData[];
  postMap: { [key: string]: PostData };
  tagMap: { [key: string]: PostData[] };
}

export default createContentLoader('FAQ/*.md', {
  includeSrc: true,
  transform(rawData): Data {
    const postMap = {};
    const tagMap = {};

    const posts = rawData.map(({ src, url, frontmatter }) => {
      const title_from_src = src?.match(/^# (.*)$/m)?.[1];
      if (!title_from_src) {
        console.warn(`Failed to find title for ${url}; fall back to the URL.`);
      }
      const title = title_from_src ?? url;

      const result = {
        title,
        url,
        tags: Array.isArray(frontmatter.tags)
          ? frontmatter.tags.sort()
          : frontmatter.tags
            ? [frontmatter.tags]
            : [],
      };

      result.tags.forEach((tag) => (tagMap[tag] ??= []).push(result));
      postMap[result.url] = result;
      return result;
    });

    return { posts, postMap, tagMap };
  },
});
```

--------------------------------

### Typst 标签和引用

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

Typst 允许使用 <标签名> 为任意内容创建标签，并使用 @标签名 或 #link(<标签名>) 进行引用。#show ref 用于设置引用文本的样式。

```typst
#show link: set text(fill: blue) // 设置链接的颜色为蓝色
#show ref: set text(fill: red) // 设置引用的颜色为红色

#figure(
  table(
    columns: 2,
    [A], [B],
  ),
  caption: "一个简单的表格",
)<table1>

== 一个神秘标题 <mystery>

@table1 后面讲述了#link(<mystery>)[一个神秘标题]。
```

--------------------------------

### Vue Custom Theme Layout with Waline Comments for VitePress

Source: https://context7.com/typst-doc-cn/guide/llms.txt

Extends the default VitePress layout to include tags in the documentation header and integrates Waline comments at the end of the document. It uses Vue.js, VitePress, and the Waline comment system. Dependencies include vitepress and @waline/client.

```vue
<script setup lang="ts">
import { useData, useRoute, withBase } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import { computed } from 'vue';
import { Waline } from '@waline/client/component';
import '@waline/client/style';

const { Layout } = DefaultTheme;
const data = useData();
const serverURL = 'https://typst-waline.vercel.app/';
const path = computed(() => useRoute().path);

const tags = computed(() => {
  const frontmatterTags = data.frontmatter.value.tags;
  if (!frontmatterTags) return [];
  return Array.isArray(frontmatterTags) ? frontmatterTags.sort() : [frontmatterTags];
});
</script>

<template>
  <Layout>
    <template #doc-before>
      <div class="vp-doc">
        <h1>{{ data.page.value.title }}</h1>
        <div v-if="tags.length > 0" class="flex gap-1 py-4">
          <a
            v-for="tag in tags"
            :href="withBase(`/FAQ?tag=${tag}#outline`)"
            class="simple-tag"
          >
            {{ tag }}
          </a>
        </div>
      </div>
    </template>
    <template #doc-after>
      <Waline :serverURL="serverURL" :path="path" />
    </template>
  </Layout>
</template>
```

--------------------------------

### Typst Markdown Plugin for VitePress (TypeScript)

Source: https://context7.com/typst-doc-cn/guide/llms.txt

This plugin integrates with Markdown-It (used by VitePress) to render Typst code blocks as PNG images. It preprocesses Typst source, compiles it using the 'typst' CLI, and embeds the resulting images into the Markdown output. It handles caching via SHA1 hashing and supports multi-page Typst documents.

```typescript
// docs/.vitepress/typst_render.ts
import MarkdownIt from 'markdown-it';
import { createHash } from 'node:crypto';
import { writeFileSync, existsSync, mkdirSync } from 'node:fs';
import { spawnSync } from 'node:child_process';

function preprocess(src: string): { display: string; compiling: string } {
  const HIDE = '-- ';
  const lines = src.split('\n');

  return {
    display: lines.filter((l) => !l.startsWith(HIDE)).join('\n'),
    compiling: TEMPLATE.replace(
      '<<src>>',
      lines.map((l) => l.startsWith(HIDE) ? l.slice(HIDE.length) : l).join('\n')
    ),
  };
}

function compileTypst(src: string, info: { path: string; line_begin?: number }) {
  const hash = createHash('sha1').update(src).digest('hex').slice(0, 10);
  const outPrefix = 'docs/generated/';
  const pageFilePattern = `${outPrefix}${hash}_{n}.png`;

  if (!existsSync(pageFilePattern.replace('{n}', '1'))) {
    mkdirSync(outPrefix, { recursive: true });

    const { stderr } = spawnSync('typst', [
      'compile',
      '-',
      pageFilePattern,
      '--font-path',
      'fonts',
    ], { input: src });

    if (stderr.length > 0) {
      writeFileSync(`${outPrefix}${hash}.log`, stderr);
    }
  }

  const pages: string[] = [];
  for (let n = 1; n < 10; n++) {
    const page = pageFilePattern.replace('{n}', String(n));
    if (existsSync(page)) {
      pages.push(page.replace('docs/', '/'));
    } else {
      break;
    }
  }

  return { pages };
}

function TypstRender(md: MarkdownIt) {
  const defaultRender = md.renderer.rules.fence ||
    function (tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };

  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
    const token = tokens[idx];
    if (token.info.trim() === 'typst') {
      const { display, compiling } = preprocess(token.content);
      token.content = display;

      const result = compileTypst(compiling, {
        path: `docs/${env.relativePath}`,
        line_begin: token.map ? token.map[0] + 4 : undefined,
      });

      const codeHtml = defaultRender(tokens, idx, options, env, self);
      const imagesHtml = result.pages.map((path) =>
        `<img src="${path}" alt="Typst compiled image"/>`
      ).join('');

      return `${codeHtml}${imagesHtml}`;
    }
    return defaultRender(tokens, idx, options, env, self);
  };
}

export default TypstRender;

```

--------------------------------

### Typst 链接 (自动识别和手动创建)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

Typst 自动识别 URL 并创建链接。#link 函数可用于手动创建带自定义文本的链接。可以使用 #show link 来设置链接的样式。

```typst
#show link: set text(fill: blue) // 设置链接的颜色为蓝色

https://zh.wikipedia.org

#link("https://zh.wikipedia.org")[维基百科]
```

--------------------------------

### Typst 行内与行间公式

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

Typst 使用 $ 符号包裹数学公式。公式内无空白字符时为行内公式，有空白字符（空格或换行）时为行间公式。

```typst
行内公式：$(a+b)^2 = a^2 + 2 a b + b^2$

公式块：
$ (a+b)^2 = a^2 + 2 a b + b^2 $

$
(a+b)^2 = a^2 + 2 a b + b^2
$
```

--------------------------------

### Typst 代码块 (使用 Zebraw 包)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 Zebraw 包来美化 Typst 代码块，支持行号、标题高亮等功能。需要导入 Zebraw 并使用 #show: Zebraw 或 #zebraw()。

```typst
#import "@preview/zebraw:0.3.0": *
#show: Zebraw
#zebraw(
  highlight-lines: (
    (3, [to avoid negative numbers]),
    (6, [0 is not a right argument to fibonacci_reccursive()!]),
  ),
  header: "fibonacci_reccursive()",
  ```rust
  pub fn fibonacci_reccursive(n: i32) -> u64 {
      if n < 0 {
          panic!("{}" is negative!", n);
      }
      match n {
          0 => panic!("zero is not a right argument to fibonacci_reccursive()!"),
          1 | 2 => 1,
          3 => 2,
          /*
          50    => 12586269025,
          */
          _ => fibonacci_reccursive(n - 1) + fibonacci_reccursive(n - 2),
      }
  }
  ```,
)
```

--------------------------------

### Typst CSL: 删除空 "text-case" 属性解决 "unknown variant ..." 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

当 CSL 文件中的 `<text>` 元素包含一个空的 `text-case` 属性时，Typst 会报错“unknown variant ...”。此示例展示了如何通过删除空的 `text-case` 属性来修正此问题，使 Typst 能够正确处理文本的大小写转换。

```xml
- <text variable="title" text-case=""/>
+ <text variable="title"/>
```

--------------------------------

### Typst 标题编号设置 (基础)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 Typst 的 heading 函数设置标题的编号格式。numbering 参数接受一个字符串来定义编号的结构。此方法在处理特殊字符或混合数字/字母编号时可能存在局限性。

```typst
#set heading(numbering: "1.a.i")
= 一级标题
我走了。
== 二级标题
我来了。
== 二级标题
我来了吗？
=== 三级标题
我走了又来了。
```

--------------------------------

### Typst CSL: 修改 "locator" 属性为小写解决 "invalid locator" 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

Typst 在解析 CSL 文件时，如果 `locator` 属性的大小写不符合标准规定（例如使用大写的 "Chapter" 而非小写的 "chapter"），会触发“invalid locator”错误。此代码片段展示了如何将 `locator` 属性值修改为小写，以符合 CSL 标准并解决该报错。

```xml
- <if locator="Chapter">
+ <if locator="chapter">
```

--------------------------------

### Typst CSL: 注释 "institution" 解决 "unknown variant `institution`" 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

Typst 对 CSL 标准的支持有限，当 CSL 文件中出现非标准变量如 `<institution/>` 时，会引发“unknown variant `institution`”错误。此代码片段展示了如何通过注释掉 `<institution/>` 来解决此问题，确保 Typst 能够正确解析 CSL 文件。

```xml
  <macro name="secondary-contributors-en">
    <names variable="translator">
      <name/>
      <!-- <institution/> -->
      <label form="short" prefix=" "/>
    </names>
  </macro>
```

--------------------------------

### Typst 图片插入

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 #image 命令插入本地图片，可以通过 width 和 height 参数控制尺寸。未设置时，图片会按比例缩放或使用默认宽度。

```typst
#image("这里填路径", width: 100pt, height: 100pt)
```

--------------------------------

### Typst CSL: 注释多余的 "layout" 解决 "duplicate field `layout`" 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

当 Typst 遇到 CSL 文件中包含多个 `<layout>` 元素时，可能导致“duplicate field `layout`”错误。本示例演示了如何通过注释掉非标准的 `<layout locale="en">` 来临时解决此问题，使其能够生成参考文献。修改后，CSL 根据文献语言自动使用“等”或“et al.”的功能可能会失效。

```xml
<bibliography entry-spacing="0" et-al-min="4" et-al-use-first="3" second-field-align="flush">
  <!--
  <layout locale="en">
    <text variable="citation-number" prefix="[" suffix="]"/>
    <text macro="entry-layout"/>
  </layout>
  -->
  <layout>
    <text variable="citation-number" prefix="[" suffix="]"/>
    <text macro="entry-layout"/>
  </layout>
</bibliography>
```

--------------------------------

### Untitled

No description

--------------------------------

### Typst CSL: 替换非标准变量解决 "data did not match any variant of untagged enum TextTarget/Variable" 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

Typst 在解析 CSL 文件时，若遇到非标准变量（例如 `original-container-title` 或过时的 `term` 扩展 `unpublished`），会触发“data did not match any variant of untagged enum TextTarget/Variable”错误。此代码示例展示了如何将非标准变量替换为标准变量（如 `container-title`）或使用标准文本（如 `Unpublished`）来解决此问题。

```xml
- <if variable="original-container-title">
+ <if variable="container-title">
    <group delimiter=": ">
-     <text variable="original-container-title"/>
+     <text variable="container-title"/>
      <text macro="volume"/>
    </group>
  </if>
```

```xml
- <text term="unpublished"/>
+ <text value="Unpublished"/>
```

--------------------------------

### Dynamic FAQ List Component with Tag Filtering (Vue)

Source: https://context7.com/typst-doc-cn/guide/llms.txt

This Vue component displays a list of FAQ articles with a filtering mechanism based on tags. It fetches data from a content loader (faqlist.data), displays available tags with post counts, and allows users to filter the list by selecting a tag. The component dynamically updates the displayed posts based on the selected tag and persists the selected tag in the URL query parameters.

```vue
<!-- docs/.vitepress/theme/FAQList.vue -->
<template>
  <div class="max-w-screen-lg w-full px-2 py-2 my-0 mx-auto">
    <div class="flex flex-wrap gap-1">
      <a :href="withBase(`FAQ#outline`)" class="simple-tag" @click="currentTag = null">
        <span>全部</span>
        <span class="pl-1">{{ data.posts.length }}</span>
      </a>
      <a v-for="(tag, i) in tags" :key="i"
         :href="withBase(`FAQ?tag=${tag}#outline`)"
         class="simple-tag"
         @click="currentTag = tag">
        <span>{{ tag }}</span>
        <span class="pl-1">{{ data.tagMap[tag].length }}</span>
      </a>
    </div>
    <div class="my-2 text-2xl">{{ currentTag }}</div>
    <ul>
      <li v-for="(article, index) in postList" :key="index">
        <a :href="withBase(article.url)">{{ article.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { withBase } from 'vitepress';
import { ref, computed, onMounted } from 'vue';
import { data } from './faqlist.data';

const tags = Object.keys(data.tagMap).sort();
const currentTag = ref<string | null>(null);

const postList = computed(() =>
  currentTag.value ? data.tagMap[currentTag.value] : data.posts
);

onMounted(() => {
  const searchParams = new URLSearchParams(window.location.search);
  currentTag.value = searchParams.get('tag');
});
</script>

```

--------------------------------

### Typst 图形 (带标题的图像)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 #figure 函数为图像添加标题。figure 函数接受内容（如 image）和 caption 参数。

```typst
#set text(lang: "zh", region: "cn") // 用于将默认的 supplement 改为中文
#figure(
  ```typ
  #image("/assets/files/香風とうふ店.jpg")
  ```,
  caption: [用于加载香風とうふ店送外卖的宝贵影像的代码]
)
```

--------------------------------

### Typst 标题编号设置 (使用 numbly 包)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 numbly 包来更灵活地设置 Typst 标题的编号格式。此方法支持自定义各种编号类型和分隔符，解决了官方实现的一些限制。

```typst
#import "@preview/numbly:0.1.0": numbly
#set heading(numbering: numbly(
  "{1:一}",
  "{2:1.}.",
  "{3:a}.",
  "{4:i}.",
))
= 一级标题
我走了。
== 二级标题
我来了。
== 二级标题
我来了吗？
=== 三级标题
我走了又来了。
```

--------------------------------

### Typst 行内代码

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用反引号 (`) 包裹行内代码片段。这与 Markdown 的行内代码语法类似。

```typst
`print("Hello, world!")`
```

--------------------------------

### Typst 表格创建 (等宽列)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

创建 Typst 表格时，columns 参数可以接受一个包含列宽的元组，实现等宽列。1fr 单位表示占据可用空间的比例。

```typst
#table(
    columns: (1fr, 1fr, 1fr),
    table.header([表头 1], [表头 2], [表头 3]),
    [一段很长的内容 1], [内容 2], [内容 3],
    [内容 4], [内容 5], [内容 6],
)
```

--------------------------------

### Typst 标题编号设置 (带中文前缀)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

演示了在 Typst 标题编号前添加中文前缀，如中文数字和顿号。注意官方实现对全角符号的支持可能不佳，导致编号显示异常。

```typst
#set heading(numbering: "一、1.a.i")
= 一级标题
我顿号没了。
== 二级标题
我也没了。
```

--------------------------------

### Typst 代码块

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用三个反引号 (```) 包裹多行代码块。可以指定代码语言以获得语法高亮，但这需要额外的设置或包。

```typst
```typst
#text(fill: red)[红色文本]
```
```

--------------------------------

### ShowyCard Vue Component with 3D Effects

Source: https://context7.com/typst-doc-cn/guide/llms.txt

A Vue.js component for creating interactive cards with 3D rotation and glow effects that respond to mouse movements. It utilizes Vue's composition API, computed properties, and inject for dynamic styling and behavior. The component handles click events for navigation and supports external links.

```vue
<template>
  <component
    :is="layout === 'inline' ? 'span' : 'div'"
    class="card"
    :class="[layout, { 'grid-item': layout === 'grid' }, { 'clickable': !!homePage }]"
    :style="cardStyle"
    ref="pokemonCard"
    @mousemove="handleMouseMove"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @click="handleCardClick">
    <div class="card-glow" :style="glowStyle"></div>
    <div v-if="homePage && isExternalLink" class="pop-out-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
           fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5..."/>
      </svg>
    </div>
    <slot>
      <div class="card-element">
        <b class="card-name">{{ name }}</b>
      </div>
      <div class="card-element">
        <strong><a :href="authorLink">Author: {{ author }}</a></strong>
      </div>
      <div v-if="tags" class="card-element tags">
        <span v-for="(tag, index) in tags" :key="index" class="tag">
          {{ tag }}
        </span>
      </div>
      <div v-if="links" class="card-element links-container">
        <a v-for="(link, index) in links" :key="index" :href="link" class="link">
          <img class="logo" :src="getLogo(link)" alt="logo">
        </a>
      </div>
    </slot>
  </component>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue';
import { withBase, useRouter } from 'vitepress';

const props = defineProps({
  name: { type: String, required: true },
  author: { type: String, required: true },
  authorLink: { type: String, required: false },
  tags: { type: Array, required: false },
  links: { type: Array, required: false },
  layout: {
    type: String,
    default: 'inline',
    validator: (value) => ['inline', 'grid'].includes(value)
  },
  homePage: { type: String, default: null }
});

const router = useRouter();
const rotateX = ref(0);
const rotateY = ref(0);
const glowX = ref(0);
const glowY = ref(0);
const glowOpacity = ref(0);
const pokemonCard = ref(null);
const is3dEffectEnabled = inject('is3dEffectEnabled');

const cardStyle = computed(() => {
  if (!is3dEffectEnabled || !is3dEffectEnabled()) {
    return { transform: 'none' };
  }
  return {
    transform: `perspective(1000px) rotateX(${rotateX.value}deg) rotateY(${rotateY.value}deg)`,
    transition: 'transform 0.1s ease-out'
  };
});

const glowStyle = computed(() => ({
  left: `${glowX.value}px`,
  top: `${glowY.value}px`,
  opacity: (is3dEffectEnabled?.() ?? false) ? glowOpacity.value : 0,
}));

const getLogo = (link) => {
  if (link.startsWith("https://github.com")) {
    return "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png";
  } else if (link.startsWith("https://typst.app/universe")) {
    return "https://typst.app/assets/favicon-16x16.png";
  }
  return "https://github.githubassets.com/images/icons/emoji/octocat.png";
};

const handleMouseMove = (event) => {
  if (!pokemonCard.value || !is3dEffectEnabled?.()) return;
  const rect = pokemonCard.value.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  const maxRotation = -15;

  rotateX.value = -((y - centerY) / centerY) * maxRotation;
  rotateY.value = ((x - centerX) / centerX) * maxRotation;
  glowX.value = x;
  glowY.value = y;
};

const handleMouseEnter = () => {
  if (is3dEffectEnabled?.()) glowOpacity.value = 1;
};

const handleMouseLeave = () => {
  rotateX.value = 0;
  rotateY.value = 0;
  glowOpacity.value = 0;
};

const handleCardClick = () => {
  if (props.homePage) {
    const isExternal = /^(https?:|mailto:|tel:)/.test(props.homePage);
    if (isExternal) {
      window.open(props.homePage, '_blank');
    } else {
      router.go(withBase(props.homePage));
    }
  }
};
</script>

<style scoped>
.card {
  border: 4px solid #f0c040;
  border-radius: 0.75em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  background: radial-gradient(circle, #fdfdfd 60%, #f0f0f0 100%);
  padding: 1em;
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 20px 30px rgba(0,0,0,0.4);
}

.card-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.tag {
  display: inline-block;
  margin: 2px 5px;
  padding: 4px 8px;
  background-color: #e0aa30;
  color: #fff;
  border-radius: 0.35em;
  font-size: 0.85em;
}
</style>
```

--------------------------------

### Typst 表格创建 (基础)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 Typst 的 table 函数创建表格，通过 columns 参数指定列数。table.header 用于设置表头，表头会在跨页时重复显示。

```typst
#table(
    columns: 3, // 列数
    table.header([表头 1], [表头 2], [表头 3]), // 表头
    [一段很长的内容 1], [内容 2], [内容 3], // 第一行
    [内容 4], [内容 5], [内容 6], // 第二行
)
```

--------------------------------

### Typst 图形 (带标题的表格)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 #figure 函数为表格添加标题。figure 函数可以包装任何 Typst 内容，并为其提供一个 caption。

```typst
#figure(
  table(
    columns: 2,
    [A], [B],
  ),
  caption: "一个简单的表格",
)
```

--------------------------------

### Typst 表格创建 (动态行)

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/word.md

使用 range 和 for 循环动态生成 Typst 表格的行内容。table.header 确保表头在分页时也能正确显示。

```typst
#table(
    columns: 3,
    table.header([表头 1], [表头 2], [表头 3]),
    ..for i in range(1, 19) { ([#i],) }
)
```

--------------------------------

### Vue GridView Container with 3D Effect Toggle

Source: https://context7.com/typst-doc-cn/guide/llms.txt

A Vue.js component that acts as a grid layout wrapper. It includes a toggle control to enable/disable a 3D effect and uses slots for content. Dependencies include Vue.js.

```vue
<template>
  <div class="grid-view-container">
    <div class="controls-container">
      <label class="switch">
        <input type="checkbox" v-model="is3dEffectActive">
        <span class="slider round"></span>
      </label>
      <span>Enable 3D Effect</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is3dEffectActive: true,
    };
  },
  provide() {
    return {
      is3dEffectEnabled: () => this.is3dEffectActive
    };
  },
}
</script>

<style scoped>
.grid-view-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.controls-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--vp-c-bg-soft);
  padding: 0.5rem;
  border-radius: 8px;
  z-index: 1000;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

input:checked + .slider {
  background-color: #2196F3;
}
</style>
```

--------------------------------

### Typst CSL: 填充空字符串解决 "missing field $value" 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

CSL 标准要求 `<else>` 和 `<group>` 元素必须包含内容，否则会引发“missing field $value”错误。当 `<layout>` 元素为空时，可以通过添加一个空的 `<text value=""/>` 来解决此问题，确保 CSL 文件的结构符合 Typst 的解析要求。

```xml
  <citation>
-   <layout/>
+   <layout>
+     <text value=""/>
+   </layout>
  </citation>
```

--------------------------------

### Typst CSL: 删除非标准 "term" 解决 "data did not match any variant of untagged enum Term" 报错

Source: https://github.com/typst-doc-cn/guide/blob/master/docs/FAQ/bib-csl.md

当 CSL 文件包含非标准的 `<term>` 元素（如 `citation-range-delimiter`）时，Typst 无法识别并抛出“data did not match any variant of untagged enum Term”错误。此示例展示了如何使用 diff 格式删除此类非标准 term，从而使 Typst 能够正确处理参考文献。

```xml
  <locale>
    <terms>
-     <term name="citation-range-delimiter">-</term>
      <term name="page-range-delimiter">-</term>
    </terms>
  </locale>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.