MDX

コンテンツを記述する別の方法として、.mdxファイル（Markdown JSX）を使用する方法があります。これらのファイルはMarkdownとして記述されますが、Qwikコンポーネントにコンパイルされます。Markdown構文に加えて、.mdxファイルは他のコンポーネントを参照することもできます。

ルートが次のように設定されているとします。

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

src/routes/some/path/index.mdx

---
title: Hello World Title
---
 
This is a simple hello world component.

上記のコンポーネントは、https://example.com/some/pathでレンダリングされます。

他のコンポーネントのインポート

MDXは、新しいコンテンツを迅速に（「Qwikly」🙂）作成するための創造的な機会であり、ページでより多くのインタラクションが必要な場合は、次のようにQwikコンポーネントをシームレスに統合できます。

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

src/routes/some/path/index.mdx

---
title: Hello World Title
---
import { Counter } from "../../../components/counter/counter";
 
This is a simple hello world component.
 
<Counter />

src/components/counter/counter.tsx

import { component$, useSignal } from '@builder.io/qwik';
 
export const Counter = component$(() => {
  const count = useSignal(0);
 
  return (
    <button class="counter" type="button" onClick$={() => count.value++}>
      Increment {count.value}
    </button>
  );
});

**注記:** Qwik Cityと現在の多くのメタフレームワークの重要な違いは、ディレクトリベースのルーティングです。すべてのルートは、a-directory/index.(tsx,ts,js,jsx,md,mdx)として定義する必要があります。

他のメタフレームワークでは、about.mdxがルート`http://example.com/about`をレンダリングすることに慣れています.しかし、これはQwik Cityでは機能しません。Qwik Cityがレンダリングすることを認識させるには、ファイルを`about/index.mdx`に名前変更する必要があります。

デフォルトで含まれているMDXプラグインを無効にする

Qwik Cityには、デフォルトで3つのプラグインが含まれています。

remarkGfm: GFMサポート（自動リンクリテラル、脚注、取り消し線、表、タスクリスト）。
rehypeSyntaxHighlight: Prismを使用した軽量で堅牢、洗練された仮想構文の強調表示。
rehypeAutolinkHeadings: HTMLの見出しにリンクを追加するためのプラグイン。

これらのプラグインは、次の方法で個別に無効にすることができます。

vite.config.js

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 */
    ],
  };
});

Open Graphプロパティ

ogまたはopengraphプロパティを使用して、Open Graph protocolメタデータを定義できます。

title: My Title
description: My Description
og:
  - title: My Custom Title
    description: true
  - image: https://example.com/rock.jpg
    image:alt: A shiny red apple with a bite taken out
  - image: https://example.com/rock2.jpg

og:titleまたはog:descriptionをtrueに設定すると、外部のtitleおよびdescriptionプロパティが代わりにチェックおよび使用されます。したがって、同じタイトルと説明を2回書くことを避けることができます。

上記の例では、次のHTMLコードが生成されます。

<title>My Title</title>
<meta name="description" content="My Description" />
 
<meta property="og:title" content="My Custom Title" />
<meta property="og:description" content="My Description" />
 
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
 
<meta property="og:image" content="https://example.com/rock2.jpg" />

frontmatterデータの読み取り

frontmatterキーには、useDocumentHead()フックを利用することでアクセスできます。

src/routes/some/path/index.mdx

---
title: Hello World Title
tags:
  - super
  - exiting
  - docs
---
import { Tags } from "../../../components/tags/tags";
 
This is a simple hello world component.
 
<Tags />

src/components/tags/tags.tsx

import { component$ } from '@builder.io/qwik';
import { useDocumentHead } from '@builder.io/qwik-city';
 
export const Tags = component$(() => {
  const { frontmatter } = useDocumentHead();
  
  if (frontmatter.tags.length === 0) {
    return null;
  }
  
  return (
    <ul>
      {frontmatter.tags.map((tag: string) => (
        <li key={`tag-${tag}`}>{tag}</li>
      ))}
    </ul>
  );
});

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！