0. 致谢

首先感谢，awescnb项目及其成员，提供的一系列成果，使得博客园的皮肤美化，变得非常简单且美好。

这里是该项目的使用手册等公告文档，你需要的一切都可以从这上面得到。

这里是该项目最初的作者写的博客园汇总贴。

1. 开始设置博客园皮肤

awescnb的公告文档，已经详细说明了该如何使用和设置博客园的皮肤。

这里只是按照顺序记录一下我的操作步骤，和一些改动的定制化地方。

1.1 设置基本皮肤

如下图所示，设置基本皮肤为官方的Custom，并且申请了JS权限，以及勾选禁用模板默认CSS

1.2 添加Loading动画

Loading动画就是在打开博客界面时的载入动画，awescnb官方提供了一些Loading动画，在其基础上定制化了一个，具体如下：

在页首HTML代码添加以下代码：

<!-- rainbow rotate -->
<div id="loading">
    <div class="spinner-box">
        <div class="red w1 leo"></div>
        <div class="orange w2 leo"></div>
        <div class="yellow w3 leo"></div>
        <div class="green w4 leo"></div>
        <div class="cyan w5 leo"></div>
        <div class="blue w6 leo"></div>
        <div class="purple w7 leo"></div>
    </div>
</div>

在页面定制 CSS代码添加以下代码：

/* rainbow rotate */
@keyframes spin3D {
	from {
		transform: rotate3d(01.5, 01.5, 01.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%
}

.red {
	width: 1px;
	height: 1px;
	border: 100px solid #FF0000;
	animation: spin3D 0.5s linear 0s infinite
}

.orange {
	width: 1px;
	height: 1px;
	border: 90px solid #FF7F00;
	animation: spin3D 0.5s linear 0s infinite
}

.yellow {
	width: 1px;
	height: 1px;
	border: 80px solid #FFFF00;
	animation: spin3D 0.5s linear 0s infinite
}

.green {
	width: 1px;
	height: 1px;
	border: 70px solid #00FF00;
	animation: spin3D 0.5s linear 0s infinite
}

.cyan {
	width: 1px;
	height: 1px;
	border: 60px solid #00FFFF;
	animation: spin3D 0.5s linear 0s infinite
}

.blue {
	width: 1px;
	height: 1px;
	border: 50px solid #0000FF;
	animation: spin3D 0.5s linear 0s infinite
}

.purple {
	width: 1px;
	height: 1px;
	border: 40px solid #8B00FF;
	animation: spin3D 0.5s linear 0s infinite
}

.w1 {
	transform: rotate3D(1, 1, 1, 90deg)
}

.w2 {
	transform: rotate3D(1, 1, 1, 120deg)
}

.w3 {
	transform: rotate3D(1, 1, 1, 150deg)
}

.w4 {
	transform: rotate3D(1, 1, 1, 180deg)
}

.w5 {
	transform: rotate3D(1, 1, 1, 210deg)
}

.w6 {
	transform: rotate3D(1, 1, 1, 240deg)
}

.w7 {
	transform: rotate3D(1, 1, 1, 270deg)
}

1.3 我定制化的页面布局

awescnb官方提供的一个主题geek的有些页面布局，我选择定制化一下，在刚刚1.2中添加的CSS代码后面追加以下代码：

/* -------------------------------自定义css----------------------------- */
/* 日历 */
#custom-calendar {
	display: none;
}
/* 提交评论按钮 */
#btn_comment_submit {
	color: #FFFFFF !important;
	background-color: #1976D2 !important;
}
/* 头像下方的收藏、闪存、小组、博问导航栏 */
.profile-menu {
	display: none !important;
}
/* 右上角的邮箱、写信导航栏 */
.email {
    display: none;
}
.message {
    display: none;
}
/* 背景图整体框 */
.profile-banner {
    border-radius: 10px !important;
}
/* 头像框 */
.profile-avatar {
	left: 1px !important;
    bottom: 1px !important;
}
/* 头像右侧的信息栏 */
.profile-msg {
    bottom: 5px !important;
}
/* 首页博文卡片的阅读等按钮 */
.custom-card-actions button {
    background-color: #1976D2 !important;
}
/* 首页博文卡片 */
.custom-card {
	border-radius: 10px !important;
}
/* 博文卡片标题 */
.custom-card-title {
	font-size: 25px !important;
}
/* 首页博文卡片流布局 */
.cards-list {
    grid-template-columns: repeat(1, 1fr) !important;
}
/* 博客中间布局 */
#mainContent {
	grid-template-rows: 18vh 1fr !important;
}
/* 博客整体布局 */
#home {
	grid-template-columns: auto !important;
}

