コンテンツにスキップ

MkDocs/設定

MkDocs Materialの設定とカスタマイズについて説明します。

基本設定

mkdocs.yml

site_name: My Site
site_url: https://example.com
theme:
  name: material
  features:
    - navigation.tabs
    - navigation.sections
    - navigation.indexes

テーマ機能

  • ナビゲーション
  • 検索機能
  • ダークモード
  • レスポンシブデザイン

カスタマイズ

カラーパレット

theme:
  palette:
    - scheme: default
      primary: teal
      accent: deep orange

フォント設定

theme:
  font:
    text: Roboto
    code: Roboto Mono

プラグイン

基本プラグイン

  • search: 検索機能
  • minify: HTML最適化
  • redirects: リダイレクト

拡張プラグイン

  • blog: ブログ機能
  • tags: タグ機能
  • social: OGP画像生成

高度な設定

カスタムCSS

:root {
  --md-primary-fg-color: #1976d2;
  --md-accent-fg-color: #ff5722;
}

カスタムJavaScript

document.addEventListener('DOMContentLoaded', function() {
  // カスタム機能の実装
});

関連リンク