首页 > 其他分享> 文章详细

使用awescnb项目美化博客园皮肤

2022-09-09 20:04:56 阅读：274 来源： 互联网

标签：enable false awescnb 博客园 value label 1px true 美化

0. 致谢

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

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

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

1. 开始设置博客园皮肤

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

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

1.1 设置基本皮肤

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

.image-20220909190035437

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 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9