La plateforme Cnblogs offre une grande flexibilité permettant aux utilisateurs de modifier l'apparence de leur blog. En activant les permissions pour les scripts JavaScript et en injectant des feuilles de style CSS personnalisées, il est possible de transformer radicalement l'interface utilisateur par défaut. L'une des solutions les plus robustes pour y parvenir est l'utilisation du thème SimpleMemory.

Procédure de configuration initiale

Avant d'appliquer les modifications esthétiques, assurez-vous d'avoir configuré les options suivantes dans les paramètres de votre administration Cnblogs :

• Cochez l'option "Annonce" (Announcements).
• Sélectionnez le modèle de peau (skin) SimpleMemory.
• Demnadez l'autorisation d'exécuter du code JS si ce n'est pas déjà fait.

Intégration du CSS personnalisé

Pour appliquer les styles du thème, il est recommadné d'utiliser une importation externe via un CDN pour garantir des temps de chargement optimaux et une maintenance simplifiée. Dans la zone "Page Custom CSS", insérez le code suivant :

/* Importation de la feuille de style via CDN */
@import url("https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@2.1.0/dist/simpleMemory.css");

/* Assurez-vous de cocher l'option 'Désactiver le CSS par défaut du modèle' */

Configuration du moteur JavaScript

La logique du thème repose sur un objet de configuration global nommé window.cnblogsConfig. Ce script doit être placé dans la section dédiée aux annonces du panneau latéral (Sidebar). Il permet de définir l'identité visuelle, les bannières dynamiques et les animations.

<script type="text/javascript">
    window.cnblogsConfig = {
        // Chargement d'icônes personnalisées
        fontIconExtend: "//at.alicdn.com/t/c/font_3603036_keyavmcqbhn.css",
        
        info: {
            name: 'DevTech_User', // Votre pseudonyme
            startDate: '2023-01-01', // Date de création du blog
            avatar: 'https://votre-image-cdn.com/profil.png', 
            blogIcon: 'https://votre-image-cdn.com/favicon.ico',
        },
        
        sidebar: {
            infoBackground: 'https://votre-image-cdn.com/header-bg.jpg',
            titleMsg: 'Bienvenue sur mon espace de veille technique !',
            navList: [
                ['GitHub', 'https://github.com/votre-compte', 'icon-github'],
                ['Archives', 'https://www.cnblogs.com/votre-nom/p/', 'icon-archive'],
            ],
        },
        
        banner: {
            home: {
                // Slogans aléatoires pour la page d'accueil
                title: [
                    'Le code est un art fonctionnel.',
                    'Automatiser pour mieux créer.',
                    'L’apprentissage continu est la clé.'
                ],
                background: [
                    "https://votre-image-cdn.com/wallpaper1.jpg",
                    "https://votre-image-cdn.com/wallpaper2.jpg"
                ],
            },
        },
        
        // Comportement de l'onglet du navigateur
        title: {
            onblur: 'Ne partez pas ! 💻',
        },
        
        // Configuration du pied de page
        footer: {
            style: 2,
            text: {
                left: 'Optimisé avec SimpleMemory v2.1.0',
            },
        },
        
        // Activation des composants d'animation
        animate: {
            homeBanner: {
                enable: true,
                options: {
                    radius: 12,
                }
            },
            articleTitle: { enable: true },
            articleBanner: { enable: true },
            background: { enable: false },
            mouse: { enable: false }
        }
    };

    // Configuration spécifique pour la page de liens
    window.cnblogsConfig.links = {
        page: [
            {
                name: 'Documentation Thème',
                introduction: 'Ressources pour SimpleMemory',
                avatar: 'https://votre-image-cdn.com/logo.png',
                url: 'https://bndong.github.io/Cnblogs-Theme-SimpleMemory/'
            }
        ]
    };
</script>

<!-- Chargement du script principal (doit correspondre à la version CSS) -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

Gestion des ressources statiques

Pour assurer la pérennité de votre design, il est conseillé de suivre ces bonnes pratiques concernant les fichiers multimédias :

• Hébergement : Utilisez des dépôts GitHub combinés à un service comme jsDelivr pour servir vos images et scripts comme un CDN.
• Versionnage : Veillez à ce que la version du fichier JavaScript (simpleMemory.js) corresponde exactement à celle de la feuille de style CSS pour éviter les conflits de rendu.
• Optimisation : Compressez vos images de bannière pour ne pas ralentir le rendu initial de la page (Lighthouse score).