lavender

Shoka主题：修改标签页显示效果

2022-06-22T15:00:00.000Z

修改标签页显示效果

# 前言

本标签页面参考 HEO 大佬的标签页面，实现标签的美化以及右上角标签对应文章数量的显示
本标签页右上角显示文章数量参考 Eurkon 大佬的文章：Butterfly 标签云增加文章数上下标

# 实现

# 主题 yml 文件

找到主题配置文件 themes\shoka\_config.yml ;
找到 tagcloud ：

	# TagCloud settings for tags page.
	tagcloud:
	# All values below are same as default, change them by yourself.
	min: 16 # Minimun font size in px
	max: 22 # Maxium font size in px
	start: "#72cecf" # Start color (hex, rgba, hsla or color keywords)
	end: "#ffbac3" # End color (hex, rgba, hsla or color keywords)
	amount: 200 # Amount of tags, change it if you have more than 200 tags

其中 start 和 end 可以修改字体颜色范围。

# 新增标签颜色

找到 css 颜色文件 themes\shoka\source\css\_colors.styl ；
可以在 50 行左右新增自定义的标签颜色设置；

	--header-text-color: var(--grey-0);
	--primary-color: var(--color-red);

	--tags-background: #edf0f7; // 新增，修改为自己喜欢的日间模式的背景颜色

接下来修改夜间模式颜色，大概 150 行左右

在 [data-theme="dark"] { 下新增夜间模式的颜色值

	--text-color: var(--grey-5);
	--header-text-color: var(--grey-9);

	--tags-background: #30343f; // 新增，修改为自己喜欢的夜间模式的背景颜色

单独复制用：
--tags-background: #edf0f7;

# 修改背景以及鼠标悬浮效果

找到 themes\shoka\source\css\_common\components\pages\tag-cloud.styl 文件，修改如下：

	.tag.cloud {
	text-align: center;

	a {
	display: inline-block;
	margin: .625rem;

	&:hover {
	color: var(--primary-color) !important;
	}
	}
	}

修改为

	.tag.cloud {
	text-align: center;

	a {
	display: inline-block;
	margin: .625rem;
	background: var(--tags-background);
	padding: .3em .5em;
	border-radius: 10px;
	box-shadow: 0px 7px 23px rgba(0, 0, 0, 0.2);

	&:hover {
	color: var(--grey-3) !important;
	transform:scale(1.25,1.25);
	background: var(--primary-color);
	}
	}
	}

# 增加右上角文章数量显示

找到 node_modules\hexo\lib\plugins\helper\tagcloud.js 文件；

60 行左右找到 tags.forEach(tag => { 部分

	tags.forEach(tag => {
	const ratio = length ? sizes.indexOf(tag.length) / length : 0;
	const size = min + ((max - min) * ratio);
	let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`;
	const attr = className ? ` class="${className}-${Math.round(ratio * level)}"` : '';

	if (color) {
	const midColor = startColor.mix(endColor, ratio);
	style += ` color: ${midColor.toString()}`;
	}

	result.push(
	`<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}</a>`
	);
	});

在最后的 result.push 中，找到最后一个 tag.name ，修改

新增上标：

<sup>${tag.length}</sup>

或者下标

<sub>${tag.length}</sub>

加入后如下（上标）：

	result.push(
	`<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}<sup>${tag.length}</sup></a>`
	);

最后 hexo clean ，重新生成即可。

完成！

Shoka主题：修改页面滚动视差效果

2022-06-22T14:00:00.000Z

修改页面滚动视差效果

# 前言

实现页面滚动时背景图随滚动发生位移的视差效果

# 实现

# 修改 Js

找到 themes\shoka\source\js\_app\global.js ;

大概 20 行左右新增：

var imgMover = $('#imgs');  // 新增

位置参考：

	const sideBar = $('#sidebar');
	const siteBrand = $('#brand');
	var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents;
	var angleBtn = $('#angle');

	var imgMover = $('#imgs'); // 此处新增（参考位置）

	var siteSearch = $('#search');

在 188 行左右：

	const scrollHandle = function (event) {
	var winHeight = window.innerHeight;
	var docHeight = getDocHeight();
	var contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
	var SHOW = window.pageYOffset > headerHightInner;
	var startScroll = window.pageYOffset > 0;

	// 此处可以新增代码

	if (SHOW) {
	changeMetaTheme('#FFF');
	} else {
	changeMetaTheme('#222');
	}

代码处新增以下代码：

	var oVal = Math.round(Math.min(300 * window.pageYOffset / contentVisibilityHeight, 100)) / -5;
	var max = 200 + window.pageYOffset;
	if (oVal > max) {
	oVal = max;
	}
	imgMover.style.transform = 'translate3d(0,' + oVal + 'vh,0)';
	imgMover.style.webkitTransform = 'translate3d(0,' + oVal + 'vh,0)';
	imgMover.style.msTransform = 'translate3d(0,' + oVal + 'vh,0)';
	imgMover.style.OTransform = 'translate3d(0,' + oVal + 'vh,0)';

此处的 var oVal = Math.round(Math.min(300 * window.pageYOffset / contentVisibilityHeight, 100)) / -5; 中的数值根据自己实际情况喜好可做出修改

修复切换页面时视差效果失效的问题：在 themes\shoka\source\js\_app\pjax.js 文件大概 53 行

	const siteRefresh = function (reload) {
	LOCAL_HASH = 0
	LOCAL_URL = window.location.href

	// 此处新增

	vendorCss('katex');
	vendorJs('copy_tex');

新增如下代码

imgMover = $('#imgs')

完成！

Shoka主题：修改首页文章摘要hover效果

2022-06-22T07:00:00.000Z

修改首页文章摘要 hover 效果

# 前言

想法来自于 HEO 大佬首页文章效果，实现首页文章摘要的 hover 显示效果

# 实现

# 修改 Stylus

找到 themes\shoka\source\css\_common\components\pages\home.styl ;
大概 260 行左右，找到 &:hover 代码部分，修改如下：

修改鼠标悬浮后图片变暗效果，增加 brightness 属性：

	&:hover {
	box-shadow: 0 0 2rem var(--box-bg-shadow);

	.cover { // 新增
	filter: brightness(.3);
	}

	.cover img {

修改鼠标悬浮后旋转效果

	.cover {
	filter: brightness(.3);
	}

	.cover img { // 修改
	transform: scale(1.25) rotate(2deg);
	}

	.info {

修改另一个方向的旋转效果（410 行左右，即最后部分）

	&:hover {
	.cover img {
	transform: scale(1.25) rotate(-2deg);
	}
	}

修改鼠标悬浮后内容宽度、标题位置，摘要显示

	.info {
	width: 75%;
	+mobile(){
	width: 100%;
	}
	}

	.info h3{
	margin: .625rem 0;
	color: var(--color-blue);
	}

	.excerpt {
	opacity: 1;
	}

修改鼠标悬浮前标题位置 (340 行左右 .info h3 处)

	h3 {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: .625rem 0;
	color: var(--primary-color);
	}

修改为

	h3 {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 3.525rem 0 0 0;
	color: var(--primary-color);
	the-transition-margin(); // 平滑过渡
	}

修改悬浮前摘要内容显示，在紧接着 h3 下的 excerpt 中

	.excerpt {
	overflow: hidden;
	font-size: $font-size-small;
	max-height: 5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
	}

修改为（新增）

	.excerpt {
	overflow: hidden;
	font-size: $font-size-small;
	max-height: 5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
	opacity: 0; // 不显示
	pointer-events: none;
	the-transition(); // 平滑过渡
	}

平滑过渡（290 行左右 .cover ，315 行左右 .info ，340 行左右 h3 ，350 行 .excerpt 中加入平滑动画代码
the-transition();
在 source/css/_mixins.styl 中，仿照 the-transition 的写法，自定义 the-transition-margin ，如下：
the-transition-margin(duration = .3s, function = ease, delay = 0s, property = margin) {
transition:property duration function delay;
}
h3 中我加入的平滑便是
the-transition-margin();
适配移动端（270 行左右， .info 中加入 width 的 100% 属性保证移动端不会出现错位）
.info {
width: 75%;
+mobile(){
width: 100%;
}

}
```

# 总结

最后把所有代码贴入（以上所有改后的 home.styl 代码）

	$item {
	position: relative;
	color: inherit;
	width: calc(50% - 2rem);
	min-width: calc(50% - 2rem);
	height: 14rem;
	margin: 1rem;
	opacity: 0;

	&.show {
	@extend .slide-up-big-in;
	opacity: 1;
	}

	+mobile() {
	width: calc(100% - 1rem) !important;
	min-width: calc(100% - 1rem) !important;
	margin: 1rem .5rem !important;
	}
	}

	.index.wrap {
	.btn {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: .3rem 1rem;
	border-radius: 1rem 0;
	color: var(--grey-0);
	background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);

	&::before {
	position: absolute;
	display: block;
	content: '';
	height: calc(100% - 1rem);
	width: calc(100% - 1rem);
	border-radius: 5rem;
	left: .5rem;
	top: .8rem;
	box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
	background-color: var(--color-pink-a3);
	z-index: -1;
	}

	&:hover {
	transform: translateZ(2.5rem);
	}

	&:hover::before {
	transform: translateZ(-2.5rem);
	}
	}

	.meta {
	font-size: $font-size-smaller;
	color: var(--grey-5);

	.ic {
	margin-right: .0625rem;
	}

	.item + .item {
	margin-left: .625rem;
	}

	&.footer {
	position: absolute;
	bottom: .5rem;
	max-width: calc(100% - 7rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	justify-content: flex-start;

	span {
	margin-right: .5rem;
	}
	}
	}
	}

	.cards {
	display: flex;
	margin: 0 auto;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;

	&.hide .item {
	display: none;
	}

	.item {

	@extend $item;
	perspective: 62.5rem;
	&.show {
	display: block !important;
	}

	.cover,
	.info {
	position: absolute;
	the-flex();
	border-radius: .375rem;
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transition: ease-in-out 600ms;
	}

	.cover {
	background-position: center;
	background-size: cover;
	padding: .5rem 1rem;
	font-size: $font-size-medium;
	color: var(--header-text-color);
	overflow: hidden;
	transform: rotateY(0deg);
	background-image: unquote(hexo-config('index.cover'));

	.title {
	margin: 0rem;
	white-space: normal;
	text-align: center;
	}

	&::before {
	position: absolute;
	display: block;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(135deg, #434343 0%, black 100%);
	opacity: .25;
	z-index: $zindex-0;
	}

	span {
	font-size: $font-size-smallest;
	position: absolute;
	right: .9375rem;
	top: .625rem;
	padding: 0 .3125rem;
	border-radius: .3125rem;
	box-shadow: 0 0rem .3125rem .0625rem rgba(0,0,0,.6);
	background: rgba(0,0,0,.5);
	}
	}


	.info {
	background-color: var(--grey-0);
	transform: rotateY(-180deg);
	padding: 1rem 1.5rem 4rem;
	justify-content: space-between;

	+mobile() {
	padding: 1rem 1rem 4rem;
	}

	.ribbon {
	left: -2.5rem;
	margin-bottom: .8rem;
	max-width: calc(100% + 2rem);
	+mobile() {
	left: -2rem;
	}
	}
	}

	&:nth-child(even) .info {
	transform: rotateY(180deg);
	}

	&.active {
	.cover {
	transform: rotateY(180deg);
	}

	.info {
	transform: rotateY(0deg);
	box-shadow: 0 0 2rem var(--box-bg-shadow);
	}
	}

	&:nth-child(even).active {
	.cover {
	transform: rotateY(-180deg);
	}
	}

	.title {
	.ic {
	font-size: 80%;
	}
	}

	ul.posts {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: baseline;
	min-height: 5rem;
	overflow: hidden;

	li {
	width: 45%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--primary-color);
	}
	}
	}
	}

	.segments {
	the-flex();

	> .item {
	@extend $item;

	display: flex;
	border-radius: .625rem;

	width: calc(100% - 2rem);
	min-width: calc(100% - 2rem);

	shadow-box(false);
	the-transition();


	+mobile() {
	flex-direction: column;
	height: fit-content;
	max-height: fit-content;
	}

	&:hover {
	box-shadow: 0 0 2rem var(--box-bg-shadow);

	.cover {
	filter: brightness(.3);
	}

	.cover img {
	transform: scale(1.25) rotate(2deg);
	}

	.info {
	width: 75%;
	+mobile(){
	width: 100%;
	}
	}

	.info h3{
	margin: .625rem 0;
	color: var(--color-blue);
	}

	.excerpt {
	opacity: 1;
	}
	}
	}

	.cover {
	width: 50%;
	margin-right: 1.5rem;
	clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
	border-radius: .625rem 0 0 .625rem;
	overflow: hidden;
	the-transition();

	+mobile() {
	width: 100%;
	height: 14rem;
	margin: auto;
	clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
	border-radius: .625rem .625rem 0 0;
	}

	img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	}
	}

	.info {
	position: relative;
	width: 50%;
	padding: 1rem 1.5rem 3rem 0;
	perspective: 62.5rem;
	the-transition();

	+mobile() {
	width: 100%;
	height: 14rem;
	padding: 0rem 1rem 3rem;
	}

	.meta {
	display: flex;
	justify-content: flex-end;
	margin: 0;

	+mobile() {
	.item:not(:first-child) {
	display: none;
	}
	}
	}

	h3 {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 3.525rem 0 0 0;
	color: var(--primary-color);
	the-transition-margin();
	}

	.excerpt {
	overflow: hidden;
	font-size: $font-size-small;
	max-height: 5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
	opacity: 0;
	pointer-events: none;
	the-transition();
	}

	}


	> .item:nth-child(even) {
	flex-direction: row-reverse;

	+mobile() {
	flex-direction: column;
	}

	.cover {
	margin-right: auto;
	margin-left: 1.5rem;
	clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
	border-radius: 0rem .625rem .625rem 0;

	+mobile() {
	width: 100%;
	margin: auto;
	clip-path: polygon(0 0,100% 0,100% 100%,0 92%);
	border-radius: .625rem .625rem 0 0;
	}
	}

	.info {
	padding: 1rem 0 3rem 1.5rem;

	+mobile() {
	padding: 0rem 1rem 3rem;
	}

	.meta {
	justify-content: flex-start;
	}
	}

	.btn {
	left: 0;
	right: auto;
	border-radius: 0 1rem;
	background-image: linear-gradient(to right, var(--color-orange) 0, var(--color-pink) 100%);
	}

	.meta.footer {
	right: .5rem;
	justify-content: flex-start;
	}

	&:hover {
	.cover img {
	transform: scale(1.25) rotate(-2deg);
	}
	}
	}
	}

完成！

Shoka主题：修改夜间模式切换动画

2022-06-21T11:00:00.000Z

修改夜间模式切换动画

# 前言

仍然想要折腾下主题默认的夜间模式切换动画

# 实现

# 修改 Js

找到 themes\shoka\source\js\_app\global.js ;

找到 var neko = BODY.createChild 的位置，修改 js 添加 html 块的代码：

	var neko = BODY.createChild('div', {
	id: 'neko',
	innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
	});

将 innerHTML 中替换为你喜爱的新的 html 部分（将 html 压缩，可用在线工具），以本网站动画为例， innerHTML 改为:

	var neko = BODY.createChild('div', {
	id: 'neko',
	innerHTML: '<div class="newlight"id="sunmooncont"><div class="bgclo"></div><div class="moon-box"><div class="bigmoon"></div></div><div class="sun-box"><div class="bigsun"></div></div><div class="bigsea"></div></div>'
	});

找到 if(btn.hasClass('i-sun')) 部分（在刚才部分下方十行左右），修改按钮触发动画 js ：

	if(btn.hasClass('i-sun')) {
	var c = function() {
	neko.addClass('dark');
	changeTheme('dark');
	store.set('theme', 'dark');
	hideNeko();
	}
	} else {
	neko.addClass('dark');
	var c = function() {
	neko.removeClass('dark');
	changeTheme();
	store.set('theme', 'light');
	hideNeko();
	}
	}

修改为：

	if(btn.hasClass('i-sun')) {
	var c = function() {
	sunmooncont.removeClass('newlight');
	sunmooncont.addClass('newdark');
	changeTheme('dark');
	store.set('theme', 'dark');
	hideNeko();
	}
	} else {
	sunmooncont.addClass('newdark');
	var c = function() {
	sunmooncont.removeClass('newdark');
	sunmooncont.addClass('newlight');
	changeTheme();
	store.set('theme', 'light');
	hideNeko();
	}
	}

其中，以上是个人动画示例， sunmooncont 是刚才 html 中最外层的 div 盒子。

# 修改 Stylus

找到 themes\shoka\source\css\_common\components\third-party\theme.styl ；
可以直接删除原本的 css 代码，增加个人喜爱的切换模式动画的 css ，以本网站动画为例：

	#neko {
	@extend $fix-fullscreen;
	display: none;

	#sunmooncont {
	height: 100vh;
	}
	.bgclo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	.bigsun {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 600px;
	height: 600px;
	background-color: orange;
	border-radius: 50%;
	+mobile() {
	top: 60%;
	width: 200px;
	height: 200px;
	}
	+tablet() {
	top: 55%;
	width: 400px;
	height: 400px;
	}
	}
	.bigmoon {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + -160px),calc(-50% + -180px));
	width: 600px;
	height: 600px;
	box-shadow: 160px 180px 0 cyan;
	border-radius: 50%;
	+mobile() {
	top: 60%;
	width: 200px;
	height: 200px;
	transform: translate(calc(-50% + -50px),calc(-50% + -60px));
	box-shadow: 50px 60px 0 cyan;
	}
	+tablet() {
	top: 55%;
	width: 400px;
	height: 400px;
	transform: translate(calc(-50% + -80px),calc(-50% + -90px));
	box-shadow: 80px 90px 0 cyan;
	}
	}
	.bigsea {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 35%;
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
	z-index: 100;
	}
	.bigsun,
	.bigmoon,
	.sun-box,
	.moon-box,
	.bgclo {
	transition: all 1s ease-in-out;
	}
	.sun-box,
	.moon-box {
	position: relative;
	overflow: hidden;
	}
	.newlight {
	.sun-box {
	height: 100%;
	}
	.moon-box {
	height: 0;
	}
	.bgclo {
	background-color: #ffeea2;
	}
	}
	.newdark {
	.sun-box {
	height: 0;
	}
	.moon-box {
	height: 100%;
	}
	.bgclo {
	background-color: #040720;
	}
	}
	}

完成！

Shoka主题：修改加载动画

2022-06-21T01:00:00.000Z

修改主题加载动画

# 前言

主题默认加载动画是旋转的猫猫（ha），鉴于个人想要折腾的想法，修改成其他喜爱的加载动画

主题的加载动画实际上就是一个单独的播放循环动画的网页 div 块（ <div id="loading"> )，页面最开始显示这个 div 块，加载完成后设置隐藏，即 <div id="loading" style="opacity: 0; display: none;">

# 实现

# 修改 nunjucks (layout)

找到 themes\shoka\layout\_partials\ 目录；

修改 layout.njk , 修改 <div id="loading"> 的位置，大概 12 行左右:

	<div id="loading">
	<div class="cat">
	<div class="body"></div>
	<div class="head">
	<div class="face"></div>
	</div>
	<div class="foot">
	<div class="tummy-end"></div>
	<div class="bottom"></div>
	<div class="legs left"></div>
	<div class="legs right"></div>
	</div>
	<div class="paw">
	<div class="hands left"></div>
	<div class="hands right"></div>
	</div>
	</div>
	</div>

