在博客园中美化博客,并使用自定义的主题

一、开通博客园 JS 权限

这部分不再赘述,可以点击下方链接,查看如何申请

博客园 JS 权限申请

二、在博客园中设置相关内容

  1. 打开你的博客首页 -> 管理 -> 设置

    导航栏

  2. 设置博客皮肤为 “Custom”

    博客皮肤设置

  3. 勾选禁用默认CSS样式

    禁用模板默认CSS

三、在博客园设置中粘贴相应代码

此部分代码粘贴到【页面定制CSS】

#loading{background:#000;background:radial-gradient(#222,#000);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:99999}.loader-inner{bottom:0;height:60px;left:0;margin:auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap{animation:spin 2s cubic-bezier(0.175,0.885,0.32,1.275) infinite;box-sizing:border-box;height:50px;left:0;overflow:hidden;position:absolute;top:0;transform-origin:50% 100%;width:100px}.loader-line{border:4px solid transparent;border-radius:100%;box-sizing:border-box;height:100px;left:0;margin:0 auto;position:absolute;right:0;top:0;width:100px}.loader-line-wrap:nth-child(1){animation-delay:-50ms}.loader-line-wrap:nth-child(2){animation-delay:-0.1s}.loader-line-wrap:nth-child(3){animation-delay:-150ms}.loader-line-wrap:nth-child(4){animation-delay:-0.2s}.loader-line-wrap:nth-child(5){animation-delay:-250ms}.loader-line-wrap:nth-child(1) .loader-line{border-color:#ea4747;height:90px;width:90px;top:7px}.loader-line-wrap:nth-child(2) .loader-line{border-color:#eaea47;height:76px;width:76px;top:14px}.loader-line-wrap:nth-child(3) .loader-line{border-color:#47ea47;height:62px;width:62px;top:21px}.loader-line-wrap:nth-child(4) .loader-line{border-color:#47eaea;height:48px;width:48px;top:28px}.loader-line-wrap:nth-child(5) .loader-line{border-color:#4747ea;height:34px;width:34px;top:35px}@keyframes spin{0%,15%{transform:rotate(0)}100%{transform:rotate(360deg)}}

此部分代码粘贴到【页首HTML】

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

此部分代码粘贴到【页脚HTML】

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>


