以下配置皆在文件 <root>/_config.shoka.yml 修改。大部分摘录自：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/config/

# 站点名称

alternate: Yume Shoka

这里设置的名称代替 Logo，显示在页面顶部，以及页尾 ©️ 处。

# 资源文件

支持本地静态文件跟 cdn 加速，默认值是 / ，指使用本地静态文件。

	# local static
	statics: /

	or

	# jsdelivr cdn
	statics: //cdn.jsdelivr.net/gh/Arachnid-97/arachnid@latest/

当然，也可以修改成 //cdn.jsdelivr.net/gh/您的github用户名/您的项目名@latest/ 这种形式，以使用 jsDelivr 进行加速。

PS：jsDelivr 并不是实时更新，重新生成文件后需要耐心等待（更新于 2022.05.25），目前 jsDelivr 对于大陆已经失效，部署后需要使用魔法才能访问，至于为啥，就不多说了。

	css: css
	js: js
	images: images

静态文件所处目录的实际目录名，这些一般不改。

# 夜间模式

darkmode: # true

默认情况下，是否开启夜间模式取决于（优先级从高到低）：

访客点击页面头部切换按钮的自行选择
访客切换了浏览设备的主题色调
您的 darkmode 配置项

# 自动定位

auto_scroll: true

默认情况下，再次打开页面时，会自动滚动到上次浏览的位置。
这个选项设为 false 时将停用此功能。

# 加载动画

# 是否显示页面加载动画 loading-cat
loader:
  start: true # 当初次打开页面时，显示加载动画
  switch: true # tab 切换到其他页面时，显示加载动画

注：tab 切换后只是显示 loading 动画，实际并未重新加载页面。

# 动画替换

CSS 样式对应修改的文件位置： <root>/themes/shoka/source/css/_common/components/third-party 中的 loading.styl 文件。

	//css
	//\themes\shoka\source\css\_common\components\third-party\loading.styl
	// 保留下面这几行，其余删除后写入新样式
	#loading {
	@extend $fix-fullscreen;
	background-color: var(--grey-1);
	if(!hexo-config('loader.start')) {
	display: none;
	}
	// 样式修改（可选）
	}

	// 你的 CSS 样式代码

html 对应修改的文件位置： <root>/themes/shoka/layout/_partials 中的 layout.njk 文件。

	//HTML
	//\themes\shoka\layout\_partials\layout.njk
	<body itemscope itemtype="https://schema.org/WebPage">
	<div id="loading">
	// 此处删除并重新写入 css 样式对应的 html 代码
	</div>
	<div id="container">

eg：仓鼠跑轮

