FlexLayout-React - Professional Docking Layouts Overview

FlexLayout-React provides IDE-quality docking layouts with drag-and-drop, tabs, splitters, and complex window management. Perfect for dashboards, IDEs, admin panels, and any interface requiring flexible, user-customizable layouts.

Key Features:

Drag-and-drop panel repositioning Tabbed interfaces with close, maximize, minimize Splitters for resizable panes Border docking areas Layout persistence (save/restore) Programmatic layout control TypeScript support

Installation:

npm install flexlayout-react

Basic Setup 1. Define Layout Model import { Model, IJsonModel } from 'flexlayout-react';

const initialLayout: IJsonModel = { global: { tabEnableClose: true, tabEnableRename: false, }, borders: [], layout: { type: 'row', weight: 100, children: [ { type: 'tabset', weight: 50, children: [ { type: 'tab', name: 'Explorer', component: 'explorer', } ] }, { type: 'tabset', weight: 50, children: [ { type: 'tab', name: 'Editor', component: 'editor', } ] } ] } };

// Create model const model = Model.fromJson(initialLayout);

Create Layout Component import React, { useRef } from 'react'; import { Layout, Model, TabNode, IJsonTabNode } from 'flexlayout-react'; import 'flexlayout-react/style/dark.css'; // or light.css

interface ComponentRegistry { explorer: React.ComponentType; editor: React.ComponentType; terminal: React.ComponentType; }

function App() { const modelRef = useRef(Model.fromJson(initialLayout));

const factory = (node: TabNode) => {
    const component = node.getComponent();

    switch (component) {
        case 'explorer':
            return <ExplorerPanel />;
        case 'editor':
            return <EditorPanel />;
        case 'terminal':
            return <TerminalPanel />;
        default:
            return <div>Unknown component: {component}</div>;
    }
};

return (
    <div style={{ width: '100vw', height: '100vh' }}>
        <Layout
            model={modelRef.current}
            factory={factory}
        />
    </div>
);

}

Component Implementation function ExplorerPanel() { return (
File Explorer
- src/
- public/
- package.json
); }

