モダンなUIデザインとレスポンシブ対応

CongoテーマはTailwind CSSを基盤に構築され、レスポンシブレイアウトを標準搭載しています。デフォルトのレイアウト構造では、コンテンツ領域を明確に分離し、モバイルデバイスでも読みやすい構成を実現しています。

ダークモードの自動切り替え機構

システム設定に基づく自動切り替えは、appearance-manager.tsで実装されています。

const systemPref = window.matchMedia('(prefers-color-scheme: dark)').matches;
const userPref = localStorage.getItem('theme') || 'system';

const applyTheme = () => {
  const isDark = userPref === 'dark' || (userPref === 'system' && systemPref);
  document.documentElement.classList.toggle('dark-mode', isDark);
  updateMetaThemeColor(isDark);
};

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
applyTheme();

コードブロックの拡張機能

構文ハイライトとコピー機能は、code-highlighter.jsで提供されます。

function setupCodeBlocks() {
  document.querySelectorAll('pre code').forEach(block => {
    const container = document.createElement('div');
    container.className = 'code-container';
    
    const copyBtn = document.createElement('button');
    copyBtn.className = 'copy-btn';
    copyBtn.textContent = 'コピー';
    copyBtn.addEventListener('click', () => {
      navigator.clipboard.writeText(block.textContent)
        .then(() => {
          copyBtn.textContent = 'コピー済み';
          setTimeout(() => copyBtn.textContent = 'コピー', 2000);
        });
    });

    container.appendChild(copyBtn);
    container.appendChild(block);
    block.parentNode.replaceChild(container, block);
  });
}

document.addEventListener('DOMContentLoaded', setupCodeBlocks);

コンテンツ拡張のためのショートコード

技術文書向けの拡張機能を提供するショートコード群:

• {{< chart data="..." >}} - データ可視化
• {{< mermaid flow="..." >}} - フローチャート生成
• {{< math formula="..." >}} - 数式表示

設定ファイルのカスタマイズポイント

テーマ設定はconfig/_default/params.yamlで管理されます。

theme:
  color_scheme: "light"
  font_size: "16px"
  navigation:
    - name: "ホーム"
      url: "/"
    - name: "ブログ"
      url: "/posts"