文件： <root>/themes/shoka/source/css/_common/components/third-party/loading.styl

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

	.loader-state { // 加载动画
	.wheel-and-hamster {
	--dur: 1s;
	position: relative;
	width: 12em;
	height: 12em;
	font-size: 14px;
	}

	.wheel,
	.hamster,
	.hamster div,
	.spoke {
	position: absolute;
	}

	.wheel,
	.spoke {
	border-radius: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.wheel {
	background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
	z-index: 2;
	}

	.hamster {
	animation: hamster var(--dur) ease-in-out infinite;
	top: 50%;
	left: calc(50% - 3.5em);
	width: 7em;
	height: 3.75em;
	transform: rotate(4deg) translate(-0.8em,1.85em);
	transform-origin: 50% 0;
	z-index: 1;
	}

	.hamster__head {
	animation: hamsterHead var(--dur) ease-in-out infinite;
	background: hsl(30,90%,55%);
	border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
	box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
	0.75em -1.55em 0 hsl(30,90%,90%) inset;
	top: 0;
	left: -2em;
	width: 2.75em;
	height: 2.5em;
	transform-origin: 100% 50%;
	}

	.hamster__ear {
	animation: hamsterEar var(--dur) ease-in-out infinite;
	background: hsl(0,90%,85%);
	border-radius: 50%;
	box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
	top: -0.25em;
	right: -0.25em;
	width: 0.75em;
	height: 0.75em;
	transform-origin: 50% 75%;
	}

	.hamster__eye {
	animation: hamsterEye var(--dur) linear infinite;
	background-color: hsl(0,0%,0%);
	border-radius: 50%;
	top: 0.375em;
	left: 1.25em;
	width: 0.5em;
	height: 0.5em;
	}

	.hamster__nose {
	background: hsl(0,90%,75%);
	border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
	top: 0.75em;
	left: 0;
	width: 0.2em;
	height: 0.25em;
	}

	.hamster__body {
	animation: hamsterBody var(--dur) ease-in-out infinite;
	background: hsl(30,90%,90%);
	border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
	box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
	0.15em -0.5em 0 hsl(30,90%,80%) inset;
	top: 0.25em;
	left: 2em;
	width: 4.5em;
	height: 3em;
	transform-origin: 17% 50%;
	transform-style: preserve-3d;
	}

	.hamster__limb--fr,
	.hamster__limb--fl {
	clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
	top: 2em;
	left: 0.5em;
	width: 1em;
	height: 1.5em;
	transform-origin: 50% 0;
	}

	.hamster__limb--fr {
	animation: hamsterFRLimb var(--dur) linear infinite;
	background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
	transform: rotate(15deg) translateZ(-1px);
	}

	.hamster__limb--fl {
	animation: hamsterFLLimb var(--dur) linear infinite;
	background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
	transform: rotate(15deg);
	}

	.hamster__limb--br,
	.hamster__limb--bl {
	border-radius: 0.75em 0.75em 0 0;
	clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
	top: 1em;
	left: 2.8em;
	width: 1.5em;
	height: 2.5em;
	transform-origin: 50% 30%;
	}

	.hamster__limb--br {
	animation: hamsterBRLimb var(--dur) linear infinite;
	background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
	transform: rotate(-25deg) translateZ(-1px);
	}

	.hamster__limb--bl {
	animation: hamsterBLLimb var(--dur) linear infinite;
	background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
	transform: rotate(-25deg);
	}

	.hamster__tail {
	animation: hamsterTail var(--dur) linear infinite;
	background: hsl(0,90%,85%);
	border-radius: 0.25em 50% 50% 0.25em;
	box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
	top: 1.5em;
	right: -0.5em;
	width: 1em;
	height: 0.5em;
	transform: rotate(30deg) translateZ(-1px);
	transform-origin: 0.25em 0.25em;
	}

	.spoke {
	animation: spoke var(--dur) linear infinite;
	background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
	linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
	}

	/* Animations */
	@keyframes hamster {
	from, to {
	transform: rotate(4deg) translate(-0.8em,1.85em);
	}

	50% {
	transform: rotate(0) translate(-0.8em,1.85em);
	}
	}

	@keyframes hamsterHead {
	from, 25%, 50%, 75%, to {
	transform: rotate(0);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(8deg);
	}
	}

	@keyframes hamsterEye {
	from, 90%, to {
	transform: scaleY(1);
	}

	95% {
	transform: scaleY(0);
	}
	}

	@keyframes hamsterEar {
	from, 25%, 50%, 75%, to {
	transform: rotate(0);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(12deg);
	}
	}

	@keyframes hamsterBody {
	from, 25%, 50%, 75%, to {
	transform: rotate(0);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(-2deg);
	}
	}

	@keyframes hamsterFRLimb {
	from, 25%, 50%, 75%, to {
	transform: rotate(50deg) translateZ(-1px);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(-30deg) translateZ(-1px);
	}
	}

	@keyframes hamsterFLLimb {
	from, 25%, 50%, 75%, to {
	transform: rotate(-30deg);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(50deg);
	}
	}

	@keyframes hamsterBRLimb {
	from, 25%, 50%, 75%, to {
	transform: rotate(-60deg) translateZ(-1px);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(20deg) translateZ(-1px);
	}
	}

	@keyframes hamsterBLLimb {
	from, 25%, 50%, 75%, to {
	transform: rotate(20deg);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(-60deg);
	}
	}

	@keyframes hamsterTail {
	from, 25%, 50%, 75%, to {
	transform: rotate(30deg) translateZ(-1px);
	}

	12.5%, 37.5%, 62.5%, 87.5% {
	transform: rotate(10deg) translateZ(-1px);
	}
	}

	@keyframes spoke {
	from {
	transform: rotate(0);
	}

	to {
	transform: rotate(-1turn);
	}
	}
	}

修改 <root>/themes/shoka/layout/_partials/layout.njk 中的 html 代码：

	...

	<div class="loader-state">
	<div aria-label="Orange and tan hamster running in a metal wheel" role="img" class="wheel-and-hamster">
	<div class="wheel"></div>
	<div class="hamster">
	<div class="hamster__body">
	<div class="hamster__head">
	<div class="hamster__ear"></div>
	<div class="hamster__eye"></div>
	<div class="hamster__nose"></div>
	</div>
	<div class="hamster__limb hamster__limb--fr"></div>
	<div class="hamster__limb hamster__limb--fl"></div>
	<div class="hamster__limb hamster__limb--br"></div>
	<div class="hamster__limb hamster__limb--bl"></div>
	<div class="hamster__tail"></div>
	</div>
	</div>
	<div class="spoke"></div>
	</div>
	</div>

	...

为防止页面内加载动画位置偏移的问题，对 <root>/themes/shoka/source/css\_common/outline/outline.styl 进行偏移补偿：

在文件里，大约 38 line 左右找到 \#main { 的块，然后仿写添加 .cat 的写法

	.cat {
	margin-top: 10rem;
	}

	// 新添加的，对应 <div class="loader-state"> 加载类
	.loader-state {
	margin-top: 20rem;
	margin-left: 15rem;
	}

附：

https://codepen.io/

https://uiverse.io/

# 烟花效果

单击页面的烟花效果配置如下：

	fireworks:
	enable: true # 是否启用
	color: # 烟花颜色
	- "rgba(255,182,185,.9)"
	- "rgba(250,227,217,.9)"
	- "rgba(187,222,214,.9)"
	- "rgba(138,198,209,.9)"

# 加载谷歌字体

	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

此功能基本参考 NexT。
加粗标题的字体总是使用 Noto Serif ，为了正确友好的显示日文中的汉字，会先后加载 headings 和 title 的字体设置。

# iconfont 图标

对应文件位置： <root>/themes/shoka/source/css 中的 _iconfont.styl 文件。

font-family 设为 ic ，所有字体样式前缀为 i- ；具体参见 <root>/themes/shoka/source/css/_iconfont.styl 。

# 自定义图标

如果需要添加或修改，需要找 shoka 主题的博主姐姐添加您的 Iconfont 用户名到项目中，此后您可以任意全选项目文件，批量保存到购物车中，添加至您自己的项目里，并将主题配置文件中的 iconfont 值改为您的项目。

注意，您的项目应设置 FontClass/Symbol 前缀为 i- 。

在 <root>/source/_data/ 目录新建文件 iconfont.styl ，把新增或修改的图标样式复制到这个文件中。

自定义 iconfont.styl 文件将覆盖主题默认样式，为了避免出错，请保证原有样式名均存在，在原有样式基础上进行增删改。

最后，在配置文件中更改你的 iconfont 项目名：

	# project of https://www.iconfont.cn/
	# //at.alicdn.com/t/font_1832207_c8i9n1ulxlt.css => 1832207_c8i9n1ulxlt
	iconfont: "1832207_igi8uaupcus"

# 菜单

	menu:
	home: / \|\| home
	posts:
	default: / \|\| feather
	archives: /archives/ \|\| list-alt
	categories: /categories/ \|\| th
	tags: /tags/ \|\| tags
	friends: /friends/ \|\| heart

menu 支持一级子目录，子目录设置中的第一项必须为 default ，用来定义父级按钮的样式。

# 社交按钮

	# Social Links
	# Usage: `Key: permalink \|\| icon \|\| color`
	# Key is the link label showing to end users.
	# Value before `\|\|` delimiter is the target permalink,
	# secend value is the name of Font icon.
	social:
	github: https://github.com/amehime \|\| github \|\| "#191717"
	#google: https://plus.google.com/yourname \|\| google
	twitter: https://twitter.com/amehime \|\| twitter \|\| "#00aff0"
	zhihu: https://www.zhihu.com/people/rurismzk \|\| zhihu \|\| "#1e88e5"
	music: https://music.163.com/#/user/home?id=12886823 \|\| cloud-music \|\| "#e60026"
	weibo: https://weibo.com/amehime \|\| weibo \|\| "#ea716e"
	about: https://about.me/amehime \|\| address-card \|\| "#3b5998"
	#email: mailto:yourname@mail.com \|\| envelope \|\| "#55acd5"
	#facebook: https://www.facebook.com/yourname \|\| facebook
	#stackoverflow: https://stackoverflow.com/yourname \|\| stack-overflow
	#youtube: https://youtube.com/yourname \|\| youtube
	#instagram: https://instagram.com/yourname \|\| instagram
	#skype: skype:yourname?call\|chat \|\| skype
	#douban: https://www.douban.com/people/yourname/ \|\| douban

如上，使用 || 作为分隔符，依次为 链接 || 图标 || 颜色 。
注意，只需要写图标名称，如 github ，则会自动转换为 ic i-github 。
十六进制颜色码需要 "" 包绕。

# 边栏配置

边栏可以选择在左侧，或右侧。

	sidebar:
	# Sidebar Position.
	position: left
	#position: right
	# Replace the default avatar image and set the url here.
	avatar: avatar.jpg

修改头像文件的地址，相对于静态文件目录 images 中配置的路径。

可以将自己的图片放在 <root>/source/_data/images/ 目录下并保持同名，甚至以同名覆盖主题内默认的头像图片。

# 底部 widgets

目前页面底部可以显示两个小部件，即 随机文章 和 最近评论 。

	widgets:
	random_posts: true # 显示随机文章
	recent_comments: true # 显示最近评论

# 打赏功能

	# Reward (Donate)
	reward:
	# If true, reward will be displayed in every article by default.
	enable: true
	account:
	wechatpay: /wechatpay.png
	alipay: /alipay.png
	# paypal: /paypal.png

默认打开，对应的奖赏图片在 <root>/themes/shoka/source/images 中找到对应的名称图片。

# 标签显示

	# 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

# 背景音乐

在主题配置文件中，设置全局播放列表。
在文章的 Front Matter 中，设置文章专有播放列表，访问该文章页面时，将覆盖全局配置。

	audio:
	- https://music.163.com/song?id=1387098940
	- https://music.163.com/#/playlist?id=2088001742
	- https://www.xiami.com/collect/250830668
	- https://y.qq.com/n/yqq/playsquare/3535982902.html

如上，可以直接使用网易云、虾米、QQ 音乐的播放列表、单曲，可以同时填写多个。

	audio:
	- title: 列表1
	list:
	- https://music.163.com/#/playlist?id=2943811283
	- https://music.163.com/#/playlist?id=2297706586
	- title: 列表2
	list:
	- https://music.163.com/#/playlist?id=2031842656

如果需要自定义媒体文件，可以按照以下格式填写：

	audio:
	- name: "曲目1"
	url: "播放地址"
	artist: "艺术家"
	cover: "封面"
	lrc: "歌词"
	- name: "曲目2"
	url: "播放地址"
	artist: "艺术家"
	cover: "封面"
	lrc: "歌词"
	audio:
	- title: 列表1
	list:
	- name: "曲目1"
	url: "播放地址"
	artist: "艺术家"
	cover: "封面"
	lrc: "歌词"
	- name: "曲目2"
	url: "播放地址"
	artist: "艺术家"
	cover: "封面"
	lrc: "歌词"
	- title: 列表2
	list:
	- https://music.163.com/#/playlist?id=2031842656

如果要关闭当前页面的背景音乐播放器，则在文章 Front Matter 中配置：

	---
	title: 关闭背景音乐
	audio: false
	---

# 随机图库

默认的图片列表位于 <root>/themes/shoka/_images.yml 中。
使用了渣浪图库，使用一些上传工具，比如这里
上传后图片的链接是 http://wx4.sinaimg.cn/large/6833939bly1gicmnywqgpj20zk0m8dwx.jpg 。
只需要新一行写上 - 6833939bly1gicmnywqgpj20zk0m8dwx.jpg 。
如果想要自定义，则在 <root>/source/_data/ 目录新建一个 images.yml 文件，这个文件中的图片至少 6 枚，将完全覆盖默认的图片列表。
也可以直接在图片列表 yml 文件中，写上任意外链图片地址

	- https://i.loli.net/2020/10/30/qAMYEFXxJcKRsiG.gif
	- https://i.loli.net/2020/10/30/rjdhcSgEN8COBPA.jpg
	- https://i.loli.net/2020/10/30/HKyzSd7NI3mlBpt.jpg
	- https://i.loli.net/2020/10/30/Y1CBXqgeokEs457.jpg
	- https://i.loli.net/2020/10/30/Z5W6r2BSoiThHG1.jpg

也可以在主题配置文件中，设置图床 API：

image_server: "https://acg.xydwz.cn/api/api.php"

# 网页标题栏签名

原样式：

（●´3｀●）やれやれだぜ
（´Д｀）大変だ！

对应修改文件位置： <root>\themes\shoka\languages 中对应语言中的 favicon 元素：

	favicon:
	show: # 切换回来的提示语
	hide: # 退出页面的签名

# 加载第三方组件

	vendors:
	css:
	# 略略略
	js:
	# 略略略

包括：

`pace`	加载进度条	全局
`pjax`	页面无刷新加载	全局
`anime`	js 动画效果	全局
`algolia` `instantsearch`	基于 algolia 的站内搜索	全局
`lazyload`	图片懒加载	全局
`quicklink`	链接资源预加载	全局
`fetch`	获取播放列表	全局
`katex` `copy_tex`	数学公式显示及复制	按需
`fancybox`	图片放大显示及排列	按需
`valine`	基于 LeanCloud 的评论系统及文章阅读次数统计	按需
`chart`	图表显示	按需

以上文件加载全部基于 jsDelivr，并对全局加载的组件进行了文件合并。
如果不明白啥意思，则不要轻易修改。

# 文章 Hover 效果

在 <root>/themes/shoka/source/css/_mixins.styl 文件中添加：

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

在 <root>/themes/shoka/source/css/_common/components/pages/home.styl 文件上的 .segments 字段里的内容，分别进行如下修改：

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

	// 在 257 line 左右插入
	.cover {
	filter: brightness(.3);
	}

修改两处 &:hover 父引用里的 .cover img 字段里的变量 transform ：

	// 在 263 line 左右更改为
	transform: scale(1.25) rotate(2deg); // 修改鼠标悬浮后旋转效果

	// 在 383 line 左右更改为
	transform: scale(1.25) rotate(-2deg); // 修改另一个方向的旋转效果

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

	// 紧接 .cover img 下面插入
	.info {
	width: 75%;
	+mobile(){
	width: 100%;
	}
	}

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

	.excerpt {
	opacity: 1;
	}

修改鼠标悬浮前标题位置：

	// 在 314 line 左右找到
	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(); // 平滑过渡
	}