function EditorPanel() { return (

</div>
    );
}</p>
<p>Advanced Layout Configurations
Complex Multi-Pane Layout
const complexLayout: IJsonModel = {
    global: {
        tabEnableClose: true,
        tabEnableRename: false,
        tabEnableDrag: true,
        tabEnableFloat: true,
        borderSize: 200,
    },
    borders: [
        {
            type: 'border',
            location: 'left',
            size: 250,
            children: [
                {
                    type: 'tab',
                    name: 'Explorer',
                    component: 'explorer',
                }
            ]
        },
        {
            type: 'border',
            location: 'bottom',
            size: 200,
            children: [
                {
                    type: 'tab',
                    name: 'Terminal',
                    component: 'terminal',
                },
                {
                    type: 'tab',
                    name: 'Output',
                    component: 'output',
                }
            ]
        }
    ],
    layout: {
        type: 'row',
        weight: 100,
        children: [
            {
                type: 'tabset',
                weight: 70,
                children: [
                    {
                        type: 'tab',
                        name: 'Editor 1',
                        component: 'editor',
                    },
                    {
                        type: 'tab',
                        name: 'Editor 2',
                        component: 'editor',
                    }
                ]
            },
            {
                type: 'tabset',
                weight: 30,
                children: [
                    {
                        type: 'tab',
                        name: 'Properties',
                        component: 'properties',
                    },
                    {
                        type: 'tab',
                        name: 'Outline',
                        component: 'outline',
                    }
                ]
            }
        ]
    }
};</p>
<p>Nested Rows and Columns
const nestedLayout: IJsonModel = {
    global: {},
    borders: [],
    layout: {
        type: 'row',
        children: [
            {
                type: 'col',
                weight: 50,
                children: [
                    {
                        type: 'tabset',
                        weight: 70,
                        children: [
                            { type: 'tab', name: 'Top Left', component: 'panel-a' }
                        ]
                    },
                    {
                        type: 'tabset',
                        weight: 30,
                        children: [
                            { type: 'tab', name: 'Bottom Left', component: 'panel-b' }
                        ]
                    }
                ]
            },
            {
                type: 'col',
                weight: 50,
                children: [
                    {
                        type: 'tabset',
                        weight: 30,
                        children: [
                            { type: 'tab', name: 'Top Right', component: 'panel-c' }
                        ]
                    },
                    {
                        type: 'tabset',
                        weight: 70,
                        children: [
                            { type: 'tab', name: 'Bottom Right', component: 'panel-d' }
                        ]
                    }
                ]
            }
        ]
    }
};</p>
<p>Layout Persistence
Save and Restore Layout
import { useState, useEffect } from 'react';
import { Model, Actions } from 'flexlayout-react';</p>
<p>function LayoutManager() {
    const [model, setModel] = useState(() => {
        // Load from localStorage
        const saved = localStorage.getItem('layout');
        return saved
            ? Model.fromJson(JSON.parse(saved))
            : Model.fromJson(defaultLayout);
    });</p>
<pre class="codehilite"><code>// Save on model change
const onModelChange = (newModel: Model) => {
    const json = newModel.toJson();
    localStorage.setItem('layout', JSON.stringify(json));
};

return (
    <Layout
        model={model}
        factory={factory}
        onModelChange={onModelChange}
    />
);
</code></pre>

<p>}</p>
<p>Reset to Default Layout
function LayoutControls({ model }: { model: Model }) {
    const resetLayout = () => {
        const newModel = Model.fromJson(defaultLayout);
        // Need to replace model reference
        window.location.reload(); // Simple approach
    };</p>
<pre class="codehilite"><code>const saveLayout = () => {
    const json = model.toJson();
    const blob = new Blob([JSON.stringify(json, null, 2)], {
        type: 'application/json'
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'layout.json';
    a.click();
};

return (
    <div className="layout-controls">
        <button onClick={resetLayout}>Reset Layout</button>
        <button onClick={saveLayout}>Export Layout</button>
    </div>
);
</code></pre>

<p>}</p>
<p>Dynamic Tab Management
Adding Tabs Programmatically
import { Actions, DockLocation } from 'flexlayout-react';</p>
<p>function addNewTab(model: Model, tabsetId: string) {
    model.doAction(Actions.addNode(
        {
            type: 'tab',
            name: <code>New Tab ${Date.now()}</code>,
            component: 'editor',
        },
        tabsetId,
        DockLocation.CENTER,
        -1
    ));
}</p>
<p>// Add to specific tabset
const addToExplorer = () => {
    addNewTab(model, 'explorer-tabset-id');
};</p>
<p>// Add to active tabset
const addToActive = () => {
    const activeTabset = model.getActiveTabset();
    if (activeTabset) {
        addNewTab(model, activeTabset.getId());
    }
};</p>
<p>Closing Tabs
function closeTab(model: Model, tabId: string) {
    model.doAction(Actions.deleteTab(tabId));
}</p>
<p>function closeAllTabs(model: Model) {
    const tabsets = model.getRoot().getChildren();
    tabsets.forEach(tabset => {
        if (tabset.getType() === 'tabset') {
            const tabs = tabset.getChildren();
            tabs.forEach(tab => {
                if (tab.getType() === 'tab') {
                    model.doAction(Actions.deleteTab(tab.getId()));
                }
            });
        }
    });
}</p>
<p>Tab Context and Props
Passing Data to Components
interface EditorTabProps {
    node: TabNode;
}</p>
<p>function EditorTab({ node }: EditorTabProps) {
    const filepath = node.getConfig()?.filepath as string;
    const readonly = node.getConfig()?.readonly as boolean;</p>
<pre class="codehilite"><code>return (
    <div>
        <p>Editing: {filepath}</p>
        <textarea readOnly={readonly} />
    </div>
);
</code></pre>

<p>}</p>
<p>// Factory with data passing
const factory = (node: TabNode) => {
    const component = node.getComponent();</p>
<pre class="codehilite"><code>switch (component) {
    case 'editor':
        return <EditorTab node={node} />;
    default:
        return <div>Unknown</div>;
}
</code></pre>

<p>};</p>
<p>// Create tab with config
const newTab: IJsonTabNode = {
    type: 'tab',
    name: 'my-file.ts',
    component: 'editor',
    config: {
        filepath: '/src/my-file.ts',
        readonly: false,
    }
};</p>
<p>Accessing Tab State
function SmartPanel({ node }: { node: TabNode }) {
    const name = node.getName();
    const isActive = node.isSelected();
    const isVisible = node.isVisible();</p>
<pre class="codehilite"><code>return (
    <div className={isActive ? 'active' : 'inactive'}>
        <h3>{name}</h3>
        {isVisible && <p>This tab is visible</p>}
    </div>
);
</code></pre>

<p>}</p>
<p>Styling and Theming
Custom CSS
/<em> Override FlexLayout styles </em>/
.flexlayout__layout {
    background: #1e1e1e;
}</p>
<p>.flexlayout__tab {
    background: #2d2d2d;
    color: #cccccc;
}</p>
<p>.flexlayout__tab:hover {
    background: #3e3e3e;
}</p>
<p>.flexlayout__tab_button--selected {
    background: #1e1e1e;
    border-bottom: 2px solid #007acc;
}</p>
<p>.flexlayout__splitter {
    background: #2d2d2d;
}</p>
<p>.flexlayout__splitter:hover {
    background: #007acc;
}</p>
<p>Dark/Light Theme Toggle
import 'flexlayout-react/style/dark.css';
// or
import 'flexlayout-react/style/light.css';</p>
<p>function ThemeToggle() {
    const [theme, setTheme] = useState<'dark' | 'light'>('dark');</p>
<pre class="codehilite"><code>useEffect(() => {
    // Dynamically load theme
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = `flexlayout-react/style/${theme}.css`;
    document.head.appendChild(link);

return () => {
        document.head.removeChild(link);
    };
}, [theme]);

return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Toggle Theme
    </button>
);
</code></pre>

<p>}</p>
<p>Integration with Tauri
Persisting Layout to Tauri Backend
import { invoke } from '@tauri-apps/api/core';</p>
<p>async function saveLayoutToTauri(model: Model) {
    const json = model.toJson();
    await invoke('save_layout', {
        layout: JSON.stringify(json)
    });
}</p>
<p>async function loadLayoutFromTauri(): Promise<Model> {
    const layout = await invoke<string>('load_layout');
    return Model.fromJson(JSON.parse(layout));
}</p>
<p>// Tauri command (Rust)
// #[tauri::command]
// async fn save_layout(layout: String) -> Result<(), String> {
//     let app_dir = app.path_resolver().app_data_dir()?;
//     let layout_file = app_dir.join("layout.json");
//     tokio::fs::write(layout_file, layout).await?;
//     Ok(())
// }</p>
<p>Window-Specific Layouts
import { invoke } from '@tauri-apps/api/core';
import { getCurrent } from '@tauri-apps/api/window';</p>
<p>function WindowLayout() {
    const [model, setModel] = useState<Model | null>(null);</p>
<pre class="codehilite"><code>useEffect(() => {
    const currentWindow = getCurrent();
    const windowLabel = currentWindow.label;

// Load layout for this specific window
    invoke<string>('load_window_layout', { windowLabel })
        .then(layout => {
            setModel(Model.fromJson(JSON.parse(layout)));
        })
        .catch(() => {
            setModel(Model.fromJson(defaultLayout));
        });
}, []);

const onModelChange = (newModel: Model) => {
    const currentWindow = getCurrent();
    const json = newModel.toJson();

invoke('save_window_layout', {
        windowLabel: currentWindow.label,
        layout: JSON.stringify(json)
    });
};

if (!model) return <div>Loading...</div>;

return (
    <Layout
        model={model}
        factory={factory}
        onModelChange={onModelChange}
    />
);
</code></pre>

<p>}</p>
<p>Advanced Patterns
Custom Tab Headers
import { Layout, Model, TabNode, ITabRenderValues } from 'flexlayout-react';</p>
<p>function App() {
    const onRenderTab = (
        node: TabNode,
        renderValues: ITabRenderValues
    ) => {
        const modified = node.getConfig()?.modified as boolean;</p>
<pre class="codehilite"><code>    renderValues.content = (
        <div className="custom-tab-header">
            <span>{node.getName()}</span>
            {modified && <span className="modified-indicator">●</span>}
        </div>
    );
};

return (
    <Layout
        model={model}
        factory={factory}
        onRenderTab={onRenderTab}
    />
);
</code></pre>

<p>}</p>
<p>Tab Actions (Custom Buttons)
const onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
    renderValues.buttons.push(
        <button
            key="save"
            onClick={() => saveTabContent(node)}
            title="Save"
        >
            💾
        </button>
    );</p>
<pre class="codehilite"><code>renderValues.buttons.push(
    <button
        key="duplicate"
        onClick={() => duplicateTab(node)}
        title="Duplicate"
    >
        📋
    </button>
);
</code></pre>

<p>};</p>
<p>Best Practices
Persist layouts - Save to localStorage or backend for user experience
Use unique component names - Avoid collisions in factory function
Handle missing components - Factory should have default case
Memoize factory function - Prevent unnecessary re-renders
Use config for tab data - Store tab-specific props in config
Provide reset mechanism - Users can restore default layout
Test layout changes - Verify persistence works correctly
Handle edge cases - Empty tabsets, deleted components
Use borders wisely - Left/right/top/bottom for tools, main area for content
Optimize large layouts - Lazy-load components when possible
Common Pitfalls</p>
<p>❌ Not memoizing model:</p>
<p>// WRONG - creates new model on every render
function App() {
    const model = Model.fromJson(layout);  // Bad!
    return <Layout model={model} />;
}</p>
<p>// CORRECT
function App() {
    const modelRef = useRef(Model.fromJson(layout));
    return <Layout model={modelRef.current} />;
}</p>
<p>❌ Forgetting CSS import:</p>
<p>// WRONG - layout won't display correctly
import { Layout } from 'flexlayout-react';
// Missing: import 'flexlayout-react/style/dark.css';</p>
<p>❌ Not handling onModelChange:</p>
<p>// WRONG - layout changes not persisted
<Layout model={model} factory={factory} /></p>
<p>// CORRECT
<Layout
    model={model}
    factory={factory}
    onModelChange={saveLayout}