将 loading 的 div 块内填入新的 loading 的 html 部分，以本网站动画为例， loading 下改为:

	<div id="loading">
	<div class="reliefload">
	<span style="--i:0;"></span>
	<span style="--i:1;"></span>
	<span style="--i:2;"></span>
	<span style="--i:3;"></span>
	<span style="--i:4;"></span>
	<span style="--i:5;"></span>
	<span style="--i:6;"></span>
	</div>
	</div>

# 修改 Stylus

找到 themes\shoka\source\css\_common\components\third-party\loading.styl ；
修改最开头的 loding 的 css :

	#loading {
	@extend $fix-fullscreen;
	background-color: var(--grey-1);
	if(!hexo-config('loader.start')) {
	display: none;
	}
	}

新增居中 css ，修改为

	#loading {
	@extend $fix-fullscreen;
	background-color: var(--grey-1);
	if(!hexo-config('loader.start')) {
	display: none;
	}
	display: flex;
	justify-content: center;
	align-items: center;
	}

在下方新增新增的 loding 的 css 代码（可以删除原来的代码）按本网站举例：

	.reliefload {
	display: flex;
	span {
	position: relative;
	width: 50px;
	height: 50px;
	background-color: #eaeef0;
	margin: 0 10px;
	border-radius: 50%;
	box-shadow: -8px -8px 15px $bgColor, // 此处使用的是原主题 css 部分设置的颜色变量引用，可以直接替换为 16 进制颜色代码
	8px 8px 15px rgba(0,0,0,0.2),
	inset 3px 3px 5px rgba(0,0,0,0.1),
	inset -1px -1px 5px rgba(255,255,255,1);
	border: 6px solid #eaeef0;
	+mobile() {
	width: 20px;
	height: 20px;
	border: 3px solid #eaeef0;
	}
	+tablet() {
	width: 30px;
	height: 30px;
	border: 4px solid #eaeef0;
	}
	&::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: lightseagreen;
	border-radius: 50%;
	box-shadow: inset 3px 3px 5px rgba(0,0,0,0.1),
	inset -1px -1px 5px rgba(255,255,255,1);
	opacity: 0;
	animation: animaterelief 3.5s linear infinite,
	animateColor5s linear infinite;
	animation-delay: calc(var(--i) * 0.15s);
	}
	}
	}
	@keyframes animaterelief {
	0%,9.99%,70.01%{
	opacity: 0;
	}
	10%,70%{
	opacity: 1;
	}
	}
	@keyframes animateColor {
	to{
	filter: hue-rotate(360deg);
	}
	}

其中， +mobile() 和 +tablet() 部分是适配移动端的 css，要根据自己的实际情况设置对应的参数：

# 修复页面内加载动画位置偏移的问题

找到 themes\shoka\source\css\_common\outline\outline.styl ；
40 行左右找到 #main 的 css 配置项，仿照 .cat 的写法，加入 loading 的 div 下包围整个加载动画的 div 块：
.cat {
margin-top: 10rem;
margin-top: 20rem;
}
删除 .cat 加入或者直接在下方加入新的 css ：
.cat {
margin-top: 10rem;
margin-top: 20rem;
}
.reliefload {
margin-top: 20rem;
margin-left: 15rem;
}
其中：根据自己的实际情况调整 margin 的值。

完成！

冰墩墩雪容融

2022-02-25T14:00:00.000Z

这里记录下冰墩墩和雪容融的前端代码，源码从网络上获得，仅作记录

# 冰墩墩

# HTML 部分

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>冰墩墩</title>
	</head>
	<body>
	<div class="bdd">
	<div class="m_body"></div>
	<div class="ear1"></div>
	<div class="ear2"></div>
	<div class="eye1"></div>
	<div class="eye2"></div>
	<div class="face c_blue"></div>
	<div class="face c_red"></div>
	<div class="face c_purple"></div>
	<div class="face c_yellow"></div>
	<div class="face c_green"></div>
	<div class="nose"></div>
	<div class="mouse"></div>
	<div class="arm1"></div>
	<div class="arm2"></div>
	<div class="leg1"></div>
	<div class="leg2"></div>
	</div>
	</body>
	</html>

