My CNBlog

CNBlog设置记录

目录

• CNBlog设置记录
  • 基本配置
  • 页面定制CSS代码
  • 侧边栏公告HTML

参考link

基本配置

• 博客皮肤：Custom
• JS权限开启
• 选项中公告开启

页面定制CSS代码

• 禁用模板默认CSS
• 使用CSS代码--loading动画1

HTML

<div id="loading"><div class="loader-inner"></div></div>

CSS

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    imagebox: {
      enable: true,
    },
    signature: {
      enable: true,
      contents: [
      "<b style='color:#00F5FF'>loading</b> <b style='color:#9AFF9A'>...</b>",
      "<b style='color:#00ff95'>printf(\"</b> <b style='color:#00e1ff'>Hello World!\\n</b> <b style='color:#00ff95'>\");</b>",
      "<b style='color:#00e1ff'>Hello World!</b>",
      "<b style='color:#FFFF00'>⏲@_@💻</b>",
      ],
    },
    theme: {
      name: 'geek',
      avatar: 'https://s3.bmp.ovh/imgs/2022/03/cc2463984647e730.jpg',
    },
    bodyBackground: {
      enable: true,
      value:
          'https://i.bmp.ovh/imgs/2022/03/01a6a570466c8742.jpg',
      opacity: 0.85,
      repeat: false,
    },
    emoji: {
      enable: true,
      showRecents: true,
      recentsCount: 20,
      showPreview: true,
      showSearch: true,
    },
    topProgress: {
      enable: true,
      page: 'all',
      agent: 'pc',
      background: '#00F5FF',
      height: '5px',
    },
    postSignature: {
      enable: false,
      enableLicense: false,
      content: ['这是一条自定义内容', '这是一条自定义内容'],
      licenseName: '',
      licenseLink: '',
    },
    // github图标
    github: {
        enable: true,
        color: '#ffb3cc',
        url: 'https://github.com/Milliwhat',
    },
    // 码云图标
    gitee: {
        enable: true,
        color: '#C71D23',
        url: 'https://gitee.com/milli',
    },
  })
</script>

• 使用CSS代码--loading动画2

HTML

<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit w1 leo"></div>
        <div class="white-orbit w2 leo"></div>
        <div class="white-orbit w3 leo"></div>
    </div>
</div>

CSS

@keyframes spin3D {
    from {
        transform: rotate3d(0.5, 0.5, 0.5, 360deg);
    }
    to {
        transform: rotate3d(0deg);
    }
}
#loading {
    height: 100%;
    background-color: #1d2630;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 99999999;
}
.spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.leo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.blue-orbit {
    width: 165px;
    height: 165px;
    border: 1px solid #91daffa5;
    animation: spin3D 3s linear 0.2s infinite;
}
.green-orbit {
    width: 120px;
    height: 120px;
    border: 1px solid #91ffbfa5;
    animation: spin3D 2s linear 0s infinite;
}
.red-orbit {
    width: 90px;
    height: 90px;
    border: 1px solid #ffca91a5;
    animation: spin3D 1s linear 0s infinite;
}
.white-orbit {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    animation: spin3D 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);
}

侧边栏公告HTML

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    imagebox: {
      enable: true,
    },
    signature: {
      enable: true,
      contents: [
      "<b style='color:#00F5FF'>loading</b> <b style='color:#9AFF9A'>...</b>",
      "<b style='color:#00ff95'>printf(\"</b> <b style='color:#00e1ff'>Hello World!\\n</b> <b style='color:#00ff95'>\");</b>",
      "<b style='color:#00e1ff'>Hello World!</b>",
      "<b style='color:#FFFF00'>⏲@_@💻</b>",
      ],
    },
    theme: {
      name: 'geek',
      avatar: 'https://s3.bmp.ovh/imgs/2022/03/cc2463984647e730.jpg',
    },
    bodyBackground: {
      enable: true,
      value:
          'https://i.bmp.ovh/imgs/2022/03/01a6a570466c8742.jpg',
      opacity: 0.85,
      repeat: false,
    },
    emoji: {
      enable: true,
      showRecents: true,
      recentsCount: 20,
      showPreview: true,
      showSearch: true,
    },
    topProgress: {
      enable: true,
      page: 'all',
      agent: 'pc',
      background: '#00F5FF',
      height: '5px',
    },
    postSignature: {
      enable: false,
      enableLicense: false,
      content: ['这是一条自定义内容', '这是一条自定义内容'],
      licenseName: '',
      licenseLink: '',
    },
    // github图标
    github: {
        enable: true,
        color: '#ffb3cc',
        url: 'https://github.com/Milliwhat',
    },
    // 码云图标
    gitee: {
        enable: true,
        color: '#C71D23',
        url: 'https://gitee.com/milli',
    },
  })
</script>