This guide details the process of customizing a CSDN blog using the awescnb library. The folowing steps will help you replicate a similar setup.

1. Blog SkinThe base skin used is "SimpleMemory". Ensure you have enabled JavaScript permissions for your blog to alow custom scripts to run.

2. Sidebar ConfigurationAdd the following script to your blog's sidebar. This script initializes the awescnb library with custom settings.

   <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
   <script>
     $.awesCnb({
       configuration: {
         visuals: {
           themeName: 'custom',
           profileImage: '{your_avatar_url}',
           headerImage: 'https://i.ibb.co/pJnrPdH/350.jpg',
         },
         personalInfo: {
           welcomeMessage: [
             "Welcome to my personal space",
           ],
         },
         uiControls: {
           toolsEnabled: true,
           toolsInitiallyOpen: true,
           toolsDraggable: false,
         },
         notifications: {
           enabled: true,
           message: ['Hello!'],
         },
         security: {
           enabled: true,
           background: 'https://pic.cnblogs.com/avatar/2165871/20210221123040.png',
           messages: [
             '<i>Built with</i> webpack.',
             '&amp; Theme in awescnb',
             'Hello',
           ],
         },
         socialLinks: {
           github: {
             show: true,
             color: '#ffb3cc',
             url: '{your_github_url}',
           },
           gitee: {
             show: true,
             color: '#C71D23',
             url: '{your_gitee_url}',
           },
         },
         syntaxHighlighting: {
           darkTheme: 'monokai',
           lightTheme: 'github',
         },
         navigation: {
           showLineNumbers: true,
           showCatalog: true,
           catalogPosition: 'left',
         },
         uiControls: {
           showProgressBar: true,
           progressBarPage: 'all',
           progressBarAgent: 'pc',
           progressBarBackground: '#FFB3CC',
           progressBarHeight: '5px',
         },
         themeToggle: {
           darkModeEnabled: true,
           autoDark: false,
           autoLight: true,
         },
         interactiveEffects: {
           clickEffectsEnabled: false,
           clickColors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
           clickSize: 30,
           clickMaxCount: 50,
         },
         characterModel: {
           enabled: false,
           model: 'tororo',
           width: 150,
           height: 200,
           position: 'left',
           gap: 'default',
         },
       }
     });
   </script>
   
   

3. Custom CSSIn the "Page Custom CSS" section, disable the default template CSS and add the following code to create a custom loading screen.

   @keyframes rotateSphere {
     from {
       transform: rotate3d(0.5, 0.5, 0.5, 360deg);
     }
     to {
       transform: rotate3d(0deg);
     }
   }
   #preloader {
     height: 100%;
     background-color: #2c3e50;
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     overflow: hidden;
     z-index: 99999999;
   }
   .loader-container {
     width: 250px;
     height: 250px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: transparent;
   }
   .orbit {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
   }
   .blue-orbit {
     width: 140px;
     height: 140px;
     border: 1px solid #3498db;
     animation: rotateSphere 3s linear 0.2s infinite;
   }
   .green-orbit {
     width: 100px;
     height: 100px;
     border: 1px solid #2ecc71;
     animation: rotateSphere 2s linear 0s infinite;
   }
   .red-orbit {
     width: 70px;
     height: 70px;
     border: 1px solid #e74c3c;
     animation: rotateSphere 1s linear 0s infinite;
   }
   .white-orbit {
     width: 50px;
     height: 50px;
     border: 2px solid #ecf0f1;
     animation: rotateSphere 10s linear 0s infinite;
   }
   .w1 {
     transform: rotate3D(1, 1, 1, 90deg);
   }
   .w2 {
     transform: rotate3D(1, 2, 0.5, 90deg);
   }
   .w3 {
     transform: rotate3D(0.5, 1, 2, 90deg);
   }
   
   

4. Header HTMLPlace the following HTML code in the "Header HTML" section to display the loading animatoin.

   <div id="preloader">
     <div class="loader-container">
       <div class="blue-orbit orbit"></div>
       <div class="green-orbit orbit"></div>
       <div class="red-orbit orbit"></div>
       <div class="white-orbit w1 orbit"></div>
       <div class="white-orbit w2 orbit"></div>
       <div class="white-orbit w3 orbit"></div>
     </div>
   </div>
   
   

5. Footer HTMLThe footer HTML section can be left empty.