/></p>
<p>Resources
Documentation: https://github.com/caplin/FlexLayout
Examples: https://rawgit.com/caplin/FlexLayout/demos/demos/index.html
TypeScript Types: Included in package
Related Sub-Skills
state-machine: XState v5 state machines and actor model for complex UI logic, multi-step forms, async flows
Summary
FlexLayout provides IDE-quality docking layouts
Model-driven - Define layout as JSON, control programmatically
Persistent - Save/restore user layouts easily
Customizable - Custom tabs, borders, themes
React-friendly - Hooks, TypeScript support
Perfect for - IDEs, dashboards, admin panels, complex UIs
Tauri integration - Persist to backend, window-specific layouts
Related Skills</p>
<p>When using React, these skills enhance your workflow:</p>
<p>tanstack-query: Server-state management for React apps with caching and refetching
zustand: Lightweight client-state management alternative to Redux
nextjs: React framework with SSR, routing, and full-stack capabilities
test-driven-development: TDD patterns for React components and hooks</p>
<p>[Full documentation available in these skills if deployed in your bundle]</p>
                </article>

<a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a>
            </div>

<aside class="sidebar">
                <section class="related-skills" id="relatedSkillsSection">
                    <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2>
                    <div class="related-list" id="relatedSkillsList">
                        
                            
                            
                            
                            <a href="/fr/skill/bobmatnyc/claude-mpm-skills/drizzle-orm" class="related-card">
                                <div class="related-name">drizzle-orm</div>
                                <div class="related-meta">
                                    <span class="related-owner">bobmatnyc</span>
                                    <span class="related-installs">2K</span>
                                </div>
                                <div class="related-desc">Drizzle ORM  Modern TypeScript-first ORM with zero dependenc...</div>
                            </a>
                            
                            
                            
                            <a href="/fr/skill/bobmatnyc/claude-mpm-skills/pydantic" class="related-card">
                                <div class="related-name">pydantic</div>
                                <div class="related-meta">
                                    <span class="related-owner">bobmatnyc</span>
                                    <span class="related-installs">1.7K</span>
                                </div>
                                <div class="related-desc">Pydantic Validation Skill Summary  Python data validation us...</div>
                            </a>
                            
                            
                            
                            <a href="/fr/skill/bobmatnyc/claude-mpm-skills/playwright-e2e-testing" class="related-card">
                                <div class="related-name">playwright-e2e-testing</div>
                                <div class="related-meta">
                                    <span class="related-owner">bobmatnyc</span>
                                    <span class="related-installs">1.5K</span>
                                </div>
                                <div class="related-desc">Playwright E2E Testing Skill progressive_disclosure: entry_p...</div>
                            </a>
                            
                            
                            
                            <a href="/fr/skill/bobmatnyc/claude-mpm-skills/tailwind-css" class="related-card">
                                <div class="related-name">tailwind-css</div>
                                <div class="related-meta">
                                    <span class="related-owner">bobmatnyc</span>
                                    <span class="related-installs">791</span>
                                </div>
                                <div class="related-desc">Tailwind CSS Skill progressive_disclosure: entry_point: - su...</div>
                            </a>
                            
                            
                            
                            <a href="/fr/skill/bobmatnyc/claude-mpm-skills/trpc-type-safety" class="related-card">
                                <div class="related-name">trpc-type-safety</div>
                                <div class="related-meta">
                                    <span class="related-owner">bobmatnyc</span>
                                    <span class="related-installs">701</span>
                                </div>
                                <div class="related-desc">tRPC - End-to-End Type Safety progressive_disclosure: entry_...</div>
                            </a>
                            
                            
                            
                            <a href="/fr/skill/bobmatnyc/claude-mpm-skills/pytest" class="related-card">
                                <div class="related-name">pytest</div>
                                <div class="related-meta">
                                    <span class="related-owner">bobmatnyc</span>
                                    <span class="related-installs">544</span>
                                </div>
                                <div class="related-desc">pytest - Professional Python Testing Overview  pytest is the...</div>
                            </a>
                            
                        
                    </div>
                </section>

