MDX

创作内容的另一种方法是使用 .mdx 文件（Markdown JSX）。 这些文件以 Markdown 形式编写，但它们被编译为 Qwik 组件。 .mdx 文件除了 可以使用Markdown 语法，还可以引用其他组件。

假设您的路由设置如下：

src/
└── routes/
    └── some/
        └── path/
            └── index.mdx    # https://example.com/some/path

---
# File: src/routes/some/path/index.mdx
title: Hello World Title
---

这是一个简单的 hello world 组件

上面组件会在https://example.com/some/path 路由渲染。

导入其他组件。

MDX 是一个让您快速提出新内容的创意机会（“Qwikly”🙂）， 如果您需要在页面上进行更多交互，您可以像这样无缝集成您的 Qwik 组件：

src/
├── components/
│   └──  counter.tsx
└── routes/
    └── some/
        └── path/
            └── index.mdx    # https://example.com/some/path

---
# File: src/routes/some/path/index.mdx
title: Hello World Title
---
import { Counter } from "../../../components/counter/counter";

这是一个简单的 hello world 组件.

<Counter />

// File: src/components/counter/counter.tsx
import { component$, useStyles$, useStore } from '@builder.io/qwik';

export const Counter = component$(() => {
  const store = useStore({ count: 0 });

  return (
    <button class="counter" type="button" onClick$={() => store.count++}>
      Increment {store.count}
    </button>
  );
});

Note: A key difference between Qwik City and many current meta-frameworks is directory-based routing. Every route needs to be defined as a-directory/index.(tsx,ts,js,jsx,md,mdx).

在其他元框架中，您可能习惯了 about.mdx 将渲染路由 http://example.com/about 。 但是，这在 Qwik City 中不起作用。您必须将文件重命名为 about/index.mdx 以便 Qwik City 知道如何渲染它

禁用默认的 MDX 插件

默认下，QWIK city包含了3个插件。

• remarkGfm: GFM support (autolink literals, footnotes, strikethrough, tables, tasklists).
• rehypeSyntaxHighlight: Lightweight, robust, elegant virtual syntax highlighting using Prism.
• rehypeAutolinkHeadings: Plugin to add links to headings in HTML.

这些插件可以通过下面方式 单独禁用：

import { defineConfig } from 'vite';
import { qwikCity } from '@builder.io/qwik-city/vite';
// See below
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
export default defineConfig(() => {
  return {
    plugins: [
      qwikCity({
        mdxPlugins: {
          remarkGfm: false,
          rehypeSyntaxHighlight: false,
          rehypeAutolinkHeadings: false,
        },
        mdx: {
          rehypePlugins: [
            // Plugins can now be added manually to use a different configuration
            [rehypeAutolinkHeadings, { behavior: 'wrap' }],
          ],
        },
      }),
      /* the rest of the configuration */
    ],
  };
});