自用博客园皮肤配置

页面自定义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 .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)}

博客侧边栏公告

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  $.awesCnb({
    theme: {
      name: 'geek',
      avatar: 'https://pic.cnblogs.com/avatar/2174121/20201006194007.png',
      headerBackground: 'https://guohaomeng.gitee.io/cnblog/image/002.jpg'
    },
    imagebox: {
      enable: true,
    },
    darkMode: {
      enable: true,
      autoDark: true,
      autoLight: true
    },
    signature: {  //个性签名
      enable: true,
      contents: [
        "这是一条完全没有个性的<b style='color:#ff6b81'>个性签名</b>.",
        "<b>console.log(🍺);</b>",
      ],
    },
    qrcode: {   //二维码
      enable: false,
      img: '',
      desc: '',
    },
    bodyBackground: {   //背景
      enable: false,
      value:    //图片链接或颜色值
        'https://guohaomeng.gitee.io/cnblog/image/background/wallhaven-2em38y.jpg',
      opacity: 0.85,
      repeat: false,
    },
    notice: {    //自定义通知
      enable: true,
      text: ['你好呀>_<'],
    },
    lock: {   //博客锁屏
      enable: true,
      background: 'https://guohaomeng.gitee.io/cnblog/image/background/wallhaven-xle22d.jpg',
      strings: [
        '你好呀~',
        '这是博客的锁屏界面',
        '点击右上角 🔑 解锁哦',
      ],

    },
    emoji: {    //表情输入
      enable: true,
      showRecents: true,  //是否展示最近使用
      recentsCount: 20,   //展示最近使用的个数
      showPreview: true,  //是否预览表情
      showSearch: true,   //是否展示搜索框
    },
    live2d: {    //live2d看板娘
      enable: false,
      page: 'all',
      agent: 'pc',
      model: 'haru-01', //选择模型
      width: 150,
      height: 200,
      position: 'left',
      gap: 'default',
    },
    musicPlayer: {    //音乐播放器
      enable: false,  //获取音乐链接以及歌词：https://music.liuzhijin.cn/
      autoplay: false,
      lrc: {
        enable: true,        // 启用歌词
        type: 1,             // 歌词类型  1 -> 字符串 3 -> url
        color: '#10ac84',    // 颜色
      },
      audio: [
        {
          name: '404 not found',
          artist: 'REOL',
          url:
            'http://music.163.com/song/media/outer/url?id=436016480.mp3',
          cover:
            'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
          lrc:
            "",
        },
      ],
    },
    github: {
      enable: true,
      color: '#ffb3cc',
      url: 'https://github.com/guohaomeng/',
    },
    catalog: {  //随笔目录
      enable: true,
      position: 'left',
    },
    tools: {  //按钮工具
      enable: true,
      initialOpen: true,
    },
    barrage: {  //弹幕
      enable: false,
      opacity: 0.6,
      colors: [],
      barrages: [],
      indexBarrages: [],
      postPageBarrages: [],
    },
    //markdown画笔
    notation: {
      enable: true,
    },
    // 顶部加载进度条
    topProgress: {
      enable: true,
      page: 'all',
      agent: 'pc',
      background: '#FFB3CC',
      height: '5px',
    },
    // 自定义链接链接
    links: [
      {
        name: '自定义链接',
        link: '',
      },
    ],
    //随笔头图
    postTopimage: {
      enable: true,
      imgs: [],
    },
  })
</script>

<script src="https://cdn.jsdelivr.net/gh/guohaomeng/live2d-widget@1.0.0/autoload.js"></script>
<script>
  $(document).ready(function(){
  $( ".custom-searchbar" ).attr( "placeholder" , "在此键入以搜索" );
  $( "#q" ).attr( "placeholder" , "在此键入以搜索" );
  $("#cnblog-nav h3").html("菜单");
  $(".favourite h3").html("收藏");
  $(".fa-lg").css("font-size","1em");
});
</script>
<script language="javascript">
  function printdiv(printpage) {
      var headstr = '<html><head><title>meng</title></head><body>';
      var footstr = "</body>";
      var newstr = document.getElementsByClassName(printpage)[0].innerHTML;
      var oldstr = document.body.innerHTML;
      document.body.innerHTML = headstr + newstr + footstr;

      console.log(headstr + newstr + footstr)
      window.print();
      document.body.innerHTML = oldstr;
      return false;
  }
  console.log("div打印功能加载完成")
</script>

页首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>

页脚html代码

无