</aside>
        </div>
    </div>

// Load language files (only current + fallback for performance)
        async function loadLanguageResources() {
            const savedLang = localStorage.getItem('i18nextLng') || 'en';
            const langsToLoad = new Set([savedLang, 'en']); // current + fallback
            await Promise.all([...langsToLoad].map(async (lang) => {
                try {
                    const response = await fetch(`/locales/${lang}.json`);
                    if (response.ok) {
                        resources[lang] = { translation: await response.json() };
                    }
                } catch (error) {
                    console.warn(`Failed to load ${lang} language file:`, error);
                }
            }));
        }

// Load a single language on demand (for language switching)
        async function loadLanguage(lang) {
            if (resources[lang]) return;
            try {
                const response = await fetch(`/locales/${lang}.json`);
                if (response.ok) {
                    resources[lang] = { translation: await response.json() };
                    i18next.addResourceBundle(lang, 'translation', resources[lang].translation);
                }
            } catch (error) {
                console.warn(`Failed to load ${lang} language file:`, error);
            }
        }

// Initialize i18next
        async function initI18n() {
            try {
                await loadLanguageResources();
                
                // Filter out null values from resources
                const validResources = {};
                for (const [lang, data] of Object.entries(resources)) {
                    if (data !== null) {
                        validResources[lang] = data;
                    }
                }
                
                console.log('Loaded languages:', Object.keys(validResources));
                console.log('zh-CN resource:', validResources['zh-CN']);
                console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home);
                
                // 检查是否有保存的语言偏好
                const savedLang = localStorage.getItem('i18nextLng');
                // 如果没有保存的语言偏好，默认使用英文
                const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) 
                    ? savedLang 
                    : 'en';
                
                await i18next
                    .use(i18nextBrowserLanguageDetector)
                    .init({
                        lng: defaultLang,  // 强制设置初始语言
                        fallbackLng: 'en',
                        supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'],
                        resources: validResources,
                        detection: {
                            order: ['localStorage'],  // 只使用 localStorage，不检测浏览器语言
                            caches: ['localStorage'],
                            lookupLocalStorage: 'i18nextLng'
                        },
                        interpolation: {
                            escapeValue: false
                        }
                    });

