园龄：3年4个月粉丝：6 关注：1

📂blogself

🔖blogself

2022-09-09 19:28阅读: 195评论: 0推荐: 1

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

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: '🤣',
          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 保存享受焕然一新的博客

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

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

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

上一篇使用博客园做Markdown图床（Python脚本）

下一篇JavaScript：原型(prototype)

本文作者：Journing

本文链接：https://www.cnblogs.com/Journing/p/16673801.html

posted @ 2022-09-09 19:28 Journing 阅读(195) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Journing

Hello, World!

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

0. 致谢

1. 开始设置博客园皮肤

1.1 设置基本皮肤

1.2 添加Loading动画

1.3 我定制化的页面布局

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

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

公告

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (6)

随笔档案 (6)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!-- 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>

	/* 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)
	}

	/* -------------------------------自定义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;
	}

	<!-- @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>

Journing

Hello, World!

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

0. 致谢

1. 开始设置博客园皮肤

1.1 设置基本皮肤

1.2 添加Loading动画

1.3 我定制化的页面布局

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

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

公告

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (6)

随笔档案 (6)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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