博客园 - 2024年10月24日之前使用的主题

 

概览

 

配置

01 || 基本设置

02 || 代码高亮

03 || 侧边栏公告

04 || 页面定制CSS代码

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







/* 行内代码块样式 */
.cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code {
    display: inline!important;
    margin: 0px 4px 0px 4px;
    padding-left: 4px!important;
    padding-right: 4px!important;
    background-color: #ebebeb!important;
    border-radius: 4px!important;
    border: 2px solid black!important;
    overflow-x: auto;
    font-size: 16px!important;
    font-family: 'Fira Code', 'Source Code Pro', Consolas, Monaco, 'Courier New', monospace!important;
    color: rgba(248, 1, 117, 0.898)!important;
    word-break: break-word;
}

/* .cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code {
    color: crimson!important;;
    background-color: rgba(222,222,222,0.3)!important;;
    padding-left: 4px!important;;
    padding-right: 4px!important;;
    font-family: Consolas, "Courier New", Courier, monospace!important;;
    font-size: 110%!important;;
} */





/* 图片不居中 */
#cnblogs_post_body.blogpost-body-html img, #mainContent .cnblogs-markdown img {
    display: flex;
    margin: 0px!important;
    max-width: 100%!important;
    border-radius: 2px;
}

/* body {  
  font-family: "幼圆", sans-serif!important;
  font-size: 16px!important; 
} */

 

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

 

06 || 页脚HTML代码

页脚HTML代码 
 <!-- <script src="https://guangzan.gitee.io/awescnb/index.js"></script> -->
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>