console.log('i18next initialized, language:', i18next.language);
                console.log('Test translation:', i18next.t('detail.home'));

// Set initial language in selector
                const langSwitcher = document.getElementById('langSwitcher');
                langSwitcher.value = i18next.language;

// Update page language
                updatePageLanguage();

// Language switch event
                langSwitcher.addEventListener('change', async (e) => {
                    await loadLanguage(e.target.value); // load on demand
                    i18next.changeLanguage(e.target.value).then(() => {
                        updatePageLanguage();
                        localStorage.setItem('i18nextLng', e.target.value);
                    });
                });
            } catch (error) {
                console.error('i18next init failed:', error);
            }
        }

// Translation helper
        function t(key, options = {}) {
            return i18next.t(key, options);
        }

// Update all translatable elements
        function updatePageLanguage() {
            // Update HTML lang attribute
            document.documentElement.lang = i18next.language;

// Update elements with data-i18n attribute
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                el.textContent = t(key);
            });
        }

// Copy command function
        function copyCommand() {
            const command = document.getElementById('installCommand').textContent;
            const btn = document.getElementById('copyBtn');
            
            navigator.clipboard.writeText(command).then(() => {
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            }).catch(() => {
                // Fallback for non-HTTPS
                const textArea = document.createElement('textarea');
                textArea.value = command;
                textArea.style.position = 'fixed';
                textArea.style.left = '-9999px';
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            });
        }

