--- title: テーマ order: 1 icon: phosphor-duotone:palette tags: [ガイド, テーマ] --- # テーマ テーマはネイティブの BoxLang `.bxm` テンプレートです。専用のテンプレートエンジンや ビルドステップは不要です。 ## 組み込み | テーマ | ベース | 備考 | |---|---|---| | `bootstrap`（デフォルト） | [Bootstrap 5](https://getbootstrap.com/)（バンドル同梱） | Poppins フォント、ブランドグラデーション navbar | | `material` | 手作りの Material スタイル CSS | カードレイアウト、エレベーションシャドウ、Roboto フォント | | `tailwind` | [Tailwind Play CDN](https://tailwindcss.com/) | ユーティリティクラス駆動、ビルドステップ不要 | | `docsy` | 手作りの CSS（`material` からフォーク） | Read the Docs/Docsy にインスパイアされた、ネイビーブルーのリファレンスマニュアル調 | | `slate` | 手作りの CSS（`material` からフォーク） | Stripe/Slate にインスパイアされた - ライト/ダークモードに関わらず常にダークなサイドバー | | `docusaurus` | 手作りの CSS（`material` からフォーク） | Docusaurus にインスパイアされた、大胆な全幅カラー navbar と角丸カード | | `justthedocs` | 手作りの CSS（`material` からフォーク） | Just the Docs にインスパイアされたミニマリズム - 検索ボックスがサイドバー上部にあります | | `vuepress` | 手作りの CSS（`material` からフォーク） | VuePress にインスパイアされたグリーンアクセント、柔らかい角丸 | | `gitbook` | 手作りの CSS（`material` からフォーク） | GitBook にインスパイアされた中央寄せの読み物向けカラム、セリフ体の見出し | | `notion` | 手作りの CSS（`material` からフォーク） | Notion にインスパイアされたボーダーレスなサイドバー、ほぼグレースケールの UI、ゆとりのある余白 | 上記の `material` からフォークされた 7 つのテーマは、`material` と全く同じ BoxLang テンプレート（layout.bxm/page.bxm/search.bxm）を、スコープ付き CSS クラスプレフィックスの リネームを除いて無変更のまま再利用しています - 異なるのは `assets/style.css` だけです （`justthedocs` については、検索ボックスをサイドバーに移動する `` 行が 1 つ再配置されている点も異なります）。そのため、これらは `material` がすでに持つのと 同じ完全な機能セットと、同じエアギャップ対応の挙動を受け継ぎます。 各組み込みテーマ自身の CSS/JS（Bootstrap の CSS/JS バンドル、highlight.js、Alpine.js、 デフォルトの `local` 検索プロバイダー用の lunr.js、および `mermaid` を有効にした場合の Mermaid）は、このモジュールに同梱（バンドル）された状態で出荷され、ビルドされた `site/` にそのままコピーされます - ビルド済みサイトの閲覧に CDN もインターネットアクセスも 一切不要です。`tailwind` テーマ自身のユーティリティエンジン（静的なスタイルシートでは なく、クライアントサイドの JIT コンパイラ）と、自分で有効にしたその他のオプション機能 （`math`、Algolia 検索、Google Analytics）は、依然として CDN やホスト型 API から読み込 まれます - 詳細は下記の [エアギャップ/オフラインサイト](#エアギャップオフラインサイト) を参照してください。 `bootstrap`、`material`、`tailwind` は同じ BoxLang ブランドパレット（`#00FF78 → #00DBFF` グラデーションと `#FFF500` アクセント）を適用します。その下にある 7 つのギャラリーテーマは それぞれ、参考にしたプラットフォームの見た目に着想を得た独自の異なるパレットを使用します - 詳しくは上の表を参照してください。パレットに関わらず、10 個すべてが同じページ機能一式を 搭載しています: - **ページ内「このページの内容」目次** - 各ページの `h2`/`h3` 見出しから生成されます。 - **パンくずリスト** - リンクされた祖先の1つ以上深くネストされたページで、その祖先チェーンを表示します。 - **前/次ページリンク** - 記事の下部に、ナビゲーションの読み取り順に従って表示されます。 - **構文ハイライトされたコードブロック** - [highlight.js](https://highlightjs.org/) と 独自の BoxLang グラマー（` ```bx `/` ```boxlang `/` ```cfscript `）による構文ハイライト。 それぞれに**コピーボタン**付き - 対応デバイスではホバー時に表示され、タッチデバイスでは （ホバーで表示するという概念がないため）常に表示されます。 [Markdown 拡張機能](markdown.md#コードブロック) を参照してください。 - **自己ホスト型 Web フォント** - 表示時に `fonts.googleapis.com` へのリクエストなし。 - **ダーク/ライトモード切替** - リアクティビティに [Alpine.js](https://alpinejs.dev/) を使用。 訪問者の選択は `localStorage` に記憶され（未選択時は OS の設定にフォールバック）、 誤ったテーマがちらつくのを防ぐため初回描画前に適用されます。 - **レスポンシブヘッダー** - あらゆる幅で常に1行に収まります - 狭いビューポートでは 検索ボックスを自身の行に折り返すのではなく縮小します - さらに折りたたみ可能な サイドバーナビ（`bootstrap`/`material`/`tailwind` いずれもハンバーガートグル）付き。 - **検索ボックスのキーボードショートカット** - `/` でページのどこからでも検索にフォーカスし、 `Escape` で結果を閉じます。[検索](search.md) を参照してください。 - **リポジトリリンクと「このページを編集」/「最終更新」行** - `bxsites.yaml` の `repo`/`lastUpdated` オプションが設定されている場合。[設定](../configuration.md#repo) を参照してください。 - **「Markdown をダウンロード」リンク** - 「このページを編集」の隣に表示されます - 各ページの生の `.md` ソースは、ビルドされた HTML と一緒に公開されるため （`guides/themes.md` は `guides/themes/index.html` の隣に置かれます）、人間（や LLM）は レンダリング済みの HTML を解析する代わりに、プレーンな Markdown としてページを 直接読めます。設定不要で常に有効です。 [はじめに](../getting-started.md#markdown-としてページをダウンロード) を参照してください。 - **オプトインのフッター**（著作権、`social` リンク、「Built with BxSites」クレジット）- `bxsites.yaml` の `footer` が `true` の場合。[設定](../configuration.md#footer) を参照してください。 - **バージョンスイッチャー** - プロジェクトが複数バージョンを含む `docs/versions/` フォルダを 持つと自動的に表示されます。[設定](../configuration.md#versioning) を参照してください。 - **テーマ化された `404.html`** - ほとんどの静的ホスト（GitHub Pages を含む）で、 一致しないパスに対して自動的に提供されます。`docs/`（または `src/`）の直下に `404.md` を置くと、タイトルと本文を独自の内容で上書きできます - 通常のページ としてはビルドされず（ナビ項目も `sitemap.xml` の URL も生成されません）、 代わりに `site/404.html` としてレンダリングされます。 - **カスタムロゴとファビコン** - `bxsites.yaml` の `theme.logo`/`theme.favicon` が 設定されている場合。[設定](../configuration.md#theme) を参照してください。 - **折りたたみ可能なサイドバーナビ** - `theme.options.navCollapsible` でオプトイン - 子要素を持つすべてのセクション（リンク付き/なしを問わず）が、常にインラインで 子要素を表示する代わりにトグルボタンを持つようになり、現在のページを含むセクションは 常に開いた状態で始まります。[設定](../configuration.md#theme) を参照してください。 - **Google Analytics** - `bxsites.yaml` の `analytics` が設定されている場合。 [設定](../configuration.md#analytics) を参照してください。 - **ソーシャルシェアカード**（Open Graph + Twitter Card メタタグ）- 各ページの `description` フロントマター（またはサイト全体の `description`）と、それ自身の `ogImage`（またはサイト全体のもの）から生成されます - `bxsites.yaml` の `generateOgImages` でページごとに自動生成することも任意で選べます。 [設定](../configuration.md#ogimage) を参照してください。 - **ページタグ、アイコン、サマリ行** - すべてページ自身のフロントマターでオプトインします - タグはサイト全体の `/tags/` インデックスにリンクするバッジとしてレンダリングされます。 [はじめに](../getting-started.md#ページの追加) を参照してください。 - **明示的な nav オーバーライド** - `bxsites.yaml` または独自の `docs/nav.json` で、 大規模サイト向けにフォルダ推定を置き換えます。[設定](../configuration.md#nav) を参照してください。 - **追加の CSS/JS** - `bxsites.yaml` の `extraCss`/`extraJs` で注入されます。 [設定](../configuration.md#extracss--extrajs) を参照してください。 - **Admonition（note/warning/tip/...）コールアウトボックス** - どのページの Markdown でも デフォルトで有効で、折りたたみ可能なバリアントも含みます - 設定不要です。 [Markdown 拡張機能](markdown.md#admonition) を参照してください。 - **脚注と定義リスト** - `bxsites.yaml` の `markdown` でオプトインします。 [Markdown 拡張機能](markdown.md#脚注) を参照してください。 - **コンテンツタブ**、**コードの行番号/ハイライト行/タイトル**、コードブロック用の **差分マーカー/ターミナル風フレーム** - 設定不要です。 [Markdown 拡張機能](markdown.md#コンテンツタブ) を参照してください。 - **レスポンシブ画像** - 対象となるすべての `docs/assets/**` 画像に対する、リサイズ済み + WebP バリアントと `` への書き換え - デフォルトで有効です。 [レスポンシブ画像](images.md) を参照してください。 - **Mermaid ダイアグラム** - `bxsites.yaml` の `mermaid` でオプトインします。 [Markdown 拡張機能](markdown.md#ダイアグラム) を参照してください。 - **数式**（KaTeX） - `bxsites.yaml` の `math` でオプトインします。 [Markdown 拡張機能](markdown.md#数式) を参照してください。 プロジェクトが使用するテーマは `bxsites.yaml` で設定します: === "YAML" ```yaml title="bxsites.yaml" theme: { name: material } ``` === "JSON" ```json title="bxsites.json" { "theme": { "name": "material" } } ``` ## 公開済みテーマのインストール ForgeBox に公開されたテーマは、`bxSites` バイナリ自体だけでインストールできます - `box`/CommandBox は不要です。すでに公開されているパッケージは、ForgeBox の [`bxsites-themes`](https://www.forgebox.io/type/bxsites-themes) カテゴリーから 探せます: ```bash title="Usage" bxSites install:theme --name=bx-sites-theme-blog1 [--version=1.0.0] ``` これはパッケージの zip をダウンロードし、プロジェクトルートの `themes/bx-sites-theme-blog1/` に展開し、完了する前に下記の `ThemeProvider` 契約を 満たしていることを検証します。この方法で、プロジェクトは複数のインストール済み テーマを並行して保持し、純粋に名前だけで切り替えることができます: === "YAML" ```yaml title="bxsites.yaml" theme: { name: bx-sites-theme-blog1 } ``` === "JSON" ```json title="bxsites.json" { "theme": { "name": "bx-sites-theme-blog1" } } ``` テーマは（プラグインとは異なり）BoxLang モジュール/クラスローダーの関与を一切必要と しません - 単なるファイル群であるため、`install:plugin` にあるような別途の有効化 ステップはなく、`theme.name` を設定するだけで配線が完了します。CLI リファレンスの [`install:theme`](../cli-reference.md#installtheme) を参照してください。 代わりに他の静的サイトジェネレーター向けに作られたテーマから始めたいですか？ [テーマのインポート](theme-import.md) を参照してください - `theme:import` は mkdocs/jekyll/hugo テーマ自身のテンプレートファイルを、ベストエフォートで `themes//` スキャフォールドへと機械的に変換します。 ## エアギャップ/オフラインサイト ビルドされたサイトは、`bootstrap`、`material`、そして `material` からフォークされた 7 つのテーマ（`docsy`、`slate`、`docusaurus`、`justthedocs`、`vuepress`、`gitbook`、 `notion`）をデフォルトの `local` 検索プロバイダーと組み合わせた場合、デフォルトで インターネットアクセスが一切なくても動作します。Bootstrap 自身の CSS/JS、 highlight.js、Alpine.js、lunr.js はすべてこのモジュールに同梱されており （`resources/assets/vendor/`）、ビルド時に `site/assets/vendor/` へそのままコピー されます - これらのどれについても、生成される HTML のどこにも CDN の `