Live2D Character Integration for MkDocs Sites¶

Adding animated characters to MkDocs documentation sites can enhance user engagement and create memorable experiences. This guide covers implementation methods and best practices.

Implementation Options¶

Method 1: Direct Integration¶

# mkdocs.yml
extra_javascript:
  - https://unpkg.com/live2d-widget@3.x/lib/L2Dwidget.min.js
  - javascripts/live2d-init.js

Method 2: Custom Plugin¶

Create a custom MkDocs plugin for better integration:

# live2d_plugin.py
from mkdocs.plugins import BasePlugin

class Live2DPlugin(BasePlugin):
    def on_post_build(self, config):
        # Add Live2D assets and configuration
        pass

Configuration Examples¶

Basic Setup¶

// live2d-init.js
L2Dwidget.init({
    "model": {
        "jsonPath": "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json"
    },
    "display": {
        "position": "right",
        "width": 150,
        "height": 200
    },
    "mobile": {
        "show": false
    }
});

Advanced Features¶

Time-based messages
Interactive responses
Mobile optimization
Performance considerations

Best Practices¶

Performance: Load characters after critical content
Mobile: Consider disabling on mobile devices
Accessibility: Ensure characters don't interfere with navigation
User Control: Provide options to disable characters

Live2D integration can significantly improve user engagement when implemented thoughtfully.