修改悬浮前摘要内容显示，在 .excerpt 字段中追加变量：

	// 在 340 line 左右找到
	.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;
	// 以下 3 项为追加内容
	opacity: 0; // 不显示
	pointer-events: none;
	the-transition(); // 过渡
	}

最后在相应的地方加入过度处理，这里就直接全部贴上 code 吧：

	.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);
	}
	}
	}
	}

hexo

	menu:
	home: / \|\| home
	posts:
	default: / \|\| feather
	archives: /archives/ \|\| list-alt
	categories: /categories/ \|\| th
	tags: /tags/ \|\| tags
	friends: /friends/ \|\| heart

	# Social Links
	# Usage: `Key: permalink \|\| icon \|\| color`
	# Key is the link label showing to end users.
	# Value before `\|\|` delimiter is the target permalink,
	# secend value is the name of Font icon.
	social:
	github: https://github.com/amehime \|\| github \|\| "#191717"
	#google: https://plus.google.com/yourname \|\| google
	twitter: https://twitter.com/amehime \|\| twitter \|\| "#00aff0"
	zhihu: https://www.zhihu.com/people/rurismzk \|\| zhihu \|\| "#1e88e5"
	music: https://music.163.com/#/user/home?id=12886823 \|\| cloud-music \|\| "#e60026"
	weibo: https://weibo.com/amehime \|\| weibo \|\| "#ea716e"
	about: https://about.me/amehime \|\| address-card \|\| "#3b5998"
	#email: mailto:yourname@mail.com \|\| envelope \|\| "#55acd5"
	#facebook: https://www.facebook.com/yourname \|\| facebook
	#stackoverflow: https://stackoverflow.com/yourname \|\| stack-overflow
	#youtube: https://youtube.com/yourname \|\| youtube
	#instagram: https://instagram.com/yourname \|\| instagram
	#skype: skype:yourname?call\|chat \|\| skype
	#douban: https://www.douban.com/people/yourname/ \|\| douban