# CSS 部分

	* {
	margin: 0;
	padding: 0
	}

	body {
	font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
	background: #fff;
	}

	.bdd {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 500px;
	margin-top: -250px;
	margin-left: -300px;
	}

	.m_body {
	width: 362px;
	height: 410px;
	border: #393939 8px solid;
	margin: 50px auto;
	border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
	position: absolute;
	left: 109px;
	top: -30px;
	background: url(logo.png) no-repeat center bottom 20px #fff;
	background-size: 63px;
	}

	.ear1,
	.ear2 {
	background: #393939;
	width: 81px;
	height: 115px;
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	}

	.ear1 {
	left: 150px;
	top: 26px;
	transform: rotate(-10deg);
	}

	.ear2 {
	left: 362px;
	top: 28px;
	transform: rotate(10deg);
	}

	.eye1,
	.eye2 {
	background: #393939;
	width: 83px;
	height: 115px;
	border-radius: 50%;
	position: absolute;
	}

	.eye1 {
	left: 185px;
	top: 122px;
	transform: rotate(45deg);
	}

	.eye2 {
	left: 329px;
	top: 122px;
	transform: rotate(-45deg);
	}

	.eye1:before,
	.eye2:before {
	content: "";
	width: 40px;
	height: 40px;
	border: #fff 5px solid;
	border-radius: 100%;
	position: absolute;
	}

	.eye1:before {
	right: 10px;
	top: 22px;
	}

	.eye2:before {
	left: 10px;
	top: 22px;
	}

	.eye1:after,
	.eye2:after {
	content: "";
	width: 10px;
	height: 10px;
	background: #9b9b9b;
	border-radius: 100%;
	position: absolute;
	}

	.eye1:after {
	right: 27px;
	top: 31px;
	}

	.eye2:after {
	left: 41px;
	top: 44px;
	}

	.face {
	position: absolute;
	border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
	}

	.c_blue {
	border: #6bcdf3 5px solid;
	width: 280px;
	height: 224px;
	left: 150px;
	top: 78px;
	}

	.c_red {
	border: #af2350 5px solid;
	width: 287px;
	height: 233px;
	left: 146px;
	top: 73px;
	}

	.c_purple {
	border: #5d75b3 5px solid;
	width: 295px;
	height: 240px;
	left: 142px;
	top: 70px;
	}

	.c_yellow {
	border: #ffc346 5px solid;
	width: 305px;
	height: 248px;
	left: 137px;
	top: 65px;
	}

	.c_green {
	border: #7fcb58 5px solid;
	width: 313px;
	height: 256px;
	left: 133px;
	top: 61px;
	}

	.arm1,
	.arm2 {
	background: #333;
	position: absolute;
	z-index: -1;
	}

	.arm1 {
	width: 75px;
	height: 118px;
	left: 64px;
	top: 244px;
	transform: rotate(45deg);
	border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
	}

	.arm2 {
	width: 75px;
	height: 148px;
	left: 463px;
	top: 162px;
	transform: rotate(37deg);
	border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
	}

	.arm2:before {
	content: "";
	width: 16px;
	height: 24px;
	background: #bc242c;
	position: absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform: rotate(45deg);
	left: 32px;
	top: 20px;
	}

	.arm2:after {
	content: "";
	width: 16px;
	height: 24px;
	background: #bc242c;
	position: absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform: rotate(-45deg);
	left: 26px;
	top: 20px;
	}

	.arm_c {
	content: "";
	width: 16px;
	height: 24px;
	position: absolute;
	left: 426px;
	top: 20px;
	}

	.nose {
	background-color: #333333;
	position: absolute;
	left: 284px;
	top: 187px;
	width: 28px;
	height: 18px;
	border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
	}

	.mouse {
	position: absolute;
	left: 265px;
	top: 205px;
	width: 68px;
	height: 25px;
	border-radius: 48%;
	border: #393939 7px solid;
	border-top: none;
	border-left: 0;
	border-right: 0;
	}

	.leg1,
	.leg2 {
	background: #333;
	position: absolute;
	width: 83px;
	height: 80px;
	border-radius: 0 0 30px 30px;
	z-index: -1;
	}

	.leg1 {
	left: 187px;
	top: 423px;
	}

	.leg2 {
	left: 328px;
	top: 423px;
	}

	.leg1:after,
	.leg2:after {
	content: "";
	width: 43px;
	height: 30px;
	position: absolute;
	background: #333;
	border-radius: 30px;
	}

	.leg1:after {
	bottom: 0;
	right: -3px;
	}

	.leg2:after {
	bottom: 0;
	left: -3px;
	}

	* { margin: 0; padding: 0 }
	body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; background: #fff; }
	.bdd { position: absolute; left: 50%; top: 50%; width: 600px; height: 500px; margin-top: -250px; margin-left: -300px; }
	.m_body {width: 362px;height: 410px;border: #393939 8px solid;margin: 50px auto;border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;position: absolute;left: 109px;top: -30px;background: url(logo.png) no-repeat center bottom 20px #fff;background-size: 63px;}.ear1, .ear2 {background: #393939;width: 81px;height: 115px;border-radius: 50%;position: absolute;z-index: -1;}
	.ear1 {left: 150px;top: 26px;transform: rotate( -10deg );}
	.ear2 {left: 362px;top: 28px;transform: rotate(10deg);}
	.eye1, .eye2 {background: #393939;width: 83px;height: 115px;border-radius: 50%;position: absolute;}
	.eye1 { left: 185px; top: 122px; transform: rotate(45deg); }
	.eye2 { left: 329px; top: 122px; transform: rotate(-45deg); }
	.eye1:before, .eye2:before { content: ""; width: 40px; height: 40px; border: #fff 5px solid; border-radius: 100%; position: absolute; }
	.eye1:before { right: 10px; top: 22px; }
	.eye2:before { left: 10px; top: 22px; }
	.eye1:after, .eye2:after { content: ""; width: 10px; height: 10px; background: #9b9b9b; border-radius: 100%; position: absolute; }
	.eye1:after { right: 27px; top: 31px; }
	.eye2:after { left: 41px; top: 44px; }
	.face {position: absolute;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;}
	.c_blue { border: #6bcdf3 5px solid; width: 280px; height: 224px; left: 150px; top: 78px; }
	.c_red { border: #af2350 5px solid; width: 287px; height: 233px; left: 146px; top: 73px; }
	.c_purple { border: #5d75b3 5px solid; width: 295px; height: 240px; left: 142px; top: 70px; }
	.c_yellow { border: #ffc346 5px solid; width: 305px; height: 248px; left: 137px; top: 65px; }
	.c_green { border: #7fcb58 5px solid; width: 313px; height: 256px; left: 133px; top: 61px; }
	.arm1, .arm2 { background: #333; position: absolute; z-index: -1; }
	.arm1 {width: 75px;height: 118px;left: 64px;top: 244px;transform: rotate(45deg);border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;}
	.arm2 {width: 75px;height: 148px;left: 463px;top: 162px;transform: rotate(37deg);border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;}
	.arm2:before { content: ""; width: 16px; height: 24px; background: #bc242c; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(45deg); left: 32px; top: 20px; }
	.arm2:after { content: ""; width: 16px; height: 24px; background: #bc242c; position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: rotate(-45deg); left: 26px; top: 20px; }
	.arm_c { content: ""; width: 16px; height: 24px; position: absolute; left: 426px; top: 20px; }
	.nose{background-color: #333333; position: absolute;left: 284px;top: 187px;width: 28px;height: 18px;border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;}
	.mouse {position: absolute;left: 265px;top: 205px;width: 68px;height: 25px;border-radius: 48%;border: #393939 7px solid;border-top: none;border-left: 0;border-right: 0;}
	.leg1, .leg2 {background: #333;position: absolute;width: 83px;height: 80px;border-radius: 0 0 30px 30px;z-index: -1;}
	.leg1 { left: 187px; top: 423px; }
	.leg2 { left: 328px; top: 423px; }
	.leg1:after, .leg2:after { content: ""; width: 43px; height: 30px; position: absolute; background: #333; border-radius: 30px; }
	.leg1:after { bottom: 0; right: -3px; }
	.leg2:after { bottom: 0; left: -3px; }

	* {
	margin: 0;
	padding: 0;
	}
	body {
	font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
	background: #fff;
	}
	.bdd {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 500px;
	margin-top: -250px;
	margin-left: -300px;
	}
	.m_body {
	width: 362px;
	height: 410px;
	border: #393939 8px solid;
	margin: 50px auto;
	border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
	position: absolute;
	left: 109px;
	top: -30px;
	background: url(logo.png) no-repeat center bottom 20px #fff;
	background-size: 63px;
	}
	.ear1,
	.ear2 {
	background: #393939;
	width: 81px;
	height: 115px;
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	}
	.ear1 {
	left: 150px;
	top: 26px;
	transform: rotate(-10deg);
	}
	.ear2 {
	left: 362px;
	top: 28px;
	transform: rotate(10deg);
	}
	.eye1,
	.eye2 {
	background: #393939;
	width: 83px;
	height: 115px;
	border-radius: 50%;
	position: absolute;
	}
	.eye1 {
	left: 185px;
	top: 122px;
	transform: rotate(45deg);
	&:before {
	right: 10px;
	top: 22px;
	}
	&:after {
	right: 27px;
	top: 31px;
	}
	}
	.eye2 {
	left: 329px;
	top: 122px;
	transform: rotate(-45deg);
	&:before {
	left: 10px;
	top: 22px;
	}
	&:after {
	left: 41px;
	top: 44px;
	}
	}
	.eye1:before,
	.eye2:before {
	content: "";
	width: 40px;
	height: 40px;
	border: #fff 5px solid;
	border-radius: 100%;
	position: absolute;
	}
	.eye1:after,
	.eye2:after {
	content: "";
	width: 10px;
	height: 10px;
	background: #9b9b9b;
	border-radius: 100%;
	position: absolute;
	}
	.face {
	position: absolute;
	border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
	}
	.c_blue {
	border: #6bcdf3 5px solid;
	width: 280px;
	height: 224px;
	left: 150px;
	top: 78px;
	}
	.c_red {
	border: #af2350 5px solid;
	width: 287px;
	height: 233px;
	left: 146px;
	top: 73px;
	}
	.c_purple {
	border: #5d75b3 5px solid;
	width: 295px;
	height: 240px;
	left: 142px;
	top: 70px;
	}
	.c_yellow {
	border: #ffc346 5px solid;
	width: 305px;
	height: 248px;
	left: 137px;
	top: 65px;
	}
	.c_green {
	border: #7fcb58 5px solid;
	width: 313px;
	height: 256px;
	left: 133px;
	top: 61px;
	}
	.arm1,
	.arm2 {
	background: #333;
	position: absolute;
	z-index: -1;
	}
	.arm1 {
	width: 75px;
	height: 118px;
	left: 64px;
	top: 244px;
	transform: rotate(45deg);
	border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
	}
	.arm2 {
	width: 75px;
	height: 148px;
	left: 463px;
	top: 162px;
	transform: rotate(37deg);
	border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
	&:before {
	content: "";
	width: 16px;
	height: 24px;
	background: #bc242c;
	position: absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform: rotate(45deg);
	left: 32px;
	top: 20px;
	}
	&:after {
	content: "";
	width: 16px;
	height: 24px;
	background: #bc242c;
	position: absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	transform: rotate(-45deg);
	left: 26px;
	top: 20px;
	}
	}
	.arm_c {
	content: "";
	width: 16px;
	height: 24px;
	position: absolute;
	left: 426px;
	top: 20px;
	}
	.nose {
	background-color: #333333;
	position: absolute;
	left: 284px;
	top: 187px;
	width: 28px;
	height: 18px;
	border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
	}
	.mouse {
	position: absolute;
	left: 265px;
	top: 205px;
	width: 68px;
	height: 25px;
	border-radius: 48%;
	border: #393939 7px solid;
	border-top: none;
	border-left: 0;
	border-right: 0;
	}
	.leg1,
	.leg2 {
	background: #333;
	position: absolute;
	width: 83px;
	height: 80px;
	border-radius: 0 0 30px 30px;
	z-index: -1;
	}
	.leg1 {
	left: 187px;
	top: 423px;
	&:after {
	bottom: 0;
	right: -3px;
	}
	}
	.leg2 {
	left: 328px;
	top: 423px;
	&:after {
	bottom: 0;
	left: -3px;
	}
	}
	.leg1:after,
	.leg2:after {
	content: "";
	width: 43px;
	height: 30px;
	position: absolute;
	background: #333;
	border-radius: 30px;
	}

# 效果图

# 雪容融

# HTML 部分

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>雪容融</title>
	</head>
	<body>
	<div class="xrr">
	<div class="cap">
	<div class="cap1"></div>
	<div class="cap2"></div>
	<div class="cap3"></div>
	<div class="cap4"></div>
	<div class="cap5"></div>
	<div class="cap6"></div>
	<div class="cap7"></div>
	<div class="cap8"></div>
	</div>
	<div class="snow">
	<div class="snow1"></div>
	<div class="snow2"></div>
	<div class="snow3"></div>
	<div class="snow4"></div>
	<div class="snow5"></div>
	<div class="snow6"></div>
	<div class="snow7"></div>
	<div class="snow8"></div>
	<div class="snow9"></div>
	<div class="snow10"></div>
	</div>
	<div class="x_head">
	<div class="x_head_line1"></div>
	<div class="x_head_line2"></div>
	<div class="x_head_line3"></div>
	<div class="x_head_line4"></div>
	<div class="x_head_line5"></div>
	</div>
	<div class="x_face">
	<div class="x_face1"></div>
	<div class="x_face2"></div>
	<div class="x_face3"></div>
	<div class="x_face4"></div>
	<div class="x_face5"></div>
	<div class="x_face6"></div>
	<div class="x_face7"></div>
	<div class="x_face8"></div>
	<div class="x_face9"></div>
	</div>
	<div class="x_eye1"></div>
	<div class="x_eye2"></div>
	<div class="rouge1"></div>
	<div class="rouge2"></div>
	<div class="x_body">
	<div class="abdomen"></div>
	</div>
	<div class="scarf"></div>
	<div class="scarf2">
	<div class="line1"></div>
	<div class="line2"></div>
	<div class="line3"></div>
	<div class="line4"></div>
	</div>
	<div class="x_arm1"></div>
	<div class="x_arm2"></div>
	<div class="x_leg1"></div>
	<div class="x_leg2"></div>
	</div>
	</body>
	</html>

# CSS 部分

	* {
	margin: 0;
	padding: 0
	}

	body {
	font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
	background: #fff;
	}

	.xrr {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 500px;
	margin-top: -250px;
	margin-left: -300px;
	}

	.x_head {
	position: absolute;
	width: 366px;
	height: 297px;
	left: 97px;
	top: 63px;
	background: #d62b01;
	border: #b82b00 8px solid;
	border-radius: 166px;
	}

	.x_head_line1,
	.x_head_line2,
	.x_head_line3 {
	position: absolute;
	background: #d62b01;
	border: #b82b00 4px solid;
	}

	.x_head_line1 {
	width: 323px;
	height: 298px;
	border-radius: 50%;
	left: 15px;
	top: -7px;
	}

	.x_head_line2 {
	width: 177px;
	height: 301px;
	border-radius: 59%;
	left: 90px;
	top: -7px;
	}

	.x_head_line3 {
	width: 52px;
	height: 301px;
	border-radius: 80%;
	left: 163px;
	top: -3px;
	border-right: 0;
	border-top: 0;
	border-bottom: 0;
	}

	.x_head_line4 {
	width: 311px;
	height: 30px;
	left: 21px;
	top: 26px;
	position: absolute;
	border: 6px solid #b82b00;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	}

	.x_head_line5 {
	width: 284px;
	height: 74px;
	left: 41px;
	top: -3px;
	position: absolute;
	border: #d62b01 30px solid;
	border-radius: 50%;
	border-right: transparent;
	border-left: transparent;
	border-bottom: transparent;
	}

	.cap1 {
	border: #f9ad47 6px solid;
	width: 32px;
	height: 12px;
	position: absolute;
	top: -8px;
	left: 268px;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	background: #fff;
	z-index: 6;
	}

	.cap2 {
	border: #f9ad47 6px solid;
	width: 14px;
	height: 10px;
	position: absolute;
	top: 9px;
	left: 249px;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(-89deg);
	background: #fff;
	z-index: 5;
	}

	.cap3 {
	border: #f9ad47 6px solid;
	width: 14px;
	height: 10px;
	position: absolute;
	top: 9px;
	left: 303px;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(89deg);
	background: #fff;
	z-index: 5;
	}

	.cap4 {
	position: absolute;
	top: 20px;
	left: 264px;
	width: 5px;
	height: 5px;
	border: 6px solid #f9ad47;
	border-color: #f9ad47;
	border-left-color: transparent;
	border-radius: 50%;
	z-index: 4;
	transform: rotate(45deg);
	background: #fff;
	}

	.cap5 {
	position: absolute;
	top: 20px;
	left: 297px;
	width: 5px;
	height: 5px;
	border: 6px solid #f9ad47;
	border-color: #f9ad47;
	border-left-color: transparent;
	border-radius: 50%;
	z-index: 4;
	transform: rotate(137deg);
	background: #fff;
	}

	.cap6 {
	border: #f9ad47 6px solid;
	width: 4px;
	height: 1px;
	position: absolute;
	top: 26px;
	left: 276px;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	transform: rotate(346deg);
	z-index: 5;
	}

	.cap7 {
	border: #f9ad47 6px solid;
	width: 4px;
	height: 1px;
	position: absolute;
	top: 26px;
	left: 286px;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	transform: rotate(14deg);
	z-index: 5;
	}

	.cap8 {
	content: "";
	position: absolute;
	background: #fff;
	width: 53px;
	height: 26px;
	border-radius: 30px;
	left: 265px;
	top: 5px;
	}

	.x_body {
	background: #d62b01;
	border: #ba2b00 8px solid;
	width: 156px;
	height: 116px;
	border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%;
	position: absolute;
	top: 364px;
	left: 207px;
	z-index: 2;
	}

	.x_body:before {
	content: "";
	width: 90px;
	height: 84px;
	background: url(logo.png) no-repeat center #fff;
	background-size: 44px;
	position: absolute;
	border-radius: 100%;
	left: 37px;
	top: 23px;
	}

	.x_arm1,
	.x_arm2 {
	background: #d62b01;
	border: #ba2b00 6px solid;
	width: 45px;
	height: 83px;
	position: absolute;
	z-index: 1;
	}

	.x_arm1 {
	top: 346px;
	left: 160px;
	border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%;
	transform: rotate(-45deg);
	}

	.x_arm2 {
	top: 364px;
	left: 357px;
	border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%;
	transform: rotate(321deg);
	}

	.x_leg1,
	.x_leg2 {
	background: #d62b01;
	border: #ba2b00 6px solid;
	width: 46px;
	height: 59px;
	position: absolute;
	z-index: 1;
	border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
	}

	.x_leg1 {
	top: 465px;
	left: 233px;
	}

	.x_leg2 {
	top: 465px;
	left: 303px;
	}

	.x_leg1:before,
	.x_leg2:before {
	content: "";
	position: absolute;
	left: 11px;
	bottom: 3px;
	width: 57%;
	height: 5px;
	border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
	border: #ffc346 6px solid;
	border-top: none;
	border-left: 0;
	border-right: 0;
	}

	.scarf {
	position: absolute;
	left: 212px;
	top: 360px;
	background: #f8a644;
	width: 163px;
	height: 34px;
	border-radius: 15px 19px 51px 51px/17px 16px 24px 17px;
	z-index: 2
	}

	.scarf2 {
	position: absolute;
	left: 223px;
	top: 374px;
	background: #f8a644;
	width: 44px;
	height: 77px;
	border-radius: 0 0 12px 5px;
	transform: rotate(18deg);
	z-index: 2;
	}

	.line1,
	.line2,
	.line3,
	.line4 {
	background: #f8a644;
	position: absolute;
	width: 4px;
	height: 16px;
	border-radius: 0 0 10px 10px;
	border: #d62b01 4px solid;
	border-top: 0;
	}

	.line1 {
	left: 5px;
	top: 62px;
	}

	.line2 {
	left: 13px;
	top: 61px;
	}

	.line3 {
	left: 21px;
	top: 60px;
	}

	.line4 {
	left: 28px;
	top: 59px;
	}

	.rouge1,
	.rouge2 {
	width: 42px;
	height: 37px;
	position: absolute;
	background: #e95535;
	border-radius: 40px;
	}

	.rouge1 {
	left: 162px;
	top: 225px;
	}

	.rouge2 {
	left: 364px;
	top: 230px;
	}

	.x_eye1,
	.x_eye2 {
	width: 21px;
	height: 28px;
	position: absolute;
	background: #3d3d3d;
	border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%;
	}

	.x_eye1 {
	left: 221px;
	top: 210px;
	}

	.x_eye2 {
	left: 333px;
	top: 210px;
	}

	.x_eye1:before,
	.x_eye2:before {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 6px;
	height: 8px;
	border-radius: 10px;
	background: #fff;
	transform: rotate(21deg);
	}

	.x_face {
	width: 282px;
	height: 160px;
	position: absolute;
	left: 146px;
	top: 139px;
	border-radius: 80px 80px 20px 40px;
	}

	.x_face1,
	.x_face2,
	.x_face3,
	.x_face4,
	.x_face5,
	.x_face6,
	.x_face7,
	.x_face8 {
	border: #b92c00 6px solid;
	border-radius: 50%;
	border-right: transparent;
	border-left: transparent;
	border-top: transparent;
	background: #fff;
	position: absolute;
	}

	.x_face1 {
	width: 78px;
	height: 87px;
	left: 10px;
	top: 50px;
	transform: rotate(58deg);
	}

	.x_face2 {
	width: 73px;
	height: 55px;
	left: 120px;
	top: -3px;
	transform: rotate(29deg);
	border: #b92c00 6px solid;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	}

	.x_face3 {
	width: 72px;
	height: 78px;
	left: 204px;
	top: 33px;
	transform: rotate(322deg);
	border-radius: 0 100% 100% 0/50%;
	border: #b92c00 6px solid;
	border-left: none;
	}

	.x_face4 {
	width: 81px;
	height: 85px;
	left: 64px;
	top: 3px;
	transform: rotate(165deg);
	}

	.x_face5 {
	width: 73px;
	height: 69px;
	left: 19px;
	top: 33px;
	transform: rotate(137deg);
	}

	.x_face6 {
	width: 49px;
	height: 67px;
	left: 218px;
	top: 79px;
	transform: rotate(303deg);
	}

	.x_face7 {
	width: 188px;
	height: 74px;
	left: 51px;
	top: 82px;
	}

	.x_face8 {
	width: 29px;
	height: 13px;
	left: 182px;
	top: 33px;
	transform: rotate(38deg);
	z-index: 2;
	background: none;
	border: 6px solid #b92c00;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	}

	.x_face8:after {
	content: "";
	width: 29px;
	height: 13px;
	right: -6px;
	top: -12px;
	position: absolute;
	border: 6px solid #b92c00;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #d62b01;
	border-top-color: transparent;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	}

	.x_face9 {
	width: 170px;
	height: 119px;
	background: #ffffff;
	left: 40px;
	top: 19px;
	border-radius: 100%;
	position: absolute;
	}

	.x_face9:before {
	content: "";
	background: #ffffff;
	border-radius: 100%;
	right: -14px;
	top: 31px;
	width: 35px;
	height: 37px;
	position: absolute;
	transform: rotate(30deg);
	}

	.snow1 {
	width: 105px;
	height: 16px;
	transform: rotate(341deg);
	left: 147px;
	top: 57px;
	position: absolute;
	z-index: 3;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	background: #fff;
	border-right: 0;
	}

	.snow2 {
	position: absolute;
	width: 78px;
	height: 20px;
	left: 243px;
	top: 29px;
	z-index: 2;
	background: #fff;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	}

	.snow2:after {
	content: "";
	width: 80px;
	height: 16px;
	background: #ffffff;
	position: absolute;
	border-radius: 10px;
	top: 13px;
	left: -1px;
	}

	.snow3 {
	position: absolute;
	width: 44px;
	height: 13px;
	left: 228px;
	top: 63px;
	z-index: 2;
	background: #fff;
	border: 6px solid #83b9e8;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	border-left: 0;
	border-right: 0;
	}

	.snow4 {
	position: absolute;
	width: 42px;
	height: 11px;
	left: 268px;
	top: 58px;
	z-index: 3;
	background: none;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(4deg);
	border-left: 0;
	border-right: 0;
	}

	.snow5 {
	position: absolute;
	width: 41px;
	height: 15px;
	left: 300px;
	top: 56px;
	z-index: 2;
	background: #fff;
	border: 6px solid #83b9e8;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	transform: rotate(359deg);
	border-right: 0;
	border-left: 0;
	}

	.snow6 {
	background: none;
	border: 6px solid #83b9e8;
	position: absolute;
	left: 150px;
	top: 72px;
	width: 62px;
	height: 14px;
	border-radius: 24px;
	transform: rotate(340deg);
	z-index: 2;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	}

	.snow7 {
	border: 6px solid #83b9e8;
	position: absolute;
	left: 362px;
	top: 69px;
	width: 58px;
	height: 13px;
	border-radius: 24px;
	transform: rotate(23deg);
	z-index: 3;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	}

	.snow8 {
	position: absolute;
	width: 32px;
	height: 6px;
	left: 203px;
	top: 69px;
	z-index: 4;
	background: none;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	border-right: 0;
	transform: rotate(357deg);
	}

	.snow9 {
	position: absolute;
	width: 40px;
	height: 4px;
	left: 332px;
	top: 65px;
	z-index: 4;
	background: none;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(16deg);
	border-left: 0;
	border-right: 0;
	}

	.snow10 {
	width: 97px;
	height: 16px;
	transform: rotate(21deg);
	left: 320px;
	top: 54px;
	position: absolute;
	z-index: 3;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	background: #fff;
	border-left: 0;
	}

	* { margin: 0; padding: 0 }
	body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; background: #fff; }
	.xrr {position: absolute; left: 50%; top: 50%; width: 600px; height: 500px; margin-top: -250px; margin-left: -300px; }
	.x_head { position: absolute; width: 366px; height: 297px; left: 97px; top: 63px; background: #d62b01; border: #b82b00 8px solid; border-radius: 166px; }
	.x_head_line1, .x_head_line2, .x_head_line3 { position: absolute; background: #d62b01; border: #b82b00 4px solid; }
	.x_head_line1 { width: 323px; height: 298px; border-radius: 50%; left: 15px; top: -7px; }
	.x_head_line2 { width: 177px; height: 301px; border-radius: 59%; left: 90px; top: -7px; }
	.x_head_line3 { width: 52px; height: 301px; border-radius: 80%; left: 163px; top: -3px; border-right: 0; border-top: 0; border-bottom: 0; }
	.x_head_line4 { width: 311px; height: 30px; left: 21px; top: 26px; position: absolute; border: 6px solid #b82b00; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
	.x_head_line5 { width: 284px; height: 74px; left: 41px; top: -3px; position: absolute; border: #d62b01 30px solid; border-radius: 50%; border-right: transparent; border-left: transparent; border-bottom: transparent; }
	.cap1 { border: #f9ad47 6px solid; width: 32px; height: 12px; position: absolute; top: -8px; left: 268px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; z-index: 6; }
	.cap2 { border: #f9ad47 6px solid; width: 14px; height: 10px; position: absolute; top: 9px; left: 249px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(-89deg); background: #fff; z-index: 5; }
	.cap3 { border: #f9ad47 6px solid; width: 14px; height: 10px; position: absolute; top: 9px; left: 303px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(89deg); background: #fff; z-index: 5; }
	.cap4 { position: absolute; top: 20px; left: 264px; width: 5px; height: 5px; border: 6px solid #f9ad47; border-color: #f9ad47; border-left-color: transparent; border-radius: 50%; z-index: 4; transform: rotate(45deg); background: #fff; }
	.cap5 { position: absolute; top: 20px; left: 297px; width: 5px; height: 5px; border: 6px solid #f9ad47; border-color: #f9ad47; border-left-color: transparent; border-radius: 50%; z-index: 4; transform: rotate(137deg); background: #fff; }
	.cap6 { border: #f9ad47 6px solid; width: 4px; height: 1px; position: absolute; top: 26px; left: 276px; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; transform: rotate(346deg); z-index: 5; }
	.cap7 { border: #f9ad47 6px solid; width: 4px; height: 1px; position: absolute; top: 26px; left: 286px; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; transform: rotate(14deg); z-index: 5; }
	.cap8 { content: ""; position: absolute; background: #fff; width: 53px; height: 26px; border-radius: 30px; left: 265px; top: 5px; }
	.x_body { background: #d62b01; border: #ba2b00 8px solid; width: 156px; height: 116px; border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%; position: absolute; top: 364px; left: 207px; z-index: 2; }
	.x_body:before {content: "";width: 90px;height: 84px;background: url(logo.png) no-repeat center #fff;background-size: 44px;position: absolute;border-radius: 100%;left: 37px;top: 23px;}
	.x_arm1, .x_arm2 { background: #d62b01; border: #ba2b00 6px solid; width: 45px; height: 83px; position: absolute; z-index: 1; }
	.x_arm1 { top: 346px; left: 160px; border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%; transform: rotate(-45deg); }
	.x_arm2 { top: 364px; left: 357px; border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%; transform: rotate( 321deg ); }
	.x_leg1, .x_leg2 { background: #d62b01; border: #ba2b00 6px solid; width: 46px; height: 59px; position: absolute; z-index: 1; border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%; }
	.x_leg1 { top: 465px; left: 233px; }
	.x_leg2 { top: 465px; left: 303px; }
	.x_leg1:before, .x_leg2:before { content: ""; position: absolute; left: 11px; bottom: 3px; width: 57%; height: 5px; border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%; border: #ffc346 6px solid; border-top: none; border-left: 0; border-right: 0; }
	.scarf { position: absolute; left: 212px; top: 360px; background: #f8a644; width: 163px; height: 34px; border-radius: 15px 19px 51px 51px/17px 16px 24px 17px; z-index: 2 }
	.scarf2 { position: absolute; left: 223px; top: 374px; background: #f8a644; width: 44px; height: 77px; border-radius: 0 0 12px 5px; transform: rotate(18deg); z-index: 2; }
	.line1, .line2, .line3, .line4 { background: #f8a644; position: absolute; width: 4px; height: 16px; border-radius: 0 0 10px 10px; border: #d62b01 4px solid; border-top: 0; }
	.line1 { left: 5px; top: 62px; }
	.line2 { left: 13px; top: 61px; }
	.line3 { left: 21px; top: 60px; }
	.line4 { left: 28px; top: 59px; }
	.rouge1, .rouge2 { width: 42px; height: 37px; position: absolute; background: #e95535; border-radius: 40px; }
	.rouge1 { left: 162px; top: 225px; }
	.rouge2 { left: 364px; top: 230px; }
	.x_eye1, .x_eye2 { width: 21px; height: 28px; position: absolute; background: #3d3d3d; border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%; }
	.x_eye1 { left: 221px; top: 210px; }
	.x_eye2 { left: 333px; top: 210px; }
	.x_eye1:before, .x_eye2:before { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 8px; border-radius: 10px; background: #fff; transform: rotate(21deg); }
	.x_face { width: 282px; height: 160px; position: absolute; left: 146px; top: 139px; border-radius: 80px 80px 20px 40px; }
	.x_face1, .x_face2, .x_face3, .x_face4, .x_face5, .x_face6, .x_face7, .x_face8 { border: #b92c00 6px solid; border-radius: 50%; border-right: transparent; border-left: transparent; border-top: transparent; background: #fff; position: absolute; }
	.x_face1 { width: 78px; height: 87px; left: 10px; top: 50px; transform: rotate(58deg); }
	.x_face2 { width: 73px; height: 55px; left: 120px; top: -3px; transform: rotate(29deg); border: #b92c00 6px solid; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
	.x_face3 { width: 72px; height: 78px; left: 204px; top: 33px; transform: rotate(322deg); border-radius: 0 100% 100% 0/50%; border: #b92c00 6px solid; border-left: none; }
	.x_face4 { width: 81px; height: 85px; left: 64px; top: 3px; transform: rotate(165deg); }
	.x_face5 { width: 73px; height: 69px; left: 19px; top: 33px; transform: rotate(137deg); }
	.x_face6 { width: 49px; height: 67px; left: 218px; top: 79px; transform: rotate(303deg); }
	.x_face7 { width: 188px; height: 74px; left: 51px; top: 82px; }
	.x_face8 { width: 29px; height: 13px; left: 182px; top: 33px; transform: rotate(38deg); z-index: 2; background: none; border: 6px solid #b92c00; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; }
	.x_face8:after { content: ""; width: 29px; height: 13px; right: -6px; top: -12px; position: absolute; border: 6px solid #b92c00; border-left-color: transparent; border-right-color: transparent; border-bottom-color: #d62b01; border-top-color: transparent; border-radius: 0 0 50% 50%/0 0 100% 100%; }
	.x_face9 { width: 170px; height: 119px; background: #ffffff; left: 40px; top: 19px; border-radius: 100%; position: absolute; }
	.x_face9:before { content: ""; background: #ffffff; border-radius: 100%; right: -14px; top: 31px; width: 35px; height: 37px; position: absolute; transform: rotate(30deg); }
	.snow1 { width: 105px; height: 16px; transform: rotate(341deg); left: 147px; top: 57px; position: absolute; z-index: 3; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; border-right: 0; }
	.snow2 { position: absolute; width: 78px; height: 20px; left: 243px; top: 29px; z-index: 2; background: #fff; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
	.snow2:after { content: ""; width: 80px; height: 16px; background: #ffffff; position: absolute; border-radius: 10px; top: 13px; left: -1px; }
	.snow3 { position: absolute; width: 44px; height: 13px; left: 228px; top: 63px; z-index: 2; background: #fff; border: 6px solid #83b9e8; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; border-left: 0; border-right: 0; }
	.snow4 { position: absolute; width: 42px; height: 11px; left: 268px; top: 58px; z-index: 3; background: none; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(4deg); border-left: 0; border-right: 0; }
	.snow5 { position: absolute; width: 41px; height: 15px; left: 300px; top: 56px; z-index: 2; background: #fff; border: 6px solid #83b9e8; border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: none; transform: rotate(359deg); border-right: 0; border-left: 0; }
	.snow6 { background: none; border: 6px solid #83b9e8; position: absolute; left: 150px; top: 72px; width: 62px; height: 14px; border-radius: 24px; transform: rotate(340deg); z-index: 2; border-top: 0; border-right: 0; border-left: 0; }
	.snow7 { border: 6px solid #83b9e8; position: absolute; left: 362px; top: 69px; width: 58px; height: 13px; border-radius: 24px; transform: rotate(23deg); z-index: 3; border-top: 0; border-left: 0; border-right: 0; }
	.snow8 { position: absolute; width: 32px; height: 6px; left: 203px; top: 69px; z-index: 4; background: none; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; border-right: 0; transform: rotate(357deg); }
	.snow9 { position: absolute; width: 40px; height: 4px; left: 332px; top: 65px; z-index: 4; background: none; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(16deg); border-left: 0; border-right: 0; }
	.snow10 { width: 97px; height: 16px; transform: rotate(21deg); left: 320px; top: 54px; position: absolute; z-index: 3; border: 6px solid #83b9e8; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; border-left: 0; }

	* {
	margin: 0;
	padding: 0;
	}
	body {
	font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
	background: #fff;
	}
	.xrr {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 500px;
	margin-top: -250px;
	margin-left: -300px;
	}
	.x_head {
	position: absolute;
	width: 366px;
	height: 297px;
	left: 97px;
	top: 63px;
	background: #d62b01;
	border: #b82b00 8px solid;
	border-radius: 166px;
	}
	.x_head_line1,
	.x_head_line2,
	.x_head_line3 {
	position: absolute;
	background: #d62b01;
	border: #b82b00 4px solid;
	}
	.x_head_line1 {
	width: 323px;
	height: 298px;
	border-radius: 50%;
	left: 15px;
	top: -7px;
	}
	.x_head_line2 {
	width: 177px;
	height: 301px;
	border-radius: 59%;
	left: 90px;
	top: -7px;
	}
	.x_head_line3 {
	width: 52px;
	height: 301px;
	border-radius: 80%;
	left: 163px;
	top: -3px;
	border-right: 0;
	border-top: 0;
	border-bottom: 0;
	}
	.x_head_line4 {
	width: 311px;
	height: 30px;
	left: 21px;
	top: 26px;
	position: absolute;
	border: 6px solid #b82b00;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	}
	.x_head_line5 {
	width: 284px;
	height: 74px;
	left: 41px;
	top: -3px;
	position: absolute;
	border: #d62b01 30px solid;
	border-radius: 50%;
	border-right: transparent;
	border-left: transparent;
	border-bottom: transparent;
	}
	.cap1 {
	border: #f9ad47 6px solid;
	width: 32px;
	height: 12px;
	position: absolute;
	top: -8px;
	left: 268px;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	background: #fff;
	z-index: 6;
	}
	.cap2 {
	border: #f9ad47 6px solid;
	width: 14px;
	height: 10px;
	position: absolute;
	top: 9px;
	left: 249px;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(-89deg);
	background: #fff;
	z-index: 5;
	}
	.cap3 {
	border: #f9ad47 6px solid;
	width: 14px;
	height: 10px;
	position: absolute;
	top: 9px;
	left: 303px;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(89deg);
	background: #fff;
	z-index: 5;
	}
	.cap4 {
	position: absolute;
	top: 20px;
	left: 264px;
	width: 5px;
	height: 5px;
	border: 6px solid #f9ad47;
	border-color: #f9ad47;
	border-left-color: transparent;
	border-radius: 50%;
	z-index: 4;
	transform: rotate(45deg);
	background: #fff;
	}
	.cap5 {
	position: absolute;
	top: 20px;
	left: 297px;
	width: 5px;
	height: 5px;
	border: 6px solid #f9ad47;
	border-color: #f9ad47;
	border-left-color: transparent;
	border-radius: 50%;
	z-index: 4;
	transform: rotate(137deg);
	background: #fff;
	}
	.cap6 {
	border: #f9ad47 6px solid;
	width: 4px;
	height: 1px;
	position: absolute;
	top: 26px;
	left: 276px;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	transform: rotate(346deg);
	z-index: 5;
	}
	.cap7 {
	border: #f9ad47 6px solid;
	width: 4px;
	height: 1px;
	position: absolute;
	top: 26px;
	left: 286px;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	transform: rotate(14deg);
	z-index: 5;
	}
	.cap8 {
	content: "";
	position: absolute;
	background: #fff;
	width: 53px;
	height: 26px;
	border-radius: 30px;
	left: 265px;
	top: 5px;
	}
	.x_body {
	background: #d62b01;
	border: #ba2b00 8px solid;
	width: 156px;
	height: 116px;
	border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%;
	position: absolute;
	top: 364px;
	left: 207px;
	z-index: 2;
	&:before {
	content: "";
	width: 90px;
	height: 84px;
	background: url(logo.png) no-repeat center #fff;
	background-size: 44px;
	position: absolute;
	border-radius: 100%;
	left: 37px;
	top: 23px;
	}
	}
	.x_arm1,
	.x_arm2 {
	background: #d62b01;
	border: #ba2b00 6px solid;
	width: 45px;
	height: 83px;
	position: absolute;
	z-index: 1;
	}
	.x_arm1 {
	top: 346px;
	left: 160px;
	border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%;
	transform: rotate(-45deg);
	}
	.x_arm2 {
	top: 364px;
	left: 357px;
	border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%;
	transform: rotate(321deg);
	}
	.x_leg1,
	.x_leg2 {
	background: #d62b01;
	border: #ba2b00 6px solid;
	width: 46px;
	height: 59px;
	position: absolute;
	z-index: 1;
	border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
	}
	.x_leg1 {
	top: 465px;
	left: 233px;
	}
	.x_leg2 {
	top: 465px;
	left: 303px;
	}
	.x_leg1:before,
	.x_leg2:before {
	content: "";
	position: absolute;
	left: 11px;
	bottom: 3px;
	width: 57%;
	height: 5px;
	border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
	border: #ffc346 6px solid;
	border-top: none;
	border-left: 0;
	border-right: 0;
	}
	.scarf {
	position: absolute;
	left: 212px;
	top: 360px;
	background: #f8a644;
	width: 163px;
	height: 34px;
	border-radius: 15px 19px 51px 51px/17px 16px 24px 17px;
	z-index: 2;
	}
	.scarf2 {
	position: absolute;
	left: 223px;
	top: 374px;
	background: #f8a644;
	width: 44px;
	height: 77px;
	border-radius: 0 0 12px 5px;
	transform: rotate(18deg);
	z-index: 2;
	}
	.line1,
	.line2,
	.line3,
	.line4 {
	background: #f8a644;
	position: absolute;
	width: 4px;
	height: 16px;
	border-radius: 0 0 10px 10px;
	border: #d62b01 4px solid;
	border-top: 0;
	}
	.line1 {
	left: 5px;
	top: 62px;
	}
	.line2 {
	left: 13px;
	top: 61px;
	}
	.line3 {
	left: 21px;
	top: 60px;
	}
	.line4 {
	left: 28px;
	top: 59px;
	}
	.rouge1,
	.rouge2 {
	width: 42px;
	height: 37px;
	position: absolute;
	background: #e95535;
	border-radius: 40px;
	}
	.rouge1 {
	left: 162px;
	top: 225px;
	}
	.rouge2 {
	left: 364px;
	top: 230px;
	}
	.x_eye1,
	.x_eye2 {
	width: 21px;
	height: 28px;
	position: absolute;
	background: #3d3d3d;
	border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%;
	}
	.x_eye1 {
	left: 221px;
	top: 210px;
	}
	.x_eye2 {
	left: 333px;
	top: 210px;
	}
	.x_eye1:before,
	.x_eye2:before {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 6px;
	height: 8px;
	border-radius: 10px;
	background: #fff;
	transform: rotate(21deg);
	}
	.x_face {
	width: 282px;
	height: 160px;
	position: absolute;
	left: 146px;
	top: 139px;
	border-radius: 80px 80px 20px 40px;
	}
	.x_face1,
	.x_face2,
	.x_face3,
	.x_face4,
	.x_face5,
	.x_face6,
	.x_face7,
	.x_face8 {
	border: #b92c00 6px solid;
	border-radius: 50%;
	border-right: transparent;
	border-left: transparent;
	border-top: transparent;
	background: #fff;
	position: absolute;
	}
	.x_face1 {
	width: 78px;
	height: 87px;
	left: 10px;
	top: 50px;
	transform: rotate(58deg);
	}
	.x_face2 {
	width: 73px;
	height: 55px;
	left: 120px;
	top: -3px;
	transform: rotate(29deg);
	border: #b92c00 6px solid;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	}
	.x_face3 {
	width: 72px;
	height: 78px;
	left: 204px;
	top: 33px;
	transform: rotate(322deg);
	border-radius: 0 100% 100% 0/50%;
	border: #b92c00 6px solid;
	border-left: none;
	}
	.x_face4 {
	width: 81px;
	height: 85px;
	left: 64px;
	top: 3px;
	transform: rotate(165deg);
	}
	.x_face5 {
	width: 73px;
	height: 69px;
	left: 19px;
	top: 33px;
	transform: rotate(137deg);
	}
	.x_face6 {
	width: 49px;
	height: 67px;
	left: 218px;
	top: 79px;
	transform: rotate(303deg);
	}
	.x_face7 {
	width: 188px;
	height: 74px;
	left: 51px;
	top: 82px;
	}
	.x_face8 {
	width: 29px;
	height: 13px;
	left: 182px;
	top: 33px;
	transform: rotate(38deg);
	z-index: 2;
	background: none;
	border: 6px solid #b92c00;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	&:after {
	content: "";
	width: 29px;
	height: 13px;
	right: -6px;
	top: -12px;
	position: absolute;
	border: 6px solid #b92c00;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #d62b01;
	border-top-color: transparent;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	}
	}
	.x_face9 {
	width: 170px;
	height: 119px;
	background: #ffffff;
	left: 40px;
	top: 19px;
	border-radius: 100%;
	position: absolute;
	&:before {
	content: "";
	background: #ffffff;
	border-radius: 100%;
	right: -14px;
	top: 31px;
	width: 35px;
	height: 37px;
	position: absolute;
	transform: rotate(30deg);
	}
	}
	.snow1 {
	width: 105px;
	height: 16px;
	transform: rotate(341deg);
	left: 147px;
	top: 57px;
	position: absolute;
	z-index: 3;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	background: #fff;
	border-right: 0;
	}
	.snow2 {
	position: absolute;
	width: 78px;
	height: 20px;
	left: 243px;
	top: 29px;
	z-index: 2;
	background: #fff;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	&:after {
	content: "";
	width: 80px;
	height: 16px;
	background: #ffffff;
	position: absolute;
	border-radius: 10px;
	top: 13px;
	left: -1px;
	}
	}
	.snow3 {
	position: absolute;
	width: 44px;
	height: 13px;
	left: 228px;
	top: 63px;
	z-index: 2;
	background: #fff;
	border: 6px solid #83b9e8;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	border-left: 0;
	border-right: 0;
	}
	.snow4 {
	position: absolute;
	width: 42px;
	height: 11px;
	left: 268px;
	top: 58px;
	z-index: 3;
	background: none;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(4deg);
	border-left: 0;
	border-right: 0;
	}
	.snow5 {
	position: absolute;
	width: 41px;
	height: 15px;
	left: 300px;
	top: 56px;
	z-index: 2;
	background: #fff;
	border: 6px solid #83b9e8;
	border-radius: 0 0 50% 50%/0 0 100% 100%;
	border-top: none;
	transform: rotate(359deg);
	border-right: 0;
	border-left: 0;
	}
	.snow6 {
	background: none;
	border: 6px solid #83b9e8;
	position: absolute;
	left: 150px;
	top: 72px;
	width: 62px;
	height: 14px;
	border-radius: 24px;
	transform: rotate(340deg);
	z-index: 2;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	}
	.snow7 {
	border: 6px solid #83b9e8;
	position: absolute;
	left: 362px;
	top: 69px;
	width: 58px;
	height: 13px;
	border-radius: 24px;
	transform: rotate(23deg);
	z-index: 3;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	}
	.snow8 {
	position: absolute;
	width: 32px;
	height: 6px;
	left: 203px;
	top: 69px;
	z-index: 4;
	background: none;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	border-right: 0;
	transform: rotate(357deg);
	}
	.snow9 {
	position: absolute;
	width: 40px;
	height: 4px;
	left: 332px;
	top: 65px;
	z-index: 4;
	background: none;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	transform: rotate(16deg);
	border-left: 0;
	border-right: 0;
	}
	.snow10 {
	width: 97px;
	height: 16px;
	transform: rotate(21deg);
	left: 320px;
	top: 54px;
	position: absolute;
	z-index: 3;
	border: 6px solid #83b9e8;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	background: #fff;
	border-left: 0;
	}

# 效果图

Shoka主题：新增博客新年灯笼

2022-01-05T07:00:00.000Z

新增：博客页面右上角新年灯笼

# 前言

本文参考：知更鸟：过年啦，挂灯笼！（原作者）
之前的 wordpress 主题也搞过这个灯笼，还是挺简单的，临近农历新年，在这个主题再搞一下

# 实现

# 新增主题设置

在主题的 yml 文件中，找到 footer ，下面新增 latern 选项，如下：

	footer:
	# Specify the date when the site was setup. If not defined, current year will be used.
	since: 2020
	# …………（省略）
	count: true
	powered: true
	# 新增 latern
	lantern:
	enable: true #是否开启
	word1: 春 #第一个字
	word2: 节 #第二个字

# 新增 `div`

在 themes\shoka\layout\_partials\footer.njk 中新增（可以在 {%- if theme.footer.powered %} 这句代码前增加以下内容)

	{%- if theme.footer.lantern.enable %}
	<!-- 灯笼 1 -->
	<div class="deng-box">
	<div class="deng">
	<div class="xian"></div>
	<div class="deng-a">
	<div class="deng-b"><div class="deng-t">{{ theme.footer.lantern.word2 }}</div></div>
	</div>
	<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
	</div>
	</div>

	<!-- 灯笼 2 -->
	<div class="deng-box1">
	<div class="deng">
	<div class="xian"></div>
	<div class="deng-a">
	<div class="deng-b"><div class="deng-t">{{ theme.footer.lantern.word1 }}</div></div>
	</div>
	<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
	</div>
	</div>
	{%- endif %}

# 添加样式表

在根目录的 source\_data 新建文件命名为 custom.styl ；

填入以下内容：

	.deng-box {
	position: fixed;
	top: -40px;
	right: -20px;
	z-index: -1;
	}
	.deng-box1 {
	position: fixed;
	top: -30px;
	right: 10px;
	z-index: -1;
	.deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 5s infinite ease-in-out;
	box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
	}
	}
	.deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3s infinite ease-in-out;
	box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
	&:before {
	position: absolute;
	top: -7px;
	left: 29px;
	height: 12px;
	width: 60px;
	content: " ";
	display: block;
	z-index: 999;
	border-radius: 5px 5px 0 0;
	border: solid 1px #dc8f03;
	background: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
	}
	&:after {
	position: absolute;
	bottom: -7px;
	left: 10px;
	height: 12px;
	width: 60px;
	content: " ";
	display: block;
	margin-left: 20px;
	border-radius: 0 0 5px 5px;
	border: solid 1px #dc8f03;
	background: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
	}
	}
	.deng-a {
	width: 100px;
	height: 90px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.1);
	margin: 12px 8px 8px 10px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03;
	}
	.deng-b {
	width: 45px;
	height: 90px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.1);
	margin: -4px 8px 8px 26px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03;
	}
	.xian {
	position: absolute;
	top: -20px;
	left: 60px;
	width: 2px;
	height: 20px;
	background: #dc8f03;
	}
	.shui-a {
	position: relative;
	width: 5px;
	height: 20px;
	margin: -5px 0 0 59px;
	-webkit-animation: swing 4s infinite ease-in-out;
	-webkit-transform-origin: 50% -45px;
	background: #ffa500;
	border-radius: 0 0 5px 5px;
	}
	.shui-b {
	position: absolute;
	top: 14px;
	left: -2px;
	width: 10px;
	height: 10px;
	background: #dc8f03;
	border-radius: 50%;
	}
	.shui-c {
	position: absolute;
	top: 18px;
	left: -2px;
	width: 10px;
	height: 35px;
	background: #ffa500;
	border-radius: 0 0 0 5px;
	}
	.deng-t {
	font-size: 3.2rem;
	color: #dc8f03;
	font-weight: bold;
	line-height: 85px;
	text-align: center;
	}
	.night .deng-t,
	.night .deng-box,
	.night .deng-box1 {
	background: transparent !important;
	}
	@-moz-keyframes swing {
	0% {
	-moz-transform: rotate(-10deg)
	}
	50% {
	-moz-transform: rotate(10deg)
	}
	100% {
	-moz-transform: rotate(-10deg)
	}
	}

	@-webkit-keyframes swing {
	0% {
	-webkit-transform: rotate(-10deg)
	}
	50% {
	-webkit-transform: rotate(10deg)
	}
	100% {
	-webkit-transform: rotate(-10deg)
	}
	}

重新生成，🆗

完成！

Shoka主题：新增博客访问统计页面

2021-12-29T07:30:00.000Z

新增页面：新增博客访问统计页面

# 前言

参考文章：

Hexo 博客实时访问统计图
基于 Butterfly 主题的首页置顶 gitcalendar

本教程将会泄漏属于百度统计的 站点 ID 和百度统计 AccessToken ，请先前往百度统计用户手册了解，介意者请谨慎部署。

可能有时会出现跨域请求的问题

开通前条件：链接：https://tongji.baidu.com/web/help/article?id=123

需要自有网站昨日 PV 数大于 100

# 实现

# 加入百度统计

进入百度统计，注册或者登录，新增站点，填入信息；
获取统计代码：在管理 -> 代码管理 -> 代码获取
因为主题内置百度统计，只需要下图框内的代码：
找到主题 yml 文件中 baidu_analytics ，后面填入上图框中的问号后面的代码；

# 新建页面

hexo new page census

在根目录下的 source 下新建文件夹，命名为 census ，并在该目录下新建文件： index.md ，填入以下内容：

	---
	title: 博客访问统计
	date: 2021-12-29 15:30:00
	---

# 更改语言并添加到菜单

刚才新建的 index.md 中，如果是用命令创建， title 一行是英文，改成对应的中文就可以了；
在 themes\shoka\languages\zh-CN.yml 中，找到 menu 一行，新增 census: 博客访问统计 ；
在主题的 yml 文件里，在 menu 里添加到菜单中

# 获取网站统计数据

进入百度统计 - 管理 - 数据导出服务；
开通数据导出服务，获得 API Key 与 Secret Key ，之后直接打开数据导出服务页面或者登录开发者服务管理获取 API Key 与 Secret Key ;
通过如下 URL 进入百度账号登录页，此处的登录账号就是您登录百度统计查看报告数据的账号，登录完成后将跳转至获取 code 的页面：
http://openapi.baidu.com/oauth/2.0/authorize?response_type=code&client_id={CLIENT_ID}&redirect_uri=oob&scope=basic&display=popup
其中：
- {CLIENT_ID} 填写您的 API Key

通过身份验证获取 ACCESS_TOKEN ；用户同意授权后，将跳转至一个获取 CODE 的页面。复制 CODE 值后可将其加入以下 URL 换取 ACCESS_TOKEN ：

http://openapi.baidu.com/oauth/2.0/token?grant_type=authorization_code&code={CODE}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}&redirect_uri=oob

其中：

{CLIENT_ID} 填写您的 API Key
{CLIENT_SECRET} 填写您的 Secret Key
{CODE} 填写您刚才拿到的 CODE

返回如下（举例）：

	{
	"expires_in": 2592000,
	"refresh_token":"2.385d55f8615fdfd9edb7c4b5ebdc3e39.604800.1293440400-2346678-124328",
	"access_token":"1.a6b7dbd428f731035f771b8d15063f61.86400.1292922000-2346678-124328",
	"session_secret":"ANXxSNjwQDugf8615OnqeikRMu2bKaXCdlLxn",
	"session_key":" 248APxvxjCZ0VEC43EYrvxqaK4oZExMB",
	"scope":"basic"
	}

（更新 Access Token 时使用，第一次跳过此步）从上述步骤得到的数据中包含 ACCESS_TOKEN 和 REFRESH_TOKEN 两个值，其中 ACCESS_TOKEN 的有效期为一个月， REFRESH_TOKEN 的有效期为十年。 REFRESH_TOKEN 的作用就是刷新获取新的 ACCESS_TOKEN 和 REFRESH_TOKEN ，如此反复操作来实现 ACCESS_TOKEN 有效期永久的机制。一旦 ACCESS_TOKEN 过期，可根据以下请求更换新的 ACCESS_TOKEN 和 REFRESH_TOKEN ：

http://openapi.baidu.com/oauth/2.0/token?grant_type=refresh_token&refresh_token={REFRESH_TOKEN}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}

其中：

{REFRESH_TOKEN} 填写您的 Refresh Token
{CLIENT_ID} 填写您的 API Key
{CLIENT_SECRET} 填写您的 Secret Key

返回如下（举例）：

	{
	"expires_in": 2592000,
	"refresh_token":"2.385d55f8615fdfd9edb7c4b5ebdc3e39.604800.1293440400-2346678-124328",
	"access_token":"1.a6b7dbd428f731035f771b8d15063f61.86400.1292922000-2346678-124328",
	"session_secret":"ANXxSNjwQDugf8615OnqeikRMu2bKaXCdlLxn",
	"session_key":" 248APxvxjCZ0VEC43EYrvxqaK4oZExMB",
	"scope":"basic"
	}

调用百度统计 API：
第 5 步获取的 ACCESS_TOKEN 是所调用 API 的用户级参数，结合各 API 的应用级参数即可正常调用 API 获取数据，填写下面链接参数后打开链接获取网站 ID：
https://openapi.baidu.com/rest/2.0/tongji/config/getSiteList?access_token={ACCESS_TOKEN}
其中：
- {ACCESS_TOKEN} 填写您的 Access Token
也可以在 Tongji API 调试工具输入 ACCESS_TOKEN 获取网址 ID；
在 Tongji API 调试工具选择需要获取的报告数据，填写 ACCESS_TOKEN 、必填参数、选填参数获取百度统计数据。

# 博客访问统计代码

在新建的 census 下的 index.md 中添加以下内容（注意修改一些数据）：

	{% raw %}
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script> <!-- 绘制地图需要另外添加 china.js -->
	<!-- 访问地图 -->
	<div id="map-chart" style="border-radius: 8px; height: 600px; padding: 10px;"></div>
	<!-- 访问趋势 30 日 -->
	<div id="trends-chartday" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<!-- 访问趋势月 -->
	<div id="trends-chartmonth" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<!-- 访问来源 -->
	<div id="sources-chart" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<!-- 外部来源 -->
	<div id="links-chart" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<script>
	var start_date = '20211020' // 开始日期
	var date = new Date();
	var end_date = '' + date.getFullYear() + (date.getMonth() > 8 ? (date.getMonth() + 1) : ("0" + (date.getMonth() + 1))) + (date.getDate() > 9 ? date.getDate() : ("0" + date.getDate())); // 结束日期
	var access_token = 'xxxxxxxxx' // accessToken
	var site_id = 'xxxxxxxx' // 网址 id
	var dataUrl = '（后续自建的API网址）/api?access_token=' + access_token + '&site_id=' + site_id
	var metrics = 'pv_count' // 统计访问次数 PV 填写 'pv_count'，统计访客数 UV 填写 'visitor_count'，二选一
	var metricsName = (metrics === 'pv_count' ? '访问次数' : (metrics === 'visitor_count' ? '访客数' : ''))
	// 这里为了统一颜色选取的是 “明暗模式” 下的两种字体颜色，也可以自己定义
	var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'

	// 访问地图
	function mapChart () {
	let script = document.createElement("script")
	let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=visit/district/a';
	fetch(dataUrl + paramUrl).then(data => data.json()).then(data => {
	let mapName = data.result.items[0]
	let mapValue = data.result.items[1]
	let mapArr = []
	let max = mapValue[0][0]
	for (let i = 0; i < mapName.length; i++) {
	mapArr.push({ name: mapName[i][0].name, value: mapValue[i][0] })
	}
	let mapArrJson = JSON.stringify(mapArr)
	script.innerHTML = `
	var mapChart = echarts.init(document.getElementById('map-chart'), 'light');
	var mapOption = {
	title: {
	text: '博客访问来源地图',
	x: 'center',
	textStyle: {
	color: '${color}'
	}
	},
	tooltip: {
	trigger: 'item'
	},
	visualMap: {
	min: 0,
	max: ${max},
	left: 'left',
	top: 'bottom',
	text: ['高','低'],
	color: ['#8a2be2', '#afeeee'],
	textStyle: {
	color: '${color}'
	},
	calculable: true
	},
	series: [{
	name: '${metricsName}',
	type: 'map',
	mapType: 'china',
	showLegendSymbol: false,
	label: {
	emphasis: {
	show: false
	}
	},
	itemStyle: {
	normal: {
	areaColor: 'rgba(255, 255, 255, 0.1)',
	borderColor: '#121212'
	},
	emphasis: {
	areaColor: 'gold'
	}
	},
	data: ${mapArrJson}
	}]
	};
	mapChart.setOption(mapOption);
	window.addEventListener("resize", () => {
	mapChart.resize();
	});`
	document.getElementById('map-chart').after(script);
	}).catch(function (error) {
	console.log(error);
	});
	}

	// 访问趋势日
	function trendsChartDay () {
	let script = document.createElement("script")
	let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=trend/time/a&gran=day'
	fetch(dataUrl + paramUrl)
	.then(data => data.json())
	.then(data => {
	let dayArr = []
	let dayValueArr = []
	let dayName = data.result.items[0]
	let dayValue = data.result.items[1]
	for (let i = Math.min(dayName.length, 30) - 1; i >= 0; i--) {
	dayArr.push(dayName[i][0].substring(0, 13))
	if (dayValue[i][0] !== '--') {
	dayValueArr.push(dayValue[i][0])
	} else {
	dayValueArr.push(null)
	}
	}
	let dayArrJson = JSON.stringify(dayArr)
	let dayValueArrJson = JSON.stringify(dayValueArr)
	script.innerHTML = `
	var trendsChartDay = echarts.init(document.getElementById('trends-chartday'), 'light');
	var trendsOptionDay = {
	textStyle: {
	color: '${color}'
	},
	title: {
	text: '博客访问统计图（30日）',
	x: 'center',
	textStyle: {
	color: '${color}'
	}
	},
	tooltip: {
	trigger: 'axis'
	},
	xAxis: {
	name: '日期',
	type: 'category',
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: '${color}'
	}
	},
	data: ${dayArrJson}
	},
	yAxis: {
	name: '${metricsName}',
	type: 'value',
	splitLine: {
	show: false
	},
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: '${color}'
	}
	}
	},
	series: [{
	name: '${metricsName}',
	type: 'line',
	smooth: true,
	lineStyle: {
	width: 0
	},
	showSymbol: false,
	itemStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	},
	{
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	areaStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	}, {
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	data: ${dayValueArrJson},
	markLine: {
	data: [{
	name: '平均值',
	type: 'average'
	}]
	}
	}]
	};
	trendsChartDay.setOption(trendsOptionDay);
	window.addEventListener("resize", () => {
	trendsChartDay.resize();
	});`
	document.getElementById('trends-chartday').after(script);
	}).catch(function (error) {
	console.log(error);
	});
	}

	// 访问趋势月
	function trendsChartMonth () {
	let script = document.createElement("script")
	let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=trend/time/a&gran=month'
	fetch(dataUrl + paramUrl)
	.then(data => data.json())
	.then(data => {
	let monthArr = []
	let monthValueArr = []
	let monthName = data.result.items[0]
	let monthValue = data.result.items[1]
	for (let i = Math.min(monthName.length, 12) - 1; i >= 0; i--) {
	monthArr.push(monthName[i][0].substring(0, 7).replace('/', '-'))
	if (monthValue[i][0] !== '--') {
	monthValueArr.push(monthValue[i][0])
	} else {
	monthValueArr.push(null)
	}
	}
	let monthArrJson = JSON.stringify(monthArr)
	let monthValueArrJson = JSON.stringify(monthValueArr)
	script.innerHTML = `
	var trendsChartMonth = echarts.init(document.getElementById('trends-chartmonth'), 'light');
	var trendsOptionMonth = {
	textStyle: {
	color: '${color}'
	},
	title: {
	text: '博客访问统计图（每月）',
	x: 'center',
	textStyle: {
	color: '${color}'
	}
	},
	tooltip: {
	trigger: 'axis'
	},
	xAxis: {
	name: '日期',
	type: 'category',
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: '${color}'
	}
	},
	data: ${monthArrJson}
	},
	yAxis: {
	name: '${metricsName}',
	type: 'value',
	splitLine: {
	show: false
	},
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: '${color}'
	}
	}
	},
	series: [{
	name: '${metricsName}',
	type: 'line',
	smooth: true,
	lineStyle: {
	width: 0
	},
	showSymbol: false,
	itemStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	},
	{
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	areaStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	}, {
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	data: ${monthValueArrJson},
	markLine: {
	data: [{
	name: '平均值',
	type: 'average'
	}]
	}
	}]
	};
	trendsChartMonth.setOption(trendsOptionMonth);
	window.addEventListener("resize", () => {
	trendsChartMonth.resize();
	});`
	document.getElementById('trends-chartmonth').after(script);
	}).catch(function (error) {
	console.log(error);
	});
	}

	// 访问来源
	function sourcesChart () {
	let script = document.createElement("script")
	let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/all/a';
	fetch(dataUrl + paramUrl)
	.then(data => data.json())
	.then(data => {
	monthArr = [];
	let sourcesName = data.result.items[0]
	let sourcesValue = data.result.items[1]
	let sourcesArr = []
	for (let i = 0; i < sourcesName.length; i++) {
	sourcesArr.push({ name: sourcesName[i][0].name, value: sourcesValue[i][0] })
	}
	let sourcesArrJson = JSON.stringify(sourcesArr)
	script.innerHTML = `
	var sourcesChart = echarts.init(document.getElementById('sources-chart'), 'light');
	var sourcesOption = {
	textStyle: {
	color: '${color}'
	},
	title: {
	text: '博客访问来源统计图',
	x: 'center',
	textStyle: {
	color: '${color}'
	}
	},
	legend: {
	top: 'bottom',
	textStyle: {
	color: '${color}'
	}
	},
	tooltip: {
	trigger: 'item',
	formatter: "{a} <br/>{b} : {c} ({d}%)"
	},
	series: [{
	name: '${metricsName}',
	type: 'pie',
	radius: [30, 80],
	center: ['50%', '50%'],
	roseType: 'area',
	label: {
	formatter: "{b} : {c} ({d}%)"
	},
	data: ${sourcesArrJson},
	itemStyle: {
	emphasis: {
	shadowBlur: 10,
	shadowOffsetX: 0,
	shadowColor: 'rgba(255, 255, 255, 0.5)'
	}
	}
	}]
	};
	sourcesChart.setOption(sourcesOption);
	window.addEventListener("resize", () => {
	sourcesChart.resize();
	});`
	document.getElementById('sources-chart').after(script);
	}).catch(function (error) {
	console.log(error);
	});
	}

	// 外部来源
	function linksChart () {
	let script = document.createElement("script")
	let paramUrl = '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/link/a';
	fetch(dataUrl + paramUrl)
	.then(data => data.json())
	.then(data => {
	monthArr = [];
	let linksName = data.result.items[0]
	let linksValue = data.result.items[1]
	let linksArr = []
	for (let i = 0; i < 20; i++) {
	linksArr.push({ name: linksName[i][0].name, value: linksValue[i][0] })
	}
	let linksArrJson = JSON.stringify(linksArr)
	script.innerHTML = `
	var linksChart = echarts.init(document.getElementById('links-chart'), 'light');
	var linksOption = {
	textStyle: {
	color: '${color}'
	},
	title: {
	text: '外部链接访问TOP20',
	x: 'center',
	textStyle: {
	color: '${color}'
	}
	},
	legend: {
	top: 'bottom',
	type: 'scroll',
	textStyle: {
	color: '${color}'
	}
	},
	tooltip: {
	trigger: 'item',
	formatter: "{a} <br/>{b} : {c} ({d}%)"
	},
	series: [{
	name: '${metricsName}',
	type: 'pie',
	radius: [30, 80],
	center: ['50%', '50%'],
	roseType: 'area',
	label: {
	formatter: "{b} : {c} ({d}%)"
	},
	data: ${linksArrJson},
	itemStyle: {
	emphasis: {
	shadowBlur: 10,
	shadowOffsetX: 0,
	shadowColor: 'rgba(255, 255, 255, 0.5)'
	}
	}
	}]
	};
	linksChart.setOption(linksOption);
	window.addEventListener("resize", () => {
	linksChart.resize();
	});`
	document.getElementById('links-chart').after(script);
	}).catch(function (error) {
	console.log(error);
	});
	}


	function switchVisitChart () {
	// 这里为了统一颜色选取的是 “明暗模式” 下的两种字体颜色，也可以自己定义
	let color = document.documentElement.getAttribute('data-theme') === null ? '#fff' : '#000'
	try {
	let mapOptionNew = mapOption
	mapOptionNew.title.textStyle.color = color
	mapOptionNew.visualMap.textStyle.color = color
	mapChart.setOption(mapOptionNew)
	} catch (error) {
	console.log(error)
	}
	try {
	let trendsOptionDayNew = trendsOptionDay
	trendsOptionDayNew.title.textStyle.color = color
	trendsOptionDayNew.xAxis.axisLine.lineStyle.color = color
	trendsOptionDayNew.yAxis.axisLine.lineStyle.color = color
	trendsOptionDayNew.textStyle.color = color
	trendsChartDay.setOption(trendsOptionDayNew)
	} catch (error) {
	console.log(error)
	}
	try {
	let trendsOptionMonthNew = trendsOptionMonth
	trendsOptionMonthNew.title.textStyle.color = color
	trendsOptionMonthNew.xAxis.axisLine.lineStyle.color = color
	trendsOptionMonthNew.yAxis.axisLine.lineStyle.color = color
	trendsOptionMonthNew.textStyle.color = color
	trendsChartMonth.setOption(trendsOptionMonthNew)
	} catch (error) {
	console.log(error)
	}
	try {
	let sourcesOptionNew = sourcesOption
	sourcesOptionNew.title.textStyle.color = color
	sourcesOptionNew.legend.textStyle.color = color
	sourcesOptionNew.textStyle.color = color
	sourcesChart.setOption(sourcesOptionNew)
	} catch (error) {
	console.log(error)
	}
	try {
	let linksOptionNew = linksOption
	linksOptionNew.title.textStyle.color = color
	linksOptionNew.legend.textStyle.color = color
	linksOptionNew.textStyle.color = color
	linksChart.setOption(linksOptionNew)
	} catch (error) {
	console.log(error)
	}
	}

	if (document.getElementById('map-chart')) mapChart()
	if (document.getElementById('trends-chartday')) trendsChartDay()
	if (document.getElementById('trends-chartmonth')) trendsChartMonth()
	if (document.getElementById('sources-chart')) sourcesChart()
	if (document.getElementById('links-chart')) linksChart()

	document.getElementsByClassName("theme")[0].addEventListener("click", function () { setTimeout(switchVisitChart, 100) })
	</script>
	{% endraw %}

上面是博主自己统计图的代码，可以用以参考，根据自己的需求绘制百度分析统计图。

# 自建 API

上面代码中的有一处需要自建 API，下面来介绍如何自建 API：

注册 Vercel，尽量用国外邮箱；
进入 dashboard，新建项目
导入 github 项目：
填入 Erukon 的 GitHub api 项目：https://github.com/Eurkon/baidu-tongji-api
项目网址：

https://github.com/Eurkon/baidu-tongji-api

如果提示是否是你的仓库，选否， Vercel 会自动帮你 fork 这个仓库到你的 Github 账号里。
导入静态页面仓库之前，需要为你的 Github 安装 Vercel ，此处建议选择 All repositories ，意为为所有仓库安装，当然，你也可以选择只为当前仓库安装，也就是 Only select repositories 。

如果哪天反悔了，可以在 github-> 头像 (右上角)->settings->Applications（列表下数上第四个）->Installed Github Apps 里修改。
之后会识别出项目文件，单击 Continue
Vercel 的 PROJECT NAME 可以自定义，不用太过在意，但是之后不支持修改，若要改名，只能删除 PROJECT 以后重建一个了。下方三个选项保持默认就好。
等待一会，完成部署，会出现以下界面：
记住 DOMAINS 后面的域名，修改上面代码中 dataUrl 的域名部分。

# 解决 pjax 加载问题

和新增文章统计页面一样的方法，配置一次就可以了，如果第一次配置，参考新增文章统计页面的对应位置，或者看下面（水一次），如果已经配置过，请跳过！

如果做到此步，就已经成功了，但是会发现，第一次会加载不出来，显示空白，只有再次点击或者刷新后才会显示，下面来解决此问题

在主题的 yml 配置文件中，找到最下面的 vendors ，在 js 一栏新增 echarts 引入：

	vendors:
	js:
	……
	echarts: npm/echarts@5.2.2/dist/echarts.min.js

代码：

echarts: npm/echarts@5.2.2/dist/echarts.min.js

找到 themes\shoka\scripts\generaters\script.js ，大概 24 行，找到 js ，新增 echarts 内容，内容为下：

	auto_scroll: theme.auto_scroll,
	js: {
	valine: theme.vendors.js.valine,
	chart: theme.vendors.js.chart,
	copy_tex: theme.vendors.js.copy_tex,
	fancybox: theme.vendors.js.fancybox,
	echarts: theme.vendors.js.echarts, // 新增
	},
	css: {

代码：

echarts: theme.vendors.js.echarts,

找到 themes\shoka\scripts\helpers\assets.js ，找到大概 50 行，新增 echarts 的 config ：

	if (!config) return '';

	//Get a font list from config
	let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => { // 这里在 quicklink 后新增
	if (config[item]) {
	return config[item];
	}
	return '';
	});

改后

	if (!config) return '';

	//Get a font list from config
	let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink', 'echarts'].map(item => {
	if (config[item]) {
	return config[item];
	}
	return '';
	});

# 其他

本文中最长的 script 标签中的代码过于长，可以直接像本文一样加在 index.md 中，也可以单独保存这部分代码，上传到 cdn 中，通过外部引入；
如果想要修改图表的样式，请参考 echarts 官网：https://echarts.apache.org/zh/index.html，根据自行喜好对 ECharts 统计图进行修改。

完成！

Shoka主题：新增文章统计页面

2021-12-28T12:30:00.000Z

新增页面：新增文章统计页面

# 前言

最开始参考的 matery 主题的统计页面，后来看到 Eurkon 大佬的文章，因此，本文章根据大佬的 Hexo 博客文章统计图适配本主题而成，改进了一些地方（pjax 问题、明暗模式问题），还留存一点 bug（黑暗模式刷新后字体会变成日间模式的颜色，未解决）

参考文章：Hexo 博客文章统计图

# 实现

# 新建页面

hexo new page statistics

在根目录下的 source 下新建文件夹，命名为 statistics ，并在该目录下新建文件： index.md ，填入以下内容：

	---
	title: 文章统计
	date: 2021-12-28 20:30:00
	---

# 安装 cheerio

在博客根目录下打开 git bash ，安装 cheerio ：

npm i cheerio --save

# 更改语言并添加到菜单

刚才新建的 index.md 中，如果是用命令创建， title 一行是英文，改成对应的中文就可以了；
在 themes\shoka\languages\zh-CN.yml 中，找到 menu 一行，新增 statistics: 文章统计 ；
在主题的 yml 文件里，在 menu 里添加到菜单中

# 文章统计代码（已适配明暗模式）

在 themes\shoka\scripts\helpers\ 目录下新建文件命名为 charts.js ，填入以下内容（注意修改下面有注释的开始统计时间）：

	'use strict';

	const cheerio = require('cheerio')
	const moment = require('moment')

	hexo.extend.filter.register('after_render:html', function (locals) {
	const $ = cheerio.load(locals)
	const calendar = $('#posts-calendar')
	const post = $('#posts-chart')
	const tag = $('#tags-chart')
	const category = $('#categories-chart')
	let htmlEncode = false

	if (calendar.length > 0 \|\| post.length > 0 \|\| tag.length > 0 \|\| category.length > 0) {
	if (calendar.length > 0 && $('#postsCalendar').length === 0) {
	if (calendar.attr('data-encode') === 'true') htmlEncode = true
	calendar.after(postsCalendar())
	}
	if (post.length > 0 && $('#postsChart').length === 0) {
	if (post.attr('data-encode') === 'true') htmlEncode = true
	post.after(postsChart())
	}
	if (tag.length > 0 && $('#tagsChart').length === 0) {
	if (tag.attr('data-encode') === 'true') htmlEncode = true
	tag.after(tagsChart(tag.attr('data-length')))
	}
	if (category.length > 0 && $('#categoriesChart').length === 0) {
	if (category.attr('data-encode') === 'true') htmlEncode = true
	category.after(categoriesChart())
	}

	if (htmlEncode) {
	return $.root().html().replace(/&#/g, '&#')
	} else {
	return $.root().html()
	}
	} else {
	return locals
	}
	}, 15)

	function postsCalendar () {
	// calculate range.
	const start_date = moment().subtract(1, 'years');
	const end_date = moment();
	const rangeArr = '["' + start_date.format('YYYY-MM-DD') + '", "' + end_date.format('YYYY-MM-DD') + '"]';

	// post and count map.
	var dateMap = new Map();
	hexo.locals.get('posts').forEach(function (post) {
	var date = post.date.format('YYYY-MM-DD');
	var count = dateMap.get(date);
	dateMap.set(date, count == null \|\| count == undefined ? 1 : count + 1);
	});

	// loop the data for the current year, generating the number of post per day
	var i = 0;
	var datePosts = '[';
	var day_time = 3600 * 24 * 1000;
	for (var time = start_date; time <= end_date; time += day_time) {
	var date = moment(time).format('YYYY-MM-DD');
	datePosts = (i === 0 ? datePosts + '["' : datePosts + ', ["') + date + '", '
	+ (dateMap.has(date) ? dateMap.get(date) : 0) + ']';
	i++;
	}
	datePosts += ']';

	return `
	<script id="postsCalendar">
	var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
	var postsCalendar = echarts.init(document.getElementById('posts-calendar'), 'light');
	var postsCalendarOption = {
	textStyle: {
	color: color
	},
	title: {
	top: 0,
	text: '文章发布日历',
	left: 'center',
	textStyle: {
	color: color
	}
	},
	tooltip: {
	formatter: function (obj) {
	var value = obj.value;
	return '<div style="font-size: 14px;">' + value[0] + '：' + value[1] + '</div>';
	}
	},
	visualMap: {
	show: true,
	showLabel: true,
	categories: [0, 1, 2, 3, 4],
	calculable: true,
	textStyle:{
	color: color
	},
	inRange: {
	symbol: 'rect',
	color: ['#d7dbe2', '#fc9bd9', '#f838b2', '#c4067e', '#540336']
	},
	itemWidth: 12,
	itemHeight: 12,
	orient: 'horizontal',
	left: 'center',
	bottom: 80
	},
	calendar: {
	left: 'center',
	range: ${rangeArr},
	cellSize: [13, 13],
	splitLine: {
	show: true
	},
	itemStyle: {
	color: '#111',
	borderColor: '#fff',
	borderWidth: 2
	},
	yearLabel: {
	show: false,
	color: color
	},
	monthLabel: {
	nameMap: 'cn',
	fontSize: 11,
	color: color
	},
	dayLabel: {
	formatter: '{start} 1st',
	nameMap: 'cn',
	fontSize: 11,
	color: color
	}
	},
	series: [{
	type: 'heatmap',
	coordinateSystem: 'calendar',
	calendarIndex: 0,
	data: ${datePosts}
	}]
	};
	postsCalendar.setOption(postsCalendarOption);
	window.addEventListener("resize", () => {
	postsCalendar.resize();
	});
	</script>`
	}

	function postsChart () {
	const startDate = moment('2020-08') // 开始统计的时间
	const endDate = moment()

	const monthMap = new Map()
	const dayTime = 3600 * 24 * 1000
	for (let time = startDate; time <= endDate; time += dayTime) {
	const month = moment(time).format('YYYY-MM')
	if (!monthMap.has(month)) {
	monthMap.set(month, 0)
	}
	}
	hexo.locals.get('posts').forEach(function (post) {
	const month = post.date.format('YYYY-MM')
	if (monthMap.has(month)) {
	monthMap.set(month, monthMap.get(month) + 1)
	}
	})
	const monthArr = JSON.stringify([...monthMap.keys()])
	const monthValueArr = JSON.stringify([...monthMap.values()])

	return `
	<script id="postsChart">
	var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
	var postsChart = echarts.init(document.getElementById('posts-chart'), 'light');
	var postsOption = {
	textStyle: {
	color: color
	},
	title: {
	text: '文章发布统计图',
	x: 'center',
	textStyle: {
	color: color
	}
	},
	tooltip: {
	trigger: 'axis'
	},
	xAxis: {
	name: '日期',
	type: 'category',
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: color
	}
	},
	data: ${monthArr}
	},
	yAxis: {
	name: '文章篇数',
	type: 'value',
	splitLine: {
	show: false
	},
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: color
	}
	}
	},
	series: [{
	name: '文章篇数',
	type: 'line',
	smooth: true,
	lineStyle: {
	width: 0
	},
	showSymbol: false,
	itemStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	},
	{
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	areaStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	}, {
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	data: ${monthValueArr},
	markLine: {
	data: [{
	name: '平均值',
	type: 'average'
	}]
	}
	}]
	};
	postsChart.setOption(postsOption);
	window.addEventListener("resize", () => {
	postsChart.resize();
	});
	</script>`
	}

	function tagsChart (len) {
	const tagArr = []
	hexo.locals.get('tags').map(function (tag) {
	tagArr.push({ name: tag.name, value: tag.length })
	})
	tagArr.sort((a, b) => { return b.value - a.value })

	let dataLength = Math.min(tagArr.length, len) \|\| tagArr.length
	const tagNameArr = []
	const tagCountArr = []
	for (let i = 0; i < dataLength; i++) {
	tagNameArr.push(tagArr[i].name)
	tagCountArr.push(tagArr[i].value)
	}
	const tagNameArrJson = JSON.stringify(tagNameArr)
	const tagCountArrJson = JSON.stringify(tagCountArr)

	return `
	<script id="tagsChart">
	var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
	var tagsChart = echarts.init(document.getElementById('tags-chart'), 'light');
	var tagsOption = {
	textStyle: {
	color: color
	},
	title: {
	text: 'Top ${dataLength} 标签统计图',
	x: 'center',
	textStyle: {
	color: color
	}
	},
	tooltip: {},
	xAxis: {
	name: '标签',
	type: 'category',
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: color
	}
	},
	data: ${tagNameArrJson}
	},
	yAxis: {
	name: '文章篇数',
	type: 'value',
	splitLine: {
	show: false
	},
	axisTick: {
	show: false
	},
	axisLine: {
	show: true,
	lineStyle: {
	color: color
	}
	}
	},
	series: [{
	name: '文章篇数',
	type: 'bar',
	data: ${tagCountArrJson},
	itemStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 165)'
	},
	{
	offset: 1,
	color: 'rgba(1, 191, 236)'
	}])
	},
	emphasis: {
	itemStyle: {
	opacity: 1,
	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	offset: 0,
	color: 'rgba(128, 255, 195)'
	},
	{
	offset: 1,
	color: 'rgba(1, 211, 255)'
	}])
	}
	},
	markLine: {
	data: [{
	name: '平均值',
	type: 'average'
	}]
	}
	}]
	};
	tagsChart.setOption(tagsOption);
	window.addEventListener("resize", () => {
	tagsChart.resize();
	});
	</script>`
	}

	function categoriesChart () {
	const categoryArr = []
	hexo.locals.get('categories').map(function (category) {
	categoryArr.push({ name: category.name, value: category.length })
	})
	categoryArr.sort((a, b) => { return b.value - a.value });
	const categoryArrJson = JSON.stringify(categoryArr)

	return `
	<script id="categoriesChart">
	var color = document.documentElement.getAttribute('data-theme') === null ? '#000' : '#fff'
	var categoriesChart = echarts.init(document.getElementById('categories-chart'), 'light');
	var categoriesOption = {
	textStyle: {
	color: color
	},
	title: {
	text: '文章分类统计图',
	x: 'center',
	textStyle: {
	color: color
	}
	},
	legend: {
	top: 'bottom',
	textStyle: {
	color: color
	}
	},
	tooltip: {
	trigger: 'item',
	formatter: "{a} <br/>{b} : {c} ({d}%)"
	},
	series: [{
	name: '文章篇数',
	type: 'pie',
	radius: [30, 80],
	center: ['50%', '50%'],
	roseType: 'area',
	label: {
	formatter: "{b} : {c} ({d}%)"
	},
	data: ${categoryArrJson},
	itemStyle: {
	emphasis: {
	shadowBlur: 10,
	shadowOffsetX: 0,
	shadowColor: 'rgba(255, 255, 255, 0.5)'
	}
	}
	}]
	};
	categoriesChart.setOption(categoriesOption);
	window.addEventListener("resize", () => {
	categoriesChart.resize();
	});
	</script>`
	}

# 使用统计图（已适配明暗模式）

在刚刚新建的 statistics 下的 index.md 中新增内容：

	{% raw %}
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script>
	function switchPostChart () {
	// 这里为了统一颜色选取的是 “明暗模式” 下的两种字体颜色，也可以自己定义
	let color = document.documentElement.getAttribute('data-theme') === null ? '#fff' : '#000'

	if (document.getElementById('posts-calendar')) {
	let postsCalendarNew = postsCalendarOption
	postsCalendarNew.textStyle.color = color
	postsCalendarNew.title.textStyle.color = color
	postsCalendarNew.visualMap.textStyle.color = color
	postsCalendarNew.calendar.itemStyle.color = color
	postsCalendarNew.calendar.yearLabel.color = color
	postsCalendarNew.calendar.monthLabel.color = color
	postsCalendarNew.calendar.dayLabel.color = color
	postsCalendar.setOption(postsCalendarNew)
	}
	if (document.getElementById('posts-chart')) {
	let postsOptionNew = postsOption
	postsOptionNew.textStyle.color = color
	postsOptionNew.title.textStyle.color = color
	postsOptionNew.xAxis.axisLine.lineStyle.color = color
	postsOptionNew.yAxis.axisLine.lineStyle.color = color
	postsChart.setOption(postsOptionNew)
	}
	if (document.getElementById('tags-chart')) {
	let tagsOptionNew = tagsOption
	tagsOptionNew.textStyle.color = color
	tagsOptionNew.title.textStyle.color = color
	tagsOptionNew.xAxis.axisLine.lineStyle.color = color
	tagsOptionNew.yAxis.axisLine.lineStyle.color = color
	tagsChart.setOption(tagsOptionNew)
	}
	if (document.getElementById('categories-chart')) {
	let categoriesOptionNew = categoriesOption
	categoriesOptionNew.textStyle.color = color
	categoriesOptionNew.title.textStyle.color = color
	categoriesOptionNew.legend.textStyle.color = color
	categoriesChart.setOption(categoriesOptionNew)
	}
	}

	document.getElementsByClassName("theme")[0].addEventListener("click", function () { setTimeout(switchPostChart, 100) })
	</script>
	<!-- 文章发布日历 -->
	<div id="posts-calendar" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<!-- 文章发布时间统计图 -->
	<div id="posts-chart" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<!-- 文章标签统计图 -->
	<div id="tags-chart" data-length="10" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	<!-- 文章分类统计图 -->
	<div id="categories-chart" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
	{% endraw %}

其中 tags-chart 的 data-length="10" 属性表示仅显示排名前 10 的标签。
js 引入的顺序不要错，不然会出错

# 解决 pjax 加载问题

如果做到此步，就已经成功了，但是会发现，第一次会加载不出来，显示空白，只有再次点击或者刷新后才会显示，下面来解决此问题

在主题的 yml 配置文件中，找到最下面的 vendors ，在 js 一栏新增 echarts 引入：

	vendors:
	js:
	……
	echarts: npm/echarts@5.2.2/dist/echarts.min.js

代码：

echarts: npm/echarts@5.2.2/dist/echarts.min.js

找到 themes\shoka\scripts\generaters\script.js ，大概 24 行，找到 js ，新增 echarts 内容，内容为下：

	auto_scroll: theme.auto_scroll,
	js: {
	valine: theme.vendors.js.valine,
	chart: theme.vendors.js.chart,
	copy_tex: theme.vendors.js.copy_tex,
	fancybox: theme.vendors.js.fancybox,
	echarts: theme.vendors.js.echarts, // 新增
	},
	css: {

代码：

echarts: theme.vendors.js.echarts,

找到 themes\shoka\scripts\helpers\assets.js ，找到大概 50 行，新增 echarts 的 config ：

	if (!config) return '';

	//Get a font list from config
	let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => { // 这里在 quicklink 后新增
	if (config[item]) {
	return config[item];
	}
	return '';
	});

改后

	if (!config) return '';

	//Get a font list from config
	let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink', 'echarts'].map(item => {
	if (config[item]) {
	return config[item];
	}
	return '';
	});

# 其他

如果想要修改图表的样式，请参考 echarts 官网：https://echarts.apache.org/zh/index.html

完成！

Shoka主题：实现自定义网站字体

2021-12-25T06:30:00.000Z

实现网站自定义的字体

# 前言

可以看见，我的网站全局使用了鸿蒙字体；
网站的字体默认是从 google font 的 api 里加载的；
谷歌的字体库中文字体少的可怜，没有自己喜欢的；
如果想要修改自己喜欢的字体，那就继续看这篇文章吧！

# 实现

# 寻找字体

网络上有很多字体网站，如 100font、字由或者其他渠道的字体；

找到自己喜欢的，下载下来，格式一般为 ttf

# 转换字体格式

web 中字体可能会用 woff 、 woff2 、 eot 等其他格式，所以需要转换下

这里推荐一个好用的字体转换网站：Online @font-face generator — Transfonter
进入网站后，点击 Add fonts 上传自己的字体
在下方的 Formats 里，全部勾选，其他选项保持默认，点击 Convert 进行转换
转换完成后，点击 Download 下载下来，会获得一个压缩包，里面是各个格式的字体，转换字体即完成

# 上传字体

解压压缩包，获得文件夹
如果有购买自己的 CDN 或者存储桶之类的，（防盗链如果要加，要留白名单），上传文件夹上去，获得各种格式的字体的链接
也可以使用百度加速、又拍云、jsDelivr 等 CDN，免费额度够用了

# 修改代码

找到 themes\shoka\source\css\_common\scaffolding\base.styl ;
大概 130 行左右，仿照引入 iconfont 的方式，引入自己的字体

新增代码，使用 css 的 @font-face ：

	@font-face {
	font-family: '字体名称'; // 这个名称后面会用
	src: url('字体.eot'); // 放入对应格式字体的链接，下面都是一样的
	src: url('字体.eot?#iefix') format('embedded-opentype'),
	url('字体.woff2') format('woff2'),
	url('字体.woff') format('woff'),
	url('字体.ttf') format('truetype'),
	url('字体.svg#ic') format('svg');
	}

找到主题的 yml 文件，在 font 下修改字体的样式：

	font:
	enable: true
	# Font options:
	# `external: true` will load this font family from `host` above.
	# `family: Times New Roman`. Without any quotes.
	# `size: x.x`. Use `em` as unit. Default: 1 (16px)

	# Global font settings used for all elements inside <body>.
	global:
	external: true
	family: Mulish #全局字体修改，改成刚才的字体名称
	size:

	# Font settings for alternate title.
	logo:
	external: true
	family: Fredericka the Great
	size: 3.5

	# Font settings for site title.
	title:
	external: true
	family: Noto Serif JP
	size: 2.5

	# Font settings for headlines (<h1> to <h6>).
	headings:
	external: true
	family: Noto Serif SC
	size:

	# Font settings for posts.
	posts:
	external: true
	family:

	# Font settings for <code> and code blocks.
	codes:
	external: true
	family: Inconsolata

根据不同位置的字体需要，改相应部分的字体的 family 为刚才引入的字体名称

完成！

Shoka主题：实现页面背景大图全屏效果

2021-12-25T06:00:00.000Z

实现页面背景大图全屏效果

# 前言

主题默认首页等其他页面大图是半屏，个人喜欢图片占据全屏的效果，因此修改源码

# 实现

# 修改 Stylus

找到 themes\shoka\source\css\_common\outline\header\ 目录，以下修改都是在该目录下修改；

找到 brand.styl , 在 #brand 中修改 height 值:

	#brand {
	position: fixed;
	padding: 3rem 5rem 0;
	text-align: center;
	width: 100%;
	height: 50vh; // 修改为 80vh
	min-height: 10rem;

修改为

	#brand {
	position: fixed;
	padding: 3rem 5rem 0;
	text-align: center;
	width: 100%;
	height: 80vh;
	min-height: 10rem;

找到 header.styl , 在 #header 中修改 height 值:

	#header {
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 50vh; // 修改为 100vh
	text-shadow: 0rem .2rem .3rem alpha(#000, .5);
	color: var(--header-text-color);

修改为

	#header {
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 100vh;
	text-shadow: 0rem .2rem .3rem alpha(#000, .5);
	color: var(--header-text-color);

找到 image.styl , 在 #imgs 中修改 height 值:

	#imgs {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70vh; // 修改为 100vh
	min-height: 25rem;
	z-index: -9;
	background-color: #363636;

修改为

	#imgs {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 25rem;
	z-index: -9;
	background-color: #363636;

找到 tool.styl , 在 #tool 中修改 top 值:

	#tool {
	position: fixed;
	if (hexo-config('sidebar.position') == 'left') {
	right: 1rem;
	} else {
	left: 1rem;
	}

	top: 50vh; // 修改为 90vh
	z-index: $zindex-2;

修改为

	#tool {
	position: fixed;
	if (hexo-config('sidebar.position') == 'left') {
	right: 1rem;
	} else {
	left: 1rem;
	}

	top: 90vh;
	z-index: $zindex-2;

找到 waves.styl , 在 #waves 中修改:

	.waves {
	width: 100%;
	height: 15vh;
	margin-bottom: -.6875rem; // 删除此处
	min-height: 3.125rem;
	max-height: 9.375rem;
	position:relative; // 修改为 absolute
	// 新增 z-index: 4;

	+mobile() {
	height: 10vh;
	}
	}

修改为

	.waves {
	width: 100%;
	height: 15vh;
	bottom: 0;
	min-height: 3.125rem;
	max-height: 9.375rem;
	position: absolute;
	z-index: 4;

	+mobile() {
	height: 10vh;
	}
	}

# 修改 nunjucks (layout)

找到 themes\shoka\layout\_partials\ 目录；

修改 layout.njk , 修改 </header> 的位置，大概 60 行左右:

	</header>
	<div id="waves">
	<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
	<defs>
	<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
	</defs>
	<g class="parallax">
	<use xlink:href="#gentle-wave" x="48" y="0" />
	<use xlink:href="#gentle-wave" x="48" y="3" />
	<use xlink:href="#gentle-wave" x="48" y="5" />
	<use xlink:href="#gentle-wave" x="48" y="7" />
	</g>
	</svg>
	</div>
	<main>

将 header 标签移动到 id 为 waves 的 div 下方，即:

	<div id="waves">
	<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
	<defs>
	<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
	</defs>
	<g class="parallax">
	<use xlink:href="#gentle-wave" x="48" y="0" />
	<use xlink:href="#gentle-wave" x="48" y="3" />
	<use xlink:href="#gentle-wave" x="48" y="5" />
	<use xlink:href="#gentle-wave" x="48" y="7" />
	</g>
	</svg>
	</div>

	</header>
	<main>

# 图片网格效果

2022.06.23 更新

修改 themes\shoka\source\css\_common\outline\header\header.styl ;

最上方的 header 修改如下：

	#header {
	&::before{
	background: url(https://cdn.jsdelivr.net/gh/lavender816/CDN@1.8/img/dot.jpg);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -4;
	background-attachment: fixed;
	}
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 100vh;
	text-shadow: 0rem .2rem .3rem alpha(#000, .5);
	color: var(--header-text-color);

	a:hover {
	color: currentColor;
	}
	}

其中： &::before 是新增的图片网格效果，目前是点状，可以自行下载其他的网格填充。

完成！

Shoka主题：新增个人随笔页面

2021-12-23T10:38:00.000Z

新增页面：个人随笔页面（说说）

# 前言

在一个静态框架中，实现随笔页面随时发布状态
参考官方文档 Artitalk.js - 开始使用

# 实现

# 新建页面

hexo 文件夹中，新建页面
hexo new page talking

# 关闭评论

关闭评论：在 front-matter 里加入 comment: false 关闭本页面的评论；

以下部分内容直接复制的官方文档，复制过来保证完整性
参考官方文档 Artitalk.js - 开始使用

# LeanCloud 的相关准备

TIP

🎃 与 Valine 在同一个页面使用

如果迫切需要将 Artitalk 与 Valine 在同一个页面使用，可以通过 Artitalk 与 Valine 使用同一个 LeanCloud 的应用来解决。

🌍 建议使用国际版的 LeanCloud

因为国际版的 LeanCloud 不需要配置 serverurl，所以推荐使用国际版，速度没有区别，如果使用国内版的 LeanCloud 别忘了填写 serverurl 即可

👀 与 valine 在同一页面使用

如果有这个需要，可以将 artitalk 与 valine 存放在同一个应用中。可以有效避免同一个页面使用两个 leancloud 应用所产生的冲突。

前往 LeanCloud 国际版，注册账号。
注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
绑定完成之后点击 创建应用 ，应用名称随意，接着在 结构化数据 中创建 class ，命名为 shuoshuo 。
在你新建的应用中找到 结构化数据 下的 用户 。点击 添加用户 ，输入想用的用户名及密码。
回到 结构化数据 中，点击 class 下的 shuoshuo 。找到权限，在 Class 访问权限 中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
然后新建一个名为 atComment 的 class，权限什么的使用默认的即可。
点击 class 下的 _User 添加列，列名称为 img ，默认值填上你这个账号想要用的发布说说的头像 url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
在最菜单栏中找到设置 -> 应用 keys，记下来 AppID 和 AppKey ，一会会用。
最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

关于设置权限的这几步
这几步一定要设置好，才可以保证不被 “闲人” 破解发布说说的验证

到此步是官方文档中的配置内容

# 开始使用

在 index.md 中加入以下代码

	{% raw %}
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>
	<div id="artitalk_main"></div>
	<script>
	new Artitalk ({
	appId: '', //appid
	appKey: '', //appkey
	serverURL: '', // 国际版需要
	pageSize: 10,
	shuoPla: ' 发布一些东西吧～', // 相当于 placehoder，发布时显示在输入框
	color1: 'url ("https://xxxxxxxx.png")', // 背景为图片形式
	color2: 'linear-gradient (-45deg, #3A405A, #AEC5EB, #F9DEC9, #E9AFA3) 0% 0% / 400% 400%', // 背景为渐变形式
	color3: '#111' // 字体颜色
	})
	</script>
	{% endraw %}

其他配置项，可以参考官方文档：配置项 | Artitalk.js

# 问题的修复

此时生成后，但是存在一个问题，第一次加载页面会加载不出来，查看报错，显示 artitalk 未定义
解决办法（目前，感觉应该有其他优化方法，不过这个方法目前可行，影响不大）
找见 layout/_partials/head/head.njk ，在 link 标签下新增外部引用的 js

<link rel="alternate" type="application/rss+xml" title="{{config.title}}" href="{{ full_url_for('/rss.xml') }}" />

<link rel="alternate" type="application/atom+xml" title="{{config.title}}" href="{{ full_url_for('/atom.xml') }}" />

<link rel="alternate" type="application/json" title="{{config.title}}" href="{{ full_url_for('/feed.json') }}" />

修改为（新增）

	<link rel="alternate" type="application/rss+xml" title="{{config.title}}" href="{{ full_url_for('/rss.xml') }}" />
	<link rel="alternate" type="application/atom+xml" title="{{config.title}}" href="{{ full_url_for('/atom.xml') }}" />
	<link rel="alternate" type="application/json" title="{{config.title}}" href="{{ full_url_for('/feed.json') }}" />

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>

目前解决问题

完成！

CSS：CSSDiner学习选择器

2021-11-22T16:00:00.000Z

CSSDiner ：练习 CSS 选择器的游戏式网站，网站：CSSDiner: https://flukeout.github.io/

有些关卡有多种方法，第一种标准方法按照右侧指定的格式，其他举一反三；很多其实复杂化了，看看就好

# CSS 选择器

选择器	例子	例子描述
.class	.intro	选择 class="intro" 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id="firstname" 的元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element.class	p.intro	选择 class="intro" 的所有 <p> 元素。
element,element	div, p	选择所有 <div> 元素和所有 < p> 元素。
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择父元素是 <div> 的所有 < p> 元素。
element+element	div + p	选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]	a[href^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]	a[href*="w3schools"]	选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
:active	a:active	选择活动链接。
::after	p::after	在每个 <p> 的内容之后插入内容。
::before	p::before	在每个 <p> 的内容之前插入内容。
:checked	input:checked	选择每个被选中的 <input> 元素。
:default	input:default	选择默认的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 "it"（意大利）的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数个子元素的每个 <p> 元素。
:nth-child(even)	:nth-child(even)	选择属于其父元素的偶数个子元素的每个 <p> 元素。
:nth-child(2n+3)	:nth-child(2n+3)	选择属于其父元素的 2n+3 个子元素的每个 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 "placeholder" 属性的 input 元素。
:read-only	input:read-only	选择已规定 "readonly" 属性的 input 元素。
:read-write	input:read-write	选择未规定 "readonly" 属性的 input 元素。
:required	input:required	选择已规定 "required" 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

# CSS 选择器优先级

总结排序：!important > 行内样式 > ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

！important 规则最重要，大于其它规则
行内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加 1
如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则
注意：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

# Level 1

# 标准方法

plate

# 其他方法

# Level 2

# 标准方法

bento

# 其他方法

*:nth-child(odd)

# Level 3

# 标准方法

#fancy

# 其他方法

	plate:first-child
	plate:nth-child(1)

# Level 4

# 标准方法

plate apple

# 其他方法

	apple:first-child
	plate>apple

# Level 5

# 标准方法

#fancy pickle

# 其他方法

bento+plate pickle

# Level 6

# 标准方法

.small

# 其他方法

	apple.small
	apple:nth-child(2),plate apple:first-child /* 复杂化了 */

# Level 7

# 标准方法

orange.small

# Level 8

# 标准方法

bento orange.small

# Level 9

# 标准方法

plate,bento

# Level 10

# 标准方法

# Level 11

# 标准方法

plate *

# 其他方法

	plate>*
	plate orange,pickle,plate apple

# Level 12

# 标准方法

plate+apple

# Level 13

# 标准方法

bento~pickle

# Level 14

# 标准方法

plate>apple

# Level 15

# 标准方法

orange:first-child

# 其他方法

plate orange:first-child

# Level 16

# 标准方法

plate *:only-child

# 其他方法

	plate :only-child
	apple,plate pickle

# Level 17

# 标准方法

.small:last-child

# 其他方法

	apple,pickle
	apple.small,pickle.small
	#fancy :last-child , plate + pickle / 逐渐复杂哈哈 */

# Level 18

# 标准方法

plate:nth-child(3)

# 其他方法

	plate:nth-last-child(2)
	plate:nth-last-of-type(2)

# Level 19

# 标准方法

bento:nth-last-child(3)

# 其他方法

	bento:nth-child(2)
	bento:nth-of-type(1)
	bento:nth-last-of-type(2)

# Level 20

# 标准方法

apple:first-of-type

# 其他方法

	apple:nth-child(2)
	orange+apple

# Level 21

# 标准方法

plate:nth-of-type(even)

# 其他方法

plate:nth-of-type(2n)

# Level 22

# 标准方法

plate:nth-of-type(2n+3)

# 其他方法

plate:has(apple)  /* 一般不建议用，是 jQuery 里的 */

# Level 23

# 标准方法

apple:only-of-type

# 其他方法

plate apple.small:only-of-type

# Level 24

# 标准方法

.small:last-of-type

# 其他方法

orange:last-of-type , apple:last-of-type

# Level 25

# 标准方法

bento:empty

# 其他方法

bento:nth-child(1),bento:nth-child(4)

# Level 26

# 标准方法

apple:not(.small)

# Level 27

# 标准方法

[for]

# Level 28

# 标准方法

plate[for]

# Level 29

# 标准方法

[for="Vitaly"]

# 其他方法

	bento:nth-child(3)
	bento:nth-of-type(2)
	bento:nth-last-child(2)
	bento:nth-last-of-type(1)

# Level 30

# 标准方法

[for^="Sa"]

# 其他方法

	[for^="S"]
	plate,plate+bento
	plate,bento:first-of-type

# Level 31

# 标准方法

[for$="ato"]

# 其他方法

	[for$="to"]
	[for$="o"]
	bento,plate

# Level 32

# 标准方法

[for*="obb"]

# 其他方法

	[for*="o"]
	[for*="b"]
	bento:nth-child(odd)

Shoka主题：新增主题自动夜间模式

2021-11-14T04:30:00.000Z

新增功能：新增主题自动夜间模式，可以自由调整时间

# 前言

实现判断当前时间实现自动夜间模式

# 实现自动夜间模式

在主题的 yaml 配置文件中，自定义新增配置项（自定义命名）, 我在原本的 darkmode 项下面新增为

	darkmode: false

	# autodarkmode 新增主题自动夜间模式
	auto_dark:
	enable: true #是否开启
	start: 21 #开始时间
	end: 6 #结束时间

代码还是在找到 themes->shoka->source->js->_app，以下修改还是在这里修改。
找到 global.js ，新增函数：

	const autoDarkmode = function(){
	if(CONFIG.auto_dark.enable){
	if(new Date().getHours() >= CONFIG.auto_dark.start \|\| new Date().getHours() <= CONFIG.auto_dark.end){
	changeTheme('dark');
	}else{
	changeTheme();
	}
	}
	}

找到 pjax.js ，新增：

autoDarkmode()   // 新增

我个人的增加位置为大概 133 行

	autoDarkmode() // 在这里

	visibilityListener()
	themeColorListener()

	algoliaSearch(pjax)

在 themes->shoka->scripts->generaters，找到 script.js 大概 21 行左右，可以在

	favicon: {
	normal: theme.images + "/favicon.ico",
	hidden: theme.images + "/failure.ico"
	},
	darkmode: theme.darkmode,
	auto_scroll: theme.auto_scroll,

中间修改为

	favicon: {
	normal: theme.images + "/favicon.ico",
	hidden: theme.images + "/failure.ico"
	},
	darkmode: theme.darkmode,
	auto_dark: theme.auto_dark, // 新增
	auto_scroll: theme.auto_scroll,

完成！

Shoka主题：新增页面下拉小箭头

2021-11-08T09:38:00.000Z

新增功能：页面下拉小箭头平滑跳转到内容部分

# 前言

实现一个下拉小箭头，在全屏界面直接跳转到内容的部分。（模仿 sakura 主题的下拉小箭头）

# 实现下拉小箭头

箭头图标使用的 ic i-angle-down 图标，使用动态效果 .up-down ，名字啥的还是自己起，这里我的命名比较随意。代码还是在找到 themes->shoka->source->js->_app，以下修改还是在这里修改。
找到 global.js ，大概 17 行左右，新增：
var angleBtn = $('#angle');

找到 pjax.js ，大概 20 行左右，仿照 toolBtn，在下方新增：

	if(!angleBtn) {
	angleBtn = siteHeader.createChild('div', {
	id: 'angle',
	innerHTML: '<span><i class="ic i-angle-down" aria-hidden="true"></i></span>'
	});
	}

在下方新增事件监听器：

angleBtn.addEventListener('click',headertopdown);

在 sidebar.js 大概 220 行左右，可以在

	const goToCommentHandle = function () {
	pageScroll($('#comments'));
	}

下方，新增：

	const headertopdown = function () {
	pageScroll($('#main'));
	}

这里直接调用的跳转评论区的函数 pageScroll

修改下 css 问题，在 themes->shoka->source->css->_common->outline->header->header.styl 中最后 (@import... 之前) 新增：

	/* 首页下拉箭头 */

	#angle {
	position: absolute;
	bottom: 10vh;
	left: 50%;
	cursor: pointer;
	z-index: 5;
	transform: translateX(-50%);
	}

	@media (max-width: 860px) {
	#angle {
	bottom: 8vh;
	}
	}

	#angle i {
	font-size: 35px;
	color: #fff;
	@extend .up-down;
	}

完成！

Shoka主题：新增按钮控制看板娘的显示隐藏

2021-11-08T09:16:00.000Z

在安装 hexo 插件 live2d 看板娘后，有时会出现看板娘挡住部分页面的问题，这时需要增加一个右下角的按钮，控制看板娘的显示与隐藏

# 安装 live2d 看板娘

网上有很多教程，这里就不用细说了，直接

npm install --save hexo-helper-live2d

然后再根目录的 yml 下新增 live2d 的各种设置即可

# 开始修改

# 前言

打开 F12，元素 (Elements) 可以看到，关于 live2d 在网页中在网页最下方

<div id="live2d-widget" class="live2d-widget-container" style="position: fixed; left: 0px; bottom: -20px; width: 200px; height: 300px; z-index: 99999; opacity: 1; pointer-events: none; visibility: visible;">...</div>

可以看出 id 为 live2d-widget，这就好说了，只要在 js 里找到这个 id，控制 css 属性的显示隐藏就行了；
这里直接用的 css 属性时 visibility 的 hidden 和 visible 属性

# 具体修改

找到 themes->shoka->source->js->_app，以下修改都是在这里修改。

找到 global.js ，在大概 16 行位置新增按钮的名字（自己起一个），假如为 chooselive2d ，然后修改：

var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents;

修改为

var toolBtn = $('#tool'), toolPlayer, backToTop, goToComment, showContents, chooselive2d;

在 pjax.js 文件里大概 16 行，新增那个按钮的 div 标签，用的图标随意，这里我用的是 ic i-thumbtack 图标，修改：

	if(!toolBtn) {
	toolBtn = siteHeader.createChild('div', {
	id: 'tool',
	innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
	});
	}

修改为：

	if(!toolBtn) {
	toolBtn = siteHeader.createChild('div', {
	id: 'tool',
	innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item live2d"><i class="ic i-thumbtack"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
	});
	}

然后下面代码仿照新增 child 和监听事件

	toolPlayer = toolBtn.child('.player');
	backToTop = toolBtn.child('.back-to-top');
	goToComment = toolBtn.child('.chat');
	showContents = toolBtn.child('.contents');

	backToTop.addEventListener('click', backToTopHandle);
	goToComment.addEventListener('click', goToCommentHandle);
	showContents.addEventListener('click', sideBarToggleHandle);

修改为

	toolPlayer = toolBtn.child('.player');
	backToTop = toolBtn.child('.back-to-top');
	goToComment = toolBtn.child('.chat');
	chooselive2d = toolBtn.child('.live2d') // 新增
	showContents = toolBtn.child('.contents');

	backToTop.addEventListener('click', backToTopHandle);
	goToComment.addEventListener('click', goToCommentHandle);
	chooselive2d.addEventListener('click', chooseLive2dHandle); // 新增
	showContents.addEventListener('click', sideBarToggleHandle);

这里的 chooseLive2dHandle 如下

在 sidebar.js 里大概 220 行左右写实现代码 (和其他 handle 写一起)

新增：

	const chooseLive2dHandle = function () {
	var live2d = document.getElementById("live2d-widget");
	if(live2d.style.visibility == "hidden"){
	live2d.style.visibility = "visible";
	}else{
	live2d.style.visibility = "hidden";
	}
	}

修改下 css 问题，在 themes->shoka->source->css->_common->outline->header->tool.styl 中大概 180 行左右，在 .back-to-top css 代码下，新增：
.live2d {
align-items: center;
justify-content: center;
height: auto;
padding: .4125rem 0 .4125rem 0;
}

成功解决！

Shoka主题：修复浏览器更新后分类卡片的bug

2021-11-08T08:40:00.000Z

在内核为 Chromium 浏览器更新到 94 后，出现了分类卡片左下角，"more..." 出现在正面的 bug。

# 解决方案

# 作者更新

主题作者更新了主题，修复了一些 bug，也解决这个问题，可以参考以下链接 fix・amehime/hexo-theme-shoka@ad3bb60・GitHub

关于修改方案是找到 themes->shoka->source->css->_common->components->pages->home.styl，修改如下：

	$item {
	position: relative;
	color: inherit;
	width: calc(50% - 2rem);
	min-width: calc(50% - 2rem);
	height: 14rem;
	margin: 1rem;
	opacity: 0;

	&.show {
	@extend .slide-up-big-in;
	opacity: 1;
	}

	+mobile() {
	width: calc(100% - 1rem) !important;
	min-width: calc(100% - 1rem) !important;
	margin: 1rem .5rem !important;
	}
	}

	.index.wrap {
	.btn {
	position: absolute;
	bottom: 0;
	right: 0;
	//transform-style: preserve-3d;
	//transform: translateZ(2rem);
	//backface-visibility: hidden; //1 、注释这里
	padding: .3rem 1rem;
	border-radius: 1rem 0;
	color: var(--grey-0);
	background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);

	&::before {
	position: absolute;
	display: block;
	content: '';
	//transform-style: preserve-3d;
	//transform: translateZ(-2rem);
	//backface-visibility: hidden; //2、注释这里
	height: calc(100% - 1rem);
	width: calc(100% - 1rem);
	border-radius: 5rem;
	left: .5rem;
	top: .8rem;
	box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
	background-color: var(--color-pink-a3);
	}

	&:hover {
	transform: translateZ(2.5rem);
	}

	&:hover::before {
	transform: translateZ(-2.5rem);
	}
	}

	//3、加上下面两部分 css 代码
	.active .btn {
	transform-style: preserve-3d;
	transform: translateZ(2rem);
	backface-visibility: hidden;

	&::before {
	transform-style: preserve-3d;
	transform: translateZ(-2rem);
	backface-visibility: hidden;
	}
	}
	// 到这里
	.meta {
	font-size: $font-size-smaller;
	color: var(--grey-5);

	.ic {
	margin-right: .0625rem;
	}

	.item + .item {
	margin-left: .625rem;
	}

	&.footer {
	position: absolute;
	bottom: .5rem;
	max-width: calc(100% - 7rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	justify-content: flex-start;

	span {
	margin-right: .5rem;
	}
	}
	}
	}

# 仍出现的问题

在更新后，虽然正面的 "more..." 消失了，仍存在以下问题：

鼠标在快速在分类卡片移动时，再 hover 结束后，"more..." 还是会突然闪一下再消失，强迫症不满意了。
主页其他文章列表右下角或者左下角的 "more..." 会变暗很多。

# 我的修改

开始没有注意到作者的更新，自己 F12 作者大大的网站修改，最后发现其实很简单，修改上述文件部分代码如下

	$item {
	position: relative;
	color: inherit;
	width: calc(50% - 2rem);
	min-width: calc(50% - 2rem);
	height: 14rem;
	margin: 1rem;
	opacity: 0;

	&.show {
	@extend .slide-up-big-in;
	opacity: 1;
	}

	+mobile() {
	width: calc(100% - 1rem) !important;
	min-width: calc(100% - 1rem) !important;
	margin: 1rem .5rem !important;
	}
	}

	.index.wrap {
	.btn {
	position: absolute;
	bottom: 0;
	right: 0;
	//transform-style: preserve-3d;
	//transform: translateZ(2rem);
	//backface-visibility: hidden;
	padding: .3rem 1rem;
	border-radius: 1rem 0;
	color: var(--grey-0);
	background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);

	&::before {
	position: absolute;
	display: block;
	content: '';
	//transform-style: preserve-3d;
	//transform: translateZ(-2rem);
	//backface-visibility: hidden;
	height: calc(100% - 1rem);
	width: calc(100% - 1rem);
	border-radius: 5rem;
	left: .5rem;
	top: .8rem;
	box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
	background-color: var(--color-pink-a3);
	z-index: -1;
	}

	&:hover {
	transform: translateZ(2.5rem);
	}

	&:hover::before {
	transform: translateZ(-2.5rem);
	}
	}

	// .active .btn {
	// transform-style: preserve-3d;
	// transform: translateZ(2rem);
	// backface-visibility: hidden;

	// &::before {
	// transform-style: preserve-3d;
	// transform: translateZ(-2rem);
	// backface-visibility: hidden;
	// }
	// }

	.meta {
	font-size: $font-size-smaller;
	color: var(--grey-5);

	.ic {
	margin-right: .0625rem;
	}

	.item + .item {
	margin-left: .625rem;
	}

	&.footer {
	position: absolute;
	bottom: .5rem;
	max-width: calc(100% - 7rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	justify-content: flex-start;

	span {
	margin-right: .5rem;
	}
	}
	}
	}

其实就是将作者大大的新加代码删除掉，在 &::before 属性后加了个 z-index: -1

应该没有什么问题了，解决！

公告

2021-07-29T11:09:14.000Z

# 公告

2022 年 6 月 23 日，shoka 主题首页大图文章更新，关于网格效果的实现

# 1. 发生什么了？

本博客全面从 wordpress 转到 hexo 静态页面，网址不变，博客内容不变，友链不变，但是评论从 wordpress 转太过麻烦，目前暂时不搞了……

# 2. 为什么？

博客将近一年了，原来的博客是搭建在云服务器上，服务器也快到期了，不续费了，没钱了
其实博客这些内容托管在 github pages 完全够用，相比较服务器成本太高了。
wordpress 太臃肿了，hexo 相比较轻一些，而且文件都在本地，主题也很多。

# 3. 接下来

接下来就一直用这个博客啦

# 4. 悄悄增加个 github 提交日历

# 5. 新增个有趣的计数

（从 2021 年 11 月 30 日 15:50 开始计数）

OpenGL 导入模型

2021-04-10T15:50:00.000Z

# 准备工作

# 学习网站

LearnOpenGL CN: https://learnopengl-cn.github.io/

# 依赖开源项目

Assimp:https://github.com/assimp/assimp (注：这个需要编译，后续会说，直接下载源文件不管用)

下载 Assimp: http://assimp.org/index.php/downloads

GLFW: https://github.com/glfw/glfw (注：这个因为需要 lib 文件，所以需要官网下载相应的库文件等)

下载 GLFW: https://www.glfw.org/download.html

GLM: https://github.com/g-truc/glm

STB: https://github.com/nothings/stb (注：其实只用到一个关键文件 stb_image.h ，直接手动添加头文件也可)

GLAD 下载: https://glad.dav1d.de/

# IDE

Visual Studio 16 2019 (VS 2019)

(注：一定要选定好统一的调试模式，例如 Debug 模式 /x64，后续的 Assimp 编译模式也要与此统一：Debug 模式 /x64，以及 GLFW 的相应文件下载也是 x64 的)

另外，本人习惯：所有后续的 include 文件 (.h 包含目录)、lib 文件 (.lib 库目录) 都是使用的 VS 2019 默认的目录，应该是 Microsoft Visual Studio（VS2019安装目录）\2019\Community\VC\Tools\MSVC\14.28.29910 里面的 include 文件夹和 lib 文件夹，查看方法：打开菜单 -> 项目 ->（项目）属性 ->VC ++ 目录 -> 包含目录 -> 编辑，在下方计算的值即可看到目录位置；也可以自定义相应的目录，在上述位置中修改添加等。

# 软件

Cmake: https://cmake.org/download/

需要 cmake 对 assimp 进行编译

当快捷键 win + R 输入 cmd ，输入 cmake --help 显示

	Usage

	cmake [options] <path-to-source>
	cmake [options] <path-to-existing-build>
	cmake [options] -S <path-to-source> -B <path-to-build>

	Specify a source directory to (re-)generate a build system for it in the
	current working directory. Specify an existing build directory to
	re-generate its build system.
	· · · · · ·

类似如上，即成功

# 正式开始

# 1、新建项目

打开 VS 2019，新建一个普通的控制台项目即可；

以下以 LearnOpenGL CN 上项目为例：

打开 https://learnopengl.com/code_viewer_gh.php?code=src/3.model_loading/1.model_loading/model_loading.cpp

将源码复制到对应工程的源文件中，此时会有很多报错，不要急，因为缺少相应的头文件等

# 2、配置导入头文件（重要）

# (1) GLAD

打开网站：https://glad.dav1d.de/，在 API 里选择对应的 opengl 版本下载即可，本项目以 opengl 版本为 4.1 为例，最后点击下方的 Generate 下载；

下载 glad.zip ，解压后找到 glad/src 下的 glad.c ，添加到项目 -> 源文件中，找到 glad/include/glad 文件夹，将其复制到 VS 2019 对应的包含目录中（开头已经说明）。

# (2) GLFW

打开网站：https://www.glfw.org/download.html，我是 Windows 平台，64 位，所以点击 64-bit Windows binaries 下载，解压后打开 lib-vc2019 ，将里面的 lib 文件复制到 VS 2019 对应的库目录 x64 文件夹中；

接下来，打开菜单 -> 项目 -> 属性，找见链接器 -> 输入 -> 附加依赖项 -> 编辑，输入 glfw3.lib ，确定；

下载 https://github.com/glfw/glfw/tree/master/include 里的 GLFW 文件夹，解压后复制 GLFW 文件夹至 VS 2019 对应的包含目录中。

# (3) GLM

下载 https://github.com/g-truc/glm，复制里面的 glm 文件夹至 VS 2019 对应的包含目录中即可。

# (4) LearnOpenGL 头文件问题

打开 https://learnopengl.com/code_viewer_gh.php?code=src/3.model_loading/1.model_loading/model_loading.cpp

鼠标移动至 #include <learnopengl/shader_m.h> 中，点击，即可跳转至 shader_m.h 文件，在项目中头文件右键，添加新建项，命名为 shader_m.h，复制代码至文件中；

后续的 camera.h 和 model.h 添加方法相同，都是新建头文件，复制代码进去；对用网站地址：

shader_m.h: https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/shader.h

camera.h: https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/camera.h

model.h: https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/model.h

然后，将头文件由（例） #include <learnopengl/shader_m.h> 改成 #include "shader_m.h" ，后面的 camera.h 和 model.h 相同

# (5) model.h 头文件问题

此时 shader_m.h 文件和 camera.h 文件都没有错误，但 model.h 文件还需要配置一些头文件，包括 stb_image.h 文件、assimp 库、mesh.h 和 shader.h，下面先说明 mesh.h 和 shader.h

和 (4) 一样，都是新建头文件，复制对应的代码进去；对用网站地址：

mesh.h: https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/mesh.h

shader.h: https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/shader.h

然后，将头文件由（例） #include <learnopengl/mesh.h> 改成 #include "mesh.h" ，后面的 shader.h 相同

注：mesh.h 中也引入了 shader.h，也需要改一下

# (6) stb_image.h 头文件问题

项目头文件新建.h 文件命名为 stb_image.h

LearnOpenGL 网站地址如下：https://learnopengl-cn.github.io/01 Getting started/06 Textures/#stb_imageh，可作为了解参考

代码地址：https://github.com/nothings/stb/blob/master/stb_image.h，复制代码至新建的头文件中，即可，头文件改成 #include "stb_image.h"

重要⭐⭐⭐：这时直接引用会报错，代码 stb_image.h 里有如下说明：

	Do this:
	#define STB_IMAGE_IMPLEMENTATION
	before you include this file in one C or C++ file to create the implementation.

因此，要在 #include "stb_image.h" 引用前加一行，如下：

	#define STB_IMAGE_IMPLEMENTATION
	#include "stb_image.h"

# (7) assimp 库（核心）

下载 Assimp: http://assimp.org/index.php/downloads，选择 Get the sourcecode 或者直接访问 https://github.com/assimp/assimp/releases/tag/v5.0.1 下载 Source code (zip) （以这个 5.0.1 版本为例）

解压 assimp-5.0.1，新建文件夹 build，按住 Shift 键，右键，选择 在此处打开Powershell窗口 ，输入以下命令：

cmake .. -G "Visual Studio 16 2019"

回车键，如图生成以下文件即成功：

打开.sln（Solution 文件）, 注意编译环境是 Debug /x64，选择 ALL_BUILD，生成

等待生成成功，输出窗口出现以下即为成功：

复制 assimp-5.0.1\build\include\assimp 文件夹下的 config.h 到 assimp-5.0.1\include\assimp 文件夹里

复制下载的 assimp-5.0.1\include 文件夹里的 assimp 文件夹至 VS 2019 对应的包含目录中。

复制 assimp-5.0.1\build\code\Debug 里的除.dll 文件到 VS 2019 对应的库目录 x64 文件夹中。

注意：此时运行可能会出现如下问题：

解决方法：

将 assimp-5.0.1\build\code\Debug 里的 assimp-vc142-mtd.dll 复制到 项目文件夹/x64/Debug 文件夹下

，或者复制到系统的 C:/Windows/System32 文件夹下（因为是 x64 下）

接下来，打开菜单 -> 项目 -> 属性，找见链接器 -> 输入 -> 附加依赖项 -> 编辑，输入 assimp-vc142-mtd.dll ，确定；

# (8) 模型问题

打开主函数文件，大概在 80 行代码处有以下代码

	// build and compile shaders
	// -------------------------
	Shader ourShader("1.model_loading.vs", "1.model_loading.fs");

	// load models
	// -----------
	Model ourModel(FileSystem::getPath("resources/objects/backpack/backpack.obj"));

其中 1.model_loading.vs 和 1.model_loading.fs 都是 shader 文件， backpack.obj 是 OBJ 格式的模型文件

接下来，先搞定 shader 文件，分别在项目源文件新建文件，分别命名为 1.model_loading.vs 和 1.model_loading.fs ，

访问网站，粘贴代码，网站和代码如下：

1.model_loading.vs

	#version 330 core
	layout (location = 0) in vec3 aPos;
	layout (location = 1) in vec3 aNormal;
	layout (location = 2) in vec2 aTexCoords;

	out vec2 TexCoords;

	uniform mat4 model;
	uniform mat4 view;
	uniform mat4 projection;

	void main()
	{
	TexCoords = aTexCoords;
	gl_Position = projection * view * model * vec4(aPos, 1.0);
	}

1.model_loading.fs

	#version 330 core
	out vec4 FragColor;

	in vec2 TexCoords;

	uniform sampler2D texture_diffuse1;

	void main()
	{
	FragColor = texture(texture_diffuse1, TexCoords);
	}

接下来搞定 obj 模型文件，按照 resources/objects/backpack/backpack.obj 新建文件夹也可，自己定义路径也可，我放在与.sln 同一级文件夹下新建的 resources/objects/backpack 目录下，即 ../resources/objects/backpack/

下载模型 nanosuit.rar: https://learnopengl-cn.github.io/data/nanosuit.rar

然后解压，复制所以文件至 ../resources/objects/backpack/ 下，对于我这种代码改成

	// load models
	// -----------
	Model ourModel(FileSystem::getPath("../resources/objects/backpack/nanosuit.obj"));

最后，上方代码会报错，是关于 FileSystem 相关的，改成如下就正确了

	// build and compile shaders
	// -------------------------
	Shader ourShader("1.model_loading.vs", "1.model_loading.fs");

	// load models
	// -----------
	Model ourModel("../resources/objects/backpack/nanosuit.obj");

# 最终成果

运行如下：

成功！

Github提速/下载

2021-04-02T09:50:09.000Z

# 一、提升 Github 访问速度

# 1、Github 镜像网站访问

1、https://github.com.cnpmjs.org/

2、https://git.sdut.me/

3、https://hub.fastgit.org

# 2、修改 Hosts 文件加速访问

# (1) 获取 github 的 global.ssl.fastly

访问 https://fastly.net.ipaddress.com/github.global.ssl.fastly.net#ipinfo

获得 IP 为 199.232.69.194

# (2) 获取 github.com 地址

访问 https://github.com.ipaddress.com/#ipinfo

获得 IP 为 140.82.112.4

# (3) 修改 Hosts 文件

Hosts 文件位置： C:\Windows\System32\drivers\etc\hosts

右键属性，修改 Users 可写入

如下图

打开方式，选择记事本，输入以下
199.232.69.194 github.global.ssl.fastly.net
140.82.112.4 github.com
以上两个 IP 地址都是刚才两个网页获得，不同电脑 IP 可能不同

最后 Win + R ，打开运行，输入 cmd ，进入命令提示符，输入
ipconfig /flushdns
刷新 DNS 缓存，最后应该能正常访问

# 3、Github520 (包含图片加载问题)

Github 大佬的加速 github 和解决图片加载问题的项目

地址：https://github.com/521xueweihan/GitHub520

（emmm，能解决访问慢的问题，如果访问不了 github，emmm，这个方法不适用于您）

使用方法都在 Github 上完整给出

# 二、提高 Github 下载速度

# 1、代理网站加速

1、https://ghproxy.com/

2、http://gh.api.99988866.xyz/

3、http://toolwa.com/github/

4、https://github.zhlh6.cn/ （使用 git clone 方式下载）

5、Github raw 加速：将 raw.githubusercontent.com 替换成 raw.staticdn.net

6、https://shrill-pond-3e81.hunsh.workers.dev/

7、http://gitd.cc/

8、https://gitclone.com/（部分需要会员，效果显著）

9、https://pd.zwc365.com/

10、https://d.serctl.com/

11、http://tool.mkblog.cn/downgit/#/home

# 2、油猴插件配置脚本 (适用于基于 Chromium 的浏览器)

# 安装油猴插件（支持 Chrome、Microsoft Edge、360 浏览器等）

# ① 脚本一：github-accelerator

# ② 脚本二：Github 增强 - 高速下载

# 3 插件加速 (适用于基于 Chromium 的浏览器)

插件名称：Github 加速

地址：Github 加速

插件 ID：mfnkflidjnladnkldfonnaicljppahpg

(正常渠道方法：需要科学上网，不过既然能科学上网了，不就直接访问 Gihub 了吗？这个插件应该适用于只能通过谷歌访问助手下载插件的朋友)

Chrome Extension 第三方下载：

1、收藏猫插件下载

2、chrome-extension-downloader: 根据插件 ID 下载 crx 文件

# 4 Gitee 转入下载

1、申请一个 gitee 账户

2、右上角 “+” 号 —> 从 Github/GitLab 导入

3、导入成功后即可进行下载等各项操作

# 5、IDM 下载

其实就是利用 Internet Download Manager 的多线程下载的优势达到加速下载的目的

# 6、哔 ——————

代理、梯子（科学上网）YOU KNOW

	the-transition-margin(duration = .3s, function = ease, delay = 0s, property = margin) {
	transition:property duration function delay;
	}

	.cat {
	margin-top: 10rem;
	margin-top: 20rem;
	}
	.reliefload {
	margin-top: 20rem;
	margin-left: 15rem;
	}

	.live2d {
	align-items: center;
	justify-content: center;
	height: auto;
	padding: .4125rem 0 .4125rem 0;
	}

	199.232.69.194 github.global.ssl.fastly.net
	140.82.112.4 github.com

lavender

Shoka主题：修改标签页显示效果

# 前言

# 实现

# 主题 yml 文件

# 新增标签颜色

# 修改背景以及鼠标悬浮效果

# 增加右上角文章数量显示

Shoka主题：修改页面滚动视差效果

# 前言

# 实现

# 修改 Js

Shoka主题：修改首页文章摘要hover效果

# 前言

# 实现

# 修改 Stylus

# 总结

Shoka主题：修改夜间模式切换动画

# 前言

# 实现

# 修改 Js

# 修改 Stylus

Shoka主题：修改加载动画

# 前言

# 实现

# 修改 nunjucks (layout)

# 修改 Stylus

# 修复页面内加载动画位置偏移的问题

冰墩墩雪容融

# 冰墩墩

# HTML 部分

# CSS 部分

# 效果图

# 雪容融

# HTML 部分

# CSS 部分

# 效果图

Shoka主题：新增博客新年灯笼

# 前言

# 实现

# 新增主题设置

# 新增 div

# 添加样式表

Shoka主题：新增博客访问统计页面

# 前言

# 实现

# 加入百度统计

# 新建页面

# 更改语言并添加到菜单

# 获取网站统计数据

# 博客访问统计代码

# 自建 API

# 解决 pjax 加载问题

# 其他

Shoka主题：新增文章统计页面

# 前言

# 实现

# 新建页面

# 安装 cheerio

# 更改语言并添加到菜单

# 文章统计代码（已适配明暗模式）

# 使用统计图（已适配明暗模式）

# 解决 pjax 加载问题

# 其他

Shoka主题：实现自定义网站字体

# 前言

# 实现

# 寻找字体

# 转换字体格式

# 上传字体

# 修改代码

Shoka主题：实现页面背景大图全屏效果

# 前言

# 实现

# 修改 Stylus

# 修改 nunjucks (layout)

# 图片网格效果

Shoka主题：新增个人随笔页面

# 前言

# 实现

# 新增 `div`