// Initialize
        document.getElementById('copyBtn').addEventListener('click', copyCommand);
        initI18n();

// 异步加载相关 Skills
        async function loadRelatedSkills() {
            const owner = 'bobmatnyc';
            const skillName = 'flexlayout-react';
            const currentLang = 'fr';
            const listContainer = document.getElementById('relatedSkillsList');
            const section = document.getElementById('relatedSkillsSection');

try {
                const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`);
                
                if (!response.ok) {
                    throw new Error('Failed to load');
                }

const data = await response.json();
                const relatedSkills = data.related_skills || [];

if (relatedSkills.length === 0) {
                    // 没有相关推荐时隐藏整个区域
                    section.style.display = 'none';
                    return;
                }

// 渲染相关 Skills
                listContainer.innerHTML = relatedSkills.map(skill => {
                    const desc = skill.description || '';
                    const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
                    return `
                        <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card fade-in">
                            <div class="related-name">${escapeHtml(skill.skill_name)}</div>
                            <div class="related-meta">
                                <span class="related-owner">${escapeHtml(skill.owner)}</span>
                                <span class="related-installs">${skill.installs}</span>
                            </div>
                            <div class="related-desc">${escapeHtml(truncatedDesc)}</div>
                        </a>
                    `;
                }).join('');

} catch (error) {
                console.error('Failed to load related skills:', error);
                // 加载失败时显示提示或隐藏
                listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>';
            }
        }

// HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

// 页面加载完成后异步加载相关 Skills
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadRelatedSkills);
        } else {
            loadRelatedSkills();
        }

</script>

</body>
</html>

安装

File Explorer