<script>
  const opts = {
    // 主题配置
    theme: {
      // 主题名称
      name: 'geek',
      // 按钮颜色
      color: 'pink',
      // 头像
      // avatar: 'https://images.cnblogs.com/cnblogs_com/blogs/524473/galleries/1577632/t_230508082346_blackRoles.jpg',
    //   avatar: 'https://s3.bmp.ovh/imgs/2024/04/18/3af356eb86823f40.jpg',
    //   avatar: 'https://s3.bmp.ovh/imgs/2024/05/30/d3dcec94c20f60f2.png',
      avatar: 'https://s3.bmp.ovh/imgs/2024/05/30/98550a4ee180c412.png',
      // 头部背景图
      headerBackground: 'https://s3.bmp.ovh/imgs/2024/05/06/804332b707ac93d1.jpg',
    //   headerBackground: 'https://s3.bmp.ovh/imgs/2024/05/06/a74284c2cf198840.jpg',
    //   headerBackground: 'https://s3.bmp.ovh/imgs/2024/04/18/c090d6870ff53235.jpg',
    },

    // 文章目录
    catalog: {
        enable: true,
    },

    // 点击特效
    click: {
        enable: true,
        // colors: ['white','black','gray'],
        colors: ['red','purple','blue','yellow'],
        size: 2,
        maxCount: 288,
    },

    // 个性签名
    signature: {
        enable: true,
        contents: [
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>灯火阑珊丹桂明，<br/>爆竹声声尽乡情。<br/>九州华夏上元日，<br/>驱车一里赏花灯。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>遍寻金秋西湖景，<br/>难叙重游故园情。<br/>悠悠一苇飘荷处，<br/>不觉林深不见鹿。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>大风起兮云飞扬，<br/>胡辣汤浓何人尝？<br/>蓦然回首阑干外，<br/>他乡重逢仅隔墙。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>一声键来十指飞，<br/>沉浸其中魂不归。<br/>一念诗情忽闪现，<br/>归途一路雨霏霏。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>迢迢豫沪间，<br/>秋暑两重天。<br/>清风随雨落，<br/>只影日月牵。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>风闷夏夜冰镇瓜，<br/>吹着空调笑哈哈。<br/>涎游颚下双睛亮，<br/>清凉解口得一夸！</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>一别故土尽三载，<br/>明珠之下深似海。<br/>今朝喜逢八方客，<br/>他日杯酒述情怀。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>何时烟雨落金城，<br/>一人撑伞两人行？<br/>蓦然回首放眼望，<br/>缘是形与影多情。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>抗原自测又核酸，<br/>树欲静兮风静难。<br/>椿萱并茂游子愿，<br/>家与河山两平安。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>晨风匆匆拂短袖，<br/>抗原自测门外留。<br/>辗转归寝神初定，<br/>本命之年沪逢秋。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>满腔热血入魔都，<br/>领略山河已三秋。<br/>一朝卸下千金甲，<br/>杯酒洗尽万两愁。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>陌上花正开，<br/>心中影徘徊。<br/>春风知我意，<br/>杯酒慰将来。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>阡陌花香春入水，<br/>鸟语随风向东流。<br/>艳阳高照轻声语，<br/>恐惊河畔初钓侯。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>霪雨艳阳三月中，<br/>柳絮拂面似凛冬。​<br/>欲学孔某向咸亨，<br/>​奈何两袖尽空空。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>清烟屡屡皆入喉，<br/>浊酒杯杯销我愁。<br/>辗转反侧多烦忧，<br/>乱我心者不可留！</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>虎啸龙吟雨若涛，<br/>气卷残尘上九霄。<br/>今朝若是剑在手，<br/>也敢斩尽天下妖！</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>甲辰三月似逢秋，<br/>雨落金城鸟无休。<br/>烟云缭绕是何故？<br/>一口愁来一口忧。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>夜短昼变长，<br/>有花欲跳墙。<br/>三人出门去，<br/>皆是少年郎。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>摩肩接踵熙熙攘，<br/>明珠入目映辉煌。<br/>黄浦两畔欢声语，<br/>风吹江面慰愁肠。</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>偷得浮生半日闲，<br/>恰逢花好月正圆。<br/>此行若能开心颜，<br/>何惜兜中二两钱？</span>",
            "<span style='font-size:18px;font-style:italic;font-weight:bold;font-family:华文行楷;'>千年古刹百年店，<br/>二八芳颜随处见。<br/>城北至此数十里，<br/>步履悠哉好似仙。</span>",
            "<span style='font-weight:bold;font-size:18px;'>o(*￣▽￣*)ブ ☆</span>",
        ],
    },

    // 背景图片
    bodyBackground: {
        // 是否配置背景
        enable: true,
        // 背景图
        // value: 'https://s3.bmp.ovh/imgs/2024/04/18/8e7afb296b1f0068.jpg',
        // value: 'https://s3.bmp.ovh/imgs/2024/05/06/a74284c2cf198840.jpg',
        value: 'https://s3.bmp.ovh/imgs/2024/05/06/a74284c2cf198840.jpg',
        //  背景透明度
        opacity: 0.90,
        repeat: false,
    },

    // Github图标功能
    github: {
      enable: false,
      color: '#',
      url: '#',
    },

    // 深色模式
    darkMode: {
      enable: true, // 是否启用
      darkDefault: false, // 是否将默认模式设为深色
      autoDark: true, // 夜间自动切换深色模式
      autoLight: true, // 日间自动切换浅色模式

    },
    // Live2D模型
    live2d: {
      enable: true,
      page: 'all',
      agent: 'pc',
      model: 'haru-01',
      width: 150,
      height: 200,
      position: 'left',
      gap: 'default',
    },

    // 表情输入
    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: '啤酒',
            },
            {
                value: '(=・ω・=)',
                label: '',
            },
            {
                value: '(｀・ω・´)',
                label: '',
            },
            {
                value: '(°∀°)ﾉ',
                label: '',
            },
            {
                value: '←_←',
                label: '',
            },
            {
                value: '→_→',
                label: '',
            },
            {
                value: 'Σ(ﾟдﾟ;)',
                label: '',
            },
            {
                value: '(｡･ω･｡)',
                label: '',
            },
            {
                value: '(-_-#)',
                label: '',
            },
        ]
    },
    
  }
  $.awesCnb(opts)
</script>

 

posted @   HOUHUILIN  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
· 博客园 - 用过的博客园主题
· Typora - typora主题样式
· 本博客皮肤
· 博客园美化「详细教程+代码配置」
· 【博客园主题美化】《 那些年换过的主题 - 04 》
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
历史上的今天：
2023-10-24 DW001 - 数据仓库理论知识
点击右上角即可分享
微信分享提示
AI IDE Trae