<!-- @format -->

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    // 基本配置
    theme: {
      //博客主题(可切换)
      name: 'geek',
      color: '#FFB3CC',
      //标题
      title: '',
      //头像
      avatar: '',
      //网站图标
      favicon: '',
      
      headerBackground: 'https://s1.ax1x.com/2023/08/22/pPJr6OS.jpg'
    },
    // 代码高亮
    highLight: {
      enable: true,
    },
    // 代码行号
    lineNumbers: {
      enable: true,
    },
    // github图标
    github: {
      enable: true,
      url: '',
    },
    // 码云图标
    gitee: {
      enable: false,
      url: '',
    },
    // 图片灯箱
    imagebox: {
      enable: true,
    },
    // 文章目录
    catalog: {
      enable: true,
      position: 'right',
    },
    // 右下角按钮组
    tools: {
      enable: true,
      initialOpen: false,
    },
    // live2d模型
    live2d: {
      enable: true,
      page: 'all',
      agent: 'pc',
      model: 'haru-01',
      width: 150,
      height: 200,
      position: 'left',
      gap: '38px',
    },
    // 点击特效
    click: {
      enable: true,
      auto: false,
      colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
      size: 30,
      maxCount: 50,
    },
    // 评论输入框表情
    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: '',
         },
      ]
    },
    // 暗色模式
    darkMode: {
      enable: true,
      autoDark: false,
      autoLight: false,
    },
    // 音乐播放器
    musicPlayer: {
      enable: true,
      autoplay: false,
      lrc: {
        enable: true,        // 启用歌词
        type: 1,             // 歌词类型  1 -> 字符串 3 -> url
        color: '#10ac84',    // 颜色
      },
      audio: [
        {
            name: '浴室',
            artist: 'deca joins',
            url:
                'http://music.163.com/song/media/outer/url?id=483378334.mp3',
            cover:
                'http://p1.music.126.net/byjfkEIOWI_RmxSKEWTPyw==/18910500486297525.jpg?param=130y130',
            lrc:
                "[00:00.00] 作词 : 郑敬儒[00:01.00] 作曲 : deca joins[00:04.65]终于忘记你的时候[00:08.18]你出现在我的梦里[00:12.27][00:19.89]终于忘记你的时候[00:23.63]你出现在我的梦里[00:26.64][00:35.47]终于忘记你的时候[00:39.21]你出现在我的梦里[00:47.03]终于忘记你的时候[00:50.66]你出现在我的梦里[00:54.31][01:25.80]我们都被困在这寂寞的夜晚[01:29.44]阳光照进窗帘却太过刺眼[01:33.93]过于温暖的冬天让人失去自觉[01:41.15]波浪在海面上营火在岸边[01:44.93]我又泪流满面你不在我身边[01:48.83]芒草在山巅痛苦还留在眉间[01:54.82][02:12.14]他天真地以为这一切都无所谓[02:20.00]单纯只想把日子过得不浪费[02:27.78]我就是你的人[02:31.31]而这就是我的人生[02:35.16]深夜的时光如此珍贵[02:38.95]这安静的故事里没有音乐[02:44.24][03:13.96]终于忘记你的时候[03:17.50]你出现在我的梦里[03:21.49]终于忘记你的时候[03:25.25]你出现在我的梦里[03:29.08]终于忘记你的时候[03:32.82]你出现在我的梦里[03:36.76]终于忘记你的时候[03:40.56]你出现在我的梦里",
        },
        {
            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:
                "[ti:404 not found][ar:REOL][al:Σ][by:菜籽酱][00:00.000] 作曲 : Reol[00:00.008] 作词 : Reol[00:00.25][00:01.69]fade away...do over again...[00:13.35][00:13.76]歌い始めの一文字目 いつも迷ってる[00:18.57]どうせとりとめのないことだけど[00:22.85]伝わらなきゃもっと意味がない[00:26.84][00:27.38]どうしたってこんなに複雑なのに[00:30.75]噛み砕いてやらなきゃ伝わらない[00:34.18]ほら結局歌詞なんかどうだっていい[00:37.64]僕の音楽なんかこの世になくたっていいんだよ[00:41.32][00:54.74]Everybody don't know why.[00:58.20]Everybody don't know much.[01:01.56]僕は気にしない 君は気付かない[01:04.99]何処にももういないいない[01:08.17][01:08.59]Everybody don't know why.[01:11.86]Everybody don't know much.[01:15.25]忘れていく 忘れられていく[01:18.61]We don't know,We don't know.[01:22.86][01:39.61]目の前 広がる現実世界がまた歪んだ[01:46.30]何度リセットしても[01:47.57]僕は僕以外の誰かには生まれ変われない[01:51.88]「そんなの知ってるよ」[01:53.41]気になるあの子の噂話も[01:56.52]シニカル標的は次の速報[01:59.75][02:00.22]麻痺しちゃってるこっからエスケープ[02:03.57]遠く遠くまで行けるよ[02:06.71][02:07.15]安定なんてない 不安定な世界[02:14.04]安定なんてない きっと明日には忘れるよ[02:20.52][02:22.35]fade away...do over again...[02:33.62][02:34.41]そうだ世界はどこかがいつも嘘くさい[02:37.51]綺麗事だけじゃ大事な人たちすら守れない[02:41.06]くだらない 僕らみんなどこか狂ってるみたい[02:44.48]本当のことなんか全部神様も知らない[02:48.56][03:03.39]Everybody don't know why.[03:06.80]Everybody don't know much.[03:10.17]僕は気にしない 君は気付かない[03:13.62]何処にももういないいない[03:17.02][03:17.46]Everybody don't know why.[03:20.49]Everybody don't know much.[03:23.88]忘れていく 忘れられていく[03:27.18]We don't know,We don't know.[03:29.83]",
        },
        {
            name: '未成年',
            artist: '本兮',
            url:
                'http://music.163.com/song/media/outer/url?id=1451522647.mp3',
            cover:
                'http://p1.music.126.net/-emsJTdmutfySav8wA-wGQ==/109951166890840827.jpg?param=130y130',
            lrc:
                "[00:00.000] 作词 : 本兮[00:01.000] 作曲 : 本兮[00:23.490]风格坚持自己是特点 特点[00:27.490]崇尚自由的观念 观念[00:31.490]讨厌老师布置作业 作业[00:35.490]是坏心情的表现 表现[00:39.490]传说中的我们未成年[00:41.490]每天 幻想未来会赚大钱[00:43.490]我们爱上课 但不听讲[00:45.490]他们传纸条 打扰我睡觉[00:47.490]英语老师 她喜欢说[00:48.490]“OK,let me hear you say what[00:50.490]为什么不听讲 what do you want[00:51.490]go out,to my office”[00:52.490]第二节课才能回来 (hope I'm OK)[00:54.490]不喜欢作业 不喜欢学校[00:56.490]什么教导主任 disappear掉[00:58.490]我是好学生 她会对我笑[01:00.490]点个头 老师好 (您今天真漂亮)[01:02.490]不做课间操 因为想睡觉[01:04.490]研究游戏 电脑刚刚才关掉[01:05.490]不怕会变老 因为我还小嘛[01:07.490]黑眼圈的还有XXX还挨不到[01:09.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:13.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:17.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:20.490]I'm-I'm-I'm-I'm-I'm the best in this world[01:23.490]对你爱不完~[01:26.490](学他们唱情歌)[01:28.490]oh 别离开~[01:30.490](拜拜拜拜拜拜)[01:32.490]啦啦啦 我的爱[01:34.490](其实是草莓派)[01:36.490]分你一半[01:38.490](想得美 快走开)[01:39.490]风格坚持自己是特点 特点[01:43.490]崇尚自由的观念 观念[01:46.490]讨厌老师布置作业 作业[01:50.490]是坏心情的表现 表现[01:54.490]风格坚持自己是特点 特点[01:57.490]崇尚自由的观念 观念[02:01.490]讨厌老师布置作业 作业[02:05.490]是坏心情的表现 表现[02:24.490]出去逛街 我习惯戴耳机[02:26.490]所有的曲风 还是喜欢rap[02:28.490]这是范er 不喜欢被模仿[02:30.490]this is my style my voice my song[02:32.490]OK 所有作业[02:34.490]always最后一天大家一起写才对[02:36.490]好累 他的字我看不懂 无所谓[02:38.490]谁都不在乎谁错谁对[02:39.490]不能去网吧 不能去酒吧[02:41.490]so 就把家 变成各种吧[02:43.490]oh nice到了周末可以开玩[02:45.490]嗯.. 出去我掏钱 回家再埋单[02:47.490]]每天倒数 还有几天放假[02:49.490]321 期末考试 放学回家[02:51.490]假期总是补课 but学习永无止境[02:53.490]约束让人叛逆 但愿天下太平[02:54.490]I'm-I'm-I'm-I'm-I'm the best in this world[02:58.490]I'm-I'm-I'm-I'm-I'm the best in this world[03:02.490]I'm-I'm-I'm-I'm-I'm the best in this world[03:06.490]I'm-I'm-I'm-I'm-I'm the best in this world[03:09.490]对你爱不完~[03:11.490](学他们唱情歌)[03:13.490]oh 别离开~[03:15.490](拜拜拜拜拜拜)[03:16.490]啦啦啦 我的爱[03:19.490](其实是草莓派)[03:20.490]分你一半[03:23.490]](想得美 快走开)[03:24.490]风格坚持自己是特点 特点[03:28.490]崇尚自由的观念 观念[03:31.490]讨厌老师布置作业 作业[03:35.490]是坏心情的表现 表现[03:39.490]风格坚持自己是特点 特点[03:42.490]]崇尚自由的观念 观念[03:46.490]讨厌老师布置作业 作业[03:50.490]是坏心情的表现 表现[03:54.490]对你爱不完~[03:58.490]oh 别离开~[04:01.490]啦啦啦 我的爱[04:05.490]分你一半[04:09.490]风格坚持自己是特点 特点[04:13.490]崇尚自由的观念 观念[04:16.490]讨厌老师布置作业 作业[04:20.490]是坏心情的表现 表现[04:23.490]对你爱不完~",
        },
      ],
    },
    // 随笔头图
    postTopimage: {
      enable: true,
    },
    // 随笔尾图
    postBottomimage: {
      enable: false,
    },
    // 打赏二维码
    donation: {
      enable: false,
      qrcodes: [],
    },
    // 个性签名
    signature: {
      enable: true,
      contents: [""],
    },
    // 侧边栏二维码
    qrcode: {
      enable: false,
      img: '',
      desc: '',
    },
    // 弹出公告
    notice: {
      enable: false,
      text: [],
    },
    // 首页列表图
    indexListImg: {
      enable: false,
    },
    // 顶部加载进度条
    topProgress: {
      enable: false,
    },
    // 随笔页尾部签名
    postSignature: {
      enable: true,
      enableLicense: true,
      licenseName: '',
      licenseLink: '',
      content: [],
    },
    // 背景图片或颜色
    bodyBackground: {
      enable: false,
      value: '',
      opacity: 0.9,
      repeat: false,
    },
    // 弹幕
    barrage: {
      enable: false,
    },
    // 图表
    charts: {
      enable: false,
    },
    // 锁屏
    lock: {
      enable: true,
      background: 'https://s1.ax1x.com/2023/08/22/pPJr0JI.jpg',
      strings: [
        '<i>Powered by</i> webpack.',
      ],
    },
    // 自定义链接链接
    links: [
      {
        name: '<p style="font-size:18px"><strong>友链</strong></p>',
        link: '',
      },
      {
        name: '',
        link: '',
      },
    ],
  }
  $.awesCnb(opts)
</script>

主题作者官方文档

以上内容为我的个人配置,如需进一步客制化你的方案,还请以官方文档为参考。

awescnb主题配置文档

参考链接:
awescnb主题配置文档

posted @ 2023-08-24 09:00  chenzhang-Blog  阅读(203)  评论(0)    收藏  举报