1.4 引入awescnb的js脚本，并定制化

在页脚HTML代码中添加以下代码，基本上包含了当前awescnb项目能配置的所有选项，虽然其中很多选项都是geek主题使用不了的，不过已经足够用了。想开启这些选项，就enable: true,；其中有些图片的url需要自己去手动添加了：

<!-- @format -->

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    // 基本配置
    theme: {
      name: 'geek', // 要使用的皮肤
      color: '', // 全局主题色，默认跟随皮肤
      title: '', // 网站标题
      avatar: '', // 头像url
      favicon: '', // 网站图标
      headerBackground: '', //背景图url
    },
    // 代码高亮
    highLight: {
      enable: true,
    },
    // 代码行号
    lineNumbers: {
      enable: true,
    },
    // github图标
    github: {
      enable: false,
      color: '#FFB3CC',
      url: '',
    },
    // 码云图标
    gitee: {
      enable: false,
      url: '',
    },
    // 图片灯箱，点击图片单独显示
    imagebox: {
      enable: true,
    },
    // 文章目录
    catalog: {
      enable: true,
      position: 'left',
    },
    // 右下角按钮组
    tools: {
      enable: true,
      initialOpen: true,
    },
    // live2d模型
    live2d: {
      enable: false,
      page: 'all',
      agent: 'pc',
      model: 'random',
      width: 150,
      height: 200,
      position: 'left',
      gap: 'default',
    },
    // 点击特效
    click: {
      enable: false,
      auto: false,
      colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
      size: 30,
      maxCount: 50,
    },
    // 评论输入框表情
    emoji: {
      enable: true,
      buttonIcon: "emoji",
      emojiList: [
        {
          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,
      darkDefault: false, // 是否默认设置暗色模式
      autoDark: true,
      autoLight: true,
    },
    // 音乐播放器
    musicPlayer: {
      enable: false,
      page: 'all',
      agent: 'pc',
      autoplay: false,
      volume: 0.4,
      lrc: {
        enable: false, // 启用歌词
        type: 1, // 1 -> 字符串歌词 3 -> url 歌词
        color: '', // 颜色
      },
      audio: [
        {
          name: '404 not found',
          artist: 'REOL',
          url: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',
          cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',
          lrc: ``,
        },
      ],
    },
    // 随笔头图
    postTopimage: {
      enable: true,
      fixed: true, // 视差滚动
      imgs: [], // 图片url列表
    },
    // 随笔尾图
    postBottomimage: {
      enable: false,
      img: '',
      height: '200px',
    },
    // 打赏二维码
    donation: {
      enable: false,
      img: '',
      qrcodes: [],
      desc: '', // 描述
    },
    // 个性签名，在背景图上的打字效果
    signature: {
      enable: false,
      contents: [],
    },
    // 侧边栏二维码
    qrcode: {
      enable: false,
      img: '',
      desc: '',
    },
    // 弹出公告
    notice: {
      enable: false,
      text: ['来了老弟', '老弟记得三连啊'],
    },
    // 首页列表图
    indexListImg: {
      enable: false,
      imgs: [], // 图片url列表
    },
    // 顶部加载进度条
    topProgress: {
      enable: false,
      page: 'all',
      agent: 'pc',
      background: '#FFB3CC',
      height: '5px',
    },
    // 随笔页尾部签名
    postSignature: {
      enable: true,
      enableLicense: true,
      link: '',
      licenseName: '',
      licenseLink: '',
      content: [],
    },
    // 背景图片或颜色
    bodyBackground: {
      enable: false,
      value: '',
      opacity: 0.9,
      repeat: false,
    },
    // 弹幕
    barrage: {
      enable: false,
      opacity: 0.6,
      colors: [],
      fontSize: '16px',
      barrages: [], // 全局弹幕
      indexBarrages: [], // 首页弹幕
      postPageBarrages: [], // 博文页弹幕
    },
    // 图表，不如使用eCharts
    charts: {
      enable: false,
    },
    // 锁屏
    lock: {
      enable: false,
      background: '', // 背景图片，默认随机
      strings: ['test'],
    },
    // 自定义链接链接
    links: [
      {
        name: '',
        link: '',
      },
      // ......
    ],
    // 画笔，将Markdown的一些线条使用拟人画笔代替
    notation: {
      enable: true,
    },
  }
  $.awesCnb(opts)
</script>

1.5 保存享受焕然一新的博客

做完上述操作以后，点击保存即可。

接下来就是刷新博客首页，享受焕然一新的博客了。

如果刷新以后博客首页白屏（应该不会，以防万一），点击这里进入博客园后台撤销上述操作。