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: '
标签：enable,false,awescnb,博客园,value,label,1px,true,美化	

来源： https://www.cnblogs.com/Journing/p/16673801.html