geek主题存档

页面定制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)}

页首

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

页脚

<!-- @format -->

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    // 基本配置
    theme: {
      name: 'geek',//silence
      title: 'hello',
      avatar: 'https://pic.cnblogs.com/avatar/2288880/20220916151243.png',
      favicon: '',
      headerBackground: 'https://img2023.cnblogs.com/blog/2288880/202302/2288880-20230211191909001-501843196.jpg'
    },
    codeTrafficLight: {
    enable: false
  },
    // 代码高亮
    highLight: {
      enable: true,
    },
    // 代码行号
    lineNumbers: {
      enable: true,
    },
    // github图标
    github: {
      enable: true,
      url: 'https://github.com/exungsh',
    },
    //个性签名
    signature: {
    enable: true,
    contents: [
    "<b>功不唐捐.</b>","<b>知来者之可追.</b>"
    ],
},
    // 图片灯箱
    imagebox: {
      enable: true,
    },
    // 文章目录
    catalog: {
      enable: true,
    },
    // 右下角按钮组
    tools: {
      enable: true,
      initialOpen: false,
    },
    // 点击特效
    click: {
      enable: true,
    },
    // 评论输入框表情
    emoji: {
    enable: true,
    buttonIcon: "🥳",
    emojiList: [
        {
          value: 'https://images.cnblogs.com/cnblogs_com/gshang/1626876/o_2001050555139.png',
          label: '',
        },
        {
            value: '🤣',
            label: '笑哭',
        },
        {
            value: '😃',
            label: '大笑',
        },
        {
            value: '😅',
            label: '苦笑',
        },
        {
            value: '😆',
            label: '斜眼笑',
        },
        {
            value: '😏',
            label: '得意',
        },
        {
            value: '😊',
            label: '微笑',
        },
        {
            value: '😎',
            label: '酷！',
        },
        {
            value: '😍',
            label: '花痴',
        },
        {
            value: '🙂',
            label: '呵呵',
        },
        {
            value: '🤩',
            label: '好崇拜哦',
        },
        {
            value: '🤔',
            label: '思考',
        },
        {
            value: '🙄',
            label: '白眼',
        },
        {
            value: '😜',
            label: '略略略',
        },
        {
            value: '😲',
            label: '呆住',
        },
        {
            value: '😭',
            label: '大哭',
        },
        {
            value: '🤯',
            label: '头炸了',
        },
        {
            value: '😰',
            label: '冷汗',
        },
        {
            value: '😱',
            label: '吓死了',
        },
        {
            value: '🤪',
            label: '略略略',
        },
        {
            value: '😵',
            label: '晕',
        },
        {
            value: '😡',
            label: '愤怒',
        },
        {
            value: '🥳',
            label: '祝贺',
        },
        {
            value: '🤡',
            label: '小丑竟是我',
        },
        {
            value: '🤫',
            label: '嘘~',
        },
        {
            value: '🐒',
            label: '猴',
        },
        {
            value: '🤭',
            label: '笑笑不说话',
        },
        {
            value: '🐂',
            label: '牛',
        },
        {
            value: '🍺',
            label: '啤酒',
        }
      ]
    },
    // 暗色模式
    darkMode: {
      enable: true,
    //   autoDark: false,
    //   autoLight: false,
    },
    // 弹出公告
    notice: {
      enable: true,
      text: ['HEY YOU'],
    },
    // 首页列表图
    indexListImg: {
      enable: false,
    },
    // 顶部加载进度条
    topProgress: {
      enable: true,
    },

    // 弹幕
    barrage: {
      enable: false,
    },

    // 锁屏
    lock: {
      enable: true,
    },
    catalog: {
      enable: true,
      position: 'left',
    },
    links: [
      {
          name: '😎B站主页',
          link: 'https://space.bilibili.com/1474221436',
      },
      {
          name: '👻Github',
          link: 'https://github.com/exungsh',
      },
      {
          name: '🎲逍遥骰',
          link: 'https://exungsh.github.io/index.html'
      }
      // ....
    ],
    postTopimage: {
    enable: true,
    imgs: ['https://img2023.cnblogs.com/blog/2288880/202302/2288880-20230211191909001-501843196.jpg'],
    },
  }
  $.awesCnb(opts)
</script>
<script>
  window.onload = function(){
    let logo = document.querySelector('.logo')
    logo.innerHTML = "Exungsh"
    logo.style.lineHeight = '60px'
  }
</script>
<script>
  // document.documentElement.style.setProperty(`--geek-color-1`, 'rgb(23, 25, 46)');
</script>