重构 & 魔改记录
本篇为博主的重构魔改日记，以防自己日后因魔改迷失所做记录 📝
- 如若是小白想要尝试搭建可参照以下的新手教程
Hexo 博客搭建教程
半保姆级Hexo搭建教程，包括一键傻瓜式操作！
Hexo 纯升级
本节仅仅只是在原本的项目上 进行Hexo的升级 和插件依赖的更新
升级前请 备份！ 备份！ 备份！
有较大的改动一定要备份 而且更新Hexo存在很多不可控因素 哪怕更新成功了也一定要保留一份备份以备不时之需
做好备份就可以开始更新框架工作
npm 全局更新
1 | $ npm cache clean -f |
Hexo 目录插件更新
1 | $ cd /Hexo-MeuiCat |
完成检查
- 在上述步骤完成后，
package.json将成为以下版本信息：
1 | { |
- 当在其他设备上 可以依据已更新成功的
package.json直接通过 npm install 进行升级
Hexo 升级&重构
此节内容是重构 彻底的重构
新建空白文件夹 把Hexo和Butterfly升到最新版本
全局更新 Hexo
1 | $ hexo version |
安装 Hexo
1 | $ hexo init |
安装 Butterfly
1 | $ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
Butterfly 官方安装文档
关于 Butterfly 主题多种安装方式
自用数据记录
本节内容可能有所出入，如有缺失，请使用 F12 大法
_config.yml
1 | # Hexo 设置 |
_config.butterfly.yml
1 | # 图标列表http://www.wapadd.cn/icons/awesome/index.htm |
我的插件
必要的插件
| 插件名 | 版本号 | 用途 |
|---|---|---|
| hexo | @6.3.0 | Hexo 博客框架 |
| hexo-generator-archive | @2.0.0 | Hexo自带 - 归档 |
| hexo-generator-category | @2.0.0 | Hexo自带 - 分类 |
| hexo-generator-tag | @2.0.0 | Hexo自带 - 标签 |
| hexo-generator-index | @3.0.0 | Hexo自带 - 生成index页面 |
| hexo-renderer-ejs | @2.0.0 | Hexo自带 - ejs支持 |
| hexo-renderer-marked | @6.0.0 | Hexo自带 - 对Markdown的渲染支持 |
| hexo-renderer-pug | @3.0.0 | pug渲染器 |
| hexo-renderer-stylus | @2.1.0 | stylus渲染器 |
| hexo-server | @3.0.0 | Hexo服务器模块 |
| hexo-deployer-git | @4.0.0 | Git部署功能 |
个人使用添加的插件
| 插件名 | 版本号 | 用途 |
|---|---|---|
| hexo-generator-feed | @3.0.0 | 生成站点地图XML |
| hexo-generator-sitemap | @3.0.1 | 生成Sitemap |
| hexo-generator-baidu-sitemap | @0.1.9 | 生成百度Sitemap |
| hexo-filter-nofollow | @2.0.2 | 自动为站内链接加上nofollow |
| hexo-baidu-url-submit | @0.0.6 | 主动推送新链接至百度搜索引擎 |
| hexo-blog-encrypt | @3.1.6 | 为你的隐私文章添加密码来查阅 |
| hexo-butterfly-artitalk | @1.0.4 | 添加动态说说功能 |
| hexo-generator-search | @2.4.3 | Butterfly的本地搜索功能 |
| hexo-wordcount | @6.0.1 | 字数统计 |
| sweetalert2 | @11.7.3 | 打赏弹出框框架 |
1 | $ npm ls -dept 0 |
我的CSS
1 | # 因魔改中有大量 css 颜色变量代码 如color: var(--icat-unify-white)等类似代码, 均为 css 颜色代码, 此处为目前所有的颜色变量定义 css |
魔改美化
本节魔改教程基于
Hexo 6.3.0&Butterfly 4.7.0
前置教程
引用CSS
首先你需要在
[blogRoot]/source/css里面添加一个css 名字随意
（需要注意的是不能放在[blogRoot]/themes/butterfly/source/css里面 否则可能出现bug）列如：
[blogRoot]/source/css/icat.css再修改主题配置文件，按照下面引入 （一定是head，否则可能出现短暂无CSS）
1 | inject: |
引用JS
首先你需要在
[blogRoot]/source/js里面添加一个js 名字随意
（需要注意的是不能放在[blogRoot]/themes/butterfly/source/js里面 否则可能出现bug）列如：
[blogRoot]/source/css/icat.js再修改主题配置文件，按照下面引入 （一定是bottom 否则可能出现dom不完全导致js报错）
1 | inject: |
友联头像效果
在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39.flink-item-icon {
margin-right: 0 !important;
transition: .5s !important;
}
.flink-item-name,
.flink-item-desc {
padding-left: 10px !important;
}
/* 头像微调 */
#article-container .flink .flink-list>.flink-list-item::before {
content: none;
}
/* 去掉原来自带的before */
#article-container .flink .flink-list>.flink-list-item:hover {
background-color: #49B1F5;
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}
/* 鼠标经过改变背景 */
#article-container .flink .flink-list>.flink-list-item:hover a {
color: white !important;
}
/* 鼠标经过改变文字颜色 */
#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
width: 60px;
margin-left: -70px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/* 鼠标经过头像滚动 */
/* 友链样式调整 */效果预览：iCat-友联传送门
导航栏美化
分离菜单栏
要让搜索栏在最右侧，而其它元素居中，这时我们需要修改一下pug文件
修改
[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug:
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22nav#nav
span#blog_name
a#site-name(href=url_for('/')) #[=config.title]
#menus
- if (theme.algolia_search.enable || theme.local_search.enable)
- #search-button
- a.site-page.social-icon.search
- i.fas.fa-search.fa-fw
- span=' '+_p('search.title')
!=partial('includes/header/menu_item', {}, {cache: true})
#nav-right
+ if (theme.algolia_search.enable || theme.local_search.enable)
+ #search-button
+ a.site-page.social-icon.search
+ i.fas.fa-search.fa-fw
- #toggle-menu
- a.site-page
- i.fas.fa-bars.fa-fw
+ #toggle-menu
+ a.site-page
+ i.fas.fa-bars.fa-fw个人魔改的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24nav#nav
span#blog-info
a(href=url_for('/') title=config.title)
if theme.nav.logo
img.site-icon(src=url_for(theme.nav.logo))
if theme.nav.display_title
span.site-name=config.title
#menus
!=partial('includes/header/menu_item', {}, {cache: true})
#nav-right
if (theme.algolia_search.enable || theme.local_search.enable)
#travellings
a.site-page(href=url_for('https://travellings.cn/go.html') title="随机前往一个开往项目网站")
i.iconfont.icat-subway
#random
a.site-page(href=url_for('javascript:toRandomPost()') title="随机前往一个文章")
i.iconfont.icat-random
#search-button
a.site-page.social-icon.search
i.iconfont.icat-search
#toggle-menu
a.site-page(href="javascript:void(0);")
i.iconfont.icat-bars
顶部菜单居中
- 在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9#nav-right{
flex:1 1 auto;
justify-content: flex-end;
margin-left: auto;
display: flex;
flex-wrap:nowrap;
}
/* 导航栏居中 */
PE端菜单栏美化
在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24#sidebar #sidebar-menus .menus_items .menus_item {
margin: 10px 0;
}
#sidebar #sidebar-menus .menus_items a.site-page {
padding-left: 0;
}
#sidebar #sidebar-menus .menus_items .site-page {
position: relative;
display: block;
padding: 6px 30px 6px 22px;
color: var(--font-color);
font-size: 1.15em;
border: var(--icat-style-border-always);
background: var(--icat-essay-card-bg);
font-size: 14px;
border-radius: 12px;
}
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
text-align: left;
padding-left: 10px;
}修改
[blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9if theme.menu
.menus_items
each value, label in theme.menu
if typeof value !== 'object'
- .icat_menus_item
+ .icat_menus_item
- const valueArray = value.split('||')
a.site-page(href=url_for(trim(valueArray[0])))
···修改
[blogRoot]/themes/butterfly/source/css/_layout/head.styl
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10···
.menus_items
display: inline
.menus_item
+ .icat_menus_item
position: relative
display: inline-block
padding: 0 0 0 14px
···将
[blogRoot]/themes/butterfly/source/css/_layout/sidebar.styl全选替换为下方内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102#sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: auto
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .avatar-img
margin: 20px auto
.sidebar-site-data
padding: 0 10px
hr
margin: 20px auto
.menus_items
padding: 0 10px 40px
.menus_item
margin: 10px 0
.site-page
@extend .limit-one-line
position: relative
display: block
padding: 6px 30px 6px 22px
color: var(--font-color)
font-size: 1.15em
border: var(--icat-style-border-always)
background: var(--icat-essay-card-bg)
font-size: 14px
border-radius: 12px
&:hover
background: var(--text-bg-hover)
i:first-child
width: 15%
text-align: left
padding-left: 10px
&.group
& > i:last-child
position: absolute
top: .78em
right: 18px
transition: transform .3s
&.hide
& > i:last-child
transform: rotate(90deg)
& + .menus_item_child
display: none
.menus_item_child
margin: 0
list-style: none
padding-top: 6px
#sidebar
#sidebar-menus
.icat_menus_item
display: inline-block
width: 50%
.site-page
text-align: center
margin: 4px
display: flex
flex-direction: column
align-items: center
padding: 8px 0
border-radius: 12px
font-size: 14px
i:first-child
padding-left: 0
& > .icat-essay
font-weight: 500
span
margin-top: -8px
loading动画
本小节仅适用 Butterfly 4.5 以上版本
修改
[blogRoot]/themes/butterfly/layout/includes/loading/fullpage-loading.pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
.loading-bg
div.loading-img
.loading-image-dot
script.
const preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',()=> { preloader.endLoading() })
if (!{theme.pjax && theme.pjax.enable}) {
document.addEventListener('pjax:send', () => { preloader.initLoading() })
document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}修改
[blogRoot]/themes/butterfly/layout/includes/loading/index.pug1
2
3
4
5
6
7if theme.preloader.source === 1
include ./fullpage-loading.pug
else if theme.preloader.source === 2
include ./pace.pug
else
include ./fullpage-loading.pug
include ./pace.pug在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 10px;
left: 0;
right: 0;
height: 8px;
border-radius: 8px;
width: 4rem;
background: #eaecf2;
border: 1px #e3e8f7;
overflow: hidden;
}
.pace-inactive .pace-progress {
opacity: 0;
transition: 0.3s ease-in;
}
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 200px;
position: absolute;
z-index: 2000;
display: block;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 1.5s ease infinite;
background-size: 200%;
}
.pace.pace-inactive {
opacity: 0;
transition: 0.3s;
top: -8px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}修改
[blogRoot]/themes/butterfly/source/css/_layout/loading.styl
（注意其中颜色代码–icat-unify-card-bg等需自行替换为自己的色值）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45if hexo-config('preloader')
.loading-bg
display: flex;
width: 100%;
height: 100%;
position: fixed;
background: var(--icat-unify-card-bg);
z-index: 1001;
opacity: 1;
transition: .3s;
#loading-box
.loading-img
width: 100px;
height: 100px;
border-radius: 50%;
margin: auto;
border: 4px solid #f0f0f2;
animation-duration: .3s;
animation-name: loadingAction;
animation-iteration-count: infinite;
animation-direction: alternate;
.loading-image-dot
width: 30px;
height: 30px;
background: #6bdf8f;
position: absolute;
border-radius: 50%;
border: 6px solid #fff;
top: 50%;
left: 50%;
transform: translate(18px, 24px);
&.loaded
.loading-bg
opacity: 0;
z-index: -1000;
@keyframes loadingAction
0% {
opacity: 1;
}
100% {
opacity: .4;
}在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6.loading-img {
background: url(https://meuicat.com/media/avatar.jpg) no-repeat center center;
background-size: cover;
}
/* loading动画 */最后修改
_config.butterfly.yml中preloader选项, 改完以后source: 1为满屏加载 无pace胶囊,source: 2为 pace胶囊 无满屏动画,source: 3是两者都启用1
2
3
4
5
6
7
8
9# 页面加载动画 preloader
# --------------------------------------
preloader:
enable: true
source: 1
# source；1. 开屏加载；2. 顶部进度
# pace theme (see https://codebyzach.github.io/pace/)
pace_css_url:
即刻短文
Butterfly 即刻短文 部署方案 参考 - Heo
| todolist | 支持度 |
|---|---|
| 图片灯箱 | ✅ |
| 多图片多行显示 | ✅ |
| 外部链接 | ✅ |
| 瀑布流 | ✅ |
| 首页滚动 | ✅ |
| 快速评论 | ✅ |
| 本地修改 yml 发布 | ✅ |
| 插件版本 | ❌ |
效果预览
即刻短文
关于 封の碎碎念
创建数据
创建
[blogRoot]/source/_data/essay.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56- class_name: 即刻短文
essay_list:
- content: 继续出发！全程 1346公里 剩余1019公里 ~
date: 2023/03/13 18:21:48
from: iPhone XR
image:
- https://s1.ax1x.com/2023/03/19/ppYFcbn.jpg
- content: 三不政策 不主动 不拒绝 不负责
date: 2023/03/08 14:48:23
from: iPhone XR
- content: 绝不再错过每一场！😍
date: 2023/03/06 18:20:42
from: iPhone XR
image:
- https://s1.ax1x.com/2023/03/18/ppJbZm4.jpg
- content: 18岁时见到山川美景会很新鲜 很激动 但是28岁的自己看到山川美景时 却只会安静等待看着 没有快乐 也没有分享的欲望 如果让我给个建议的话 就是能玩就早点玩 越早越好 因为人并不能同时拥有青春和对青春的感受 就像在年少时有一本很喜欢的漫画 但是那个时候自己钱不够 买不起 所以呢 一直都记得这件事 而现在的我买得起当初那本漫画了 但是30岁的我已经不爱看了 正所谓 欲买桂花同载酒 终不似 少年游
date: 2023/03/02 13:26:28
- content: 周一就应该用来摸鱼~
date: 2023/02/27 13:02:56
from: Windows
image:
- https://s1.ax1x.com/2023/03/18/ppJbklT.jpg
- content: 我亦小封！永远爱自由！
date: 2023/02/27 01:27:13
from: iPhone XR
image:
- https://s1.ax1x.com/2023/03/18/ppJb9kn.jpg
- content: 听说人们将心上不可及之人称为月亮
date: 2023/02/25 22:33:38
from: Macbook Pro
- content: 各种观影史集于一体！人生足迹页诞生咯~
date: 2023/02/19 14:50:17
link: /collect/
- content: 七点四十五起床 下楼到公司 开电脑上厕所 车间转两圈 再去吃个早餐 报报价 冲冲浪回家吃午饭 一点半到公司 三点溜到奶茶店摸个鱼 打打游戏 四点半偷偷摸摸溜回公司 时不时被老爸训到五点下班 洗澡吃饭 开始单身夜生活！住家里唯一的好处就是周边都是狐朋狗友的各种局！枯燥的生活真的可以有所期待！
date: 2023/02/17 16:49:05
from: iPhone XR
- content: 八分钟！下班下班 让我睡死过去吧 真的好困
date: 2023/02/15 16:52:37
image:
- https://s1.ax1x.com/2023/03/18/ppJbSTs.jpg
- content: 一个人十三四岁的夏天,在路上捡到一支真枪。因为年少无知,天不怕地不怕,他扣下扳机。没有人死,也没有人受伤。他认为自己开了空枪。后来他三十岁或者更老,走在路上 听到背后有隐隐约约的风声。他停下来,回过身去,子弹正中眉心。很多事情，其实很早就有了结果
date: 2023/02/14 11:15:59
- content: iCatMusic 我的音乐歌单上线啦~
date: 2023/02/14 0:51:26
link: https://music.meuicat.com/数据参数释义
参数 备选值/类型 释义 class_name String 【可选】标识符，无实际意义，选填 essay_list Array 【必选】即刻短文数据列表 essay_list.content String 【必选】短文 文字内容 essay_list.date Time 【必选】短文发布时间 格式建议为 2022/10/26 08:00:00 essay_list.image Array 【可选】短文图片内容, 可填写多张图片 essay_list.from String 【可选】短文 来自何处, 当然也可以填任何你想填写的标识 essay_list.link String 【可选】外部链接 essay_list.aplayer Array 【可选】aplayer 播放器的单曲音乐, 需 aplayer 支持 essay_list.aplayer.server String 【essay_list.aplayer 后必选】aplayer 服务商 essay_list.aplayer.id String 【essay_list.aplayer 后必选】单曲 id 创建
[blogRoot]/source/essay/index.md来生成页面 page1
2
3
4
5
6
7---
title: 即刻短文
date: 2023-01-17 13:38:17
type: essay
top_img: false
aside: false
---创建
[blogRoot]/themes/butterfly/layout/includes/page/essay.pug页面内容
（注意该页面中可能存在部分fontawesome 图标需要自行替换）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50#essay_page
.author-content.author-content-item.essayPage.single
.card-content
.author-content-item-tips 即刻短文
span.author-content-item-title 封の碎碎念
.content-bottom
.tips 使用 即刻短文静态部署版 构建
.banner-button-group
a.banner-button(onclick='pjax.loadUrl("/daily/")', data-pjax-state)
i.iconfont.icat-essay(style='font-size: 1rem')
span.banner-button-text 关于说说
#bber
section.timeline.page-1
ul#waterfall.list
each i in site.data.essay
each item, index in i.essay_list
if index < 200
li.bber-item
.bber-content
p.datacont= item.content
if item.image
.bber-container-img
each iten, indey in item.image
a.bber-content-img(href=item.image[indey], target="_blank", data-fancybox="gallery", data-caption="")
img(src=item.image[indey])
.bber-content-noimg
.bber-content-noimg
.bber-content-noimg
if item.aplayer
.bber-music
.aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type="song" data-order="list" data-preload="none" data-autoplay="false" data-mutex="true" data-theme='var(--icat-essay-main)')
hr
.bber-bottom
.bber-info
.bber-info-time
- var datedata = new Date(item.date).toISOString()
i.iconfont.icat-time-fill
time.datatime(datetime= item.date)= datedata
if item.link
a.bber-content-link(target="_blank", title="跳转到短文指引的链接", href=item.link, rel="external nofollow")
i.fas.fa-link
| 链接
if item.from
.bber-info-from
i.far.fa-popsicle
span=item.from
.bber-reply(onclick="icat.commentText(" + `'${item.content}'` + ")")
i.iconfont.icat-message
#bber-tips(style='color: var(--icat-essay-secondtext);')
| - 已展开所有短文 -修改
[blogRoot]/themes/butterfly/layout/page.pug来使页面内容匹配
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9···
case page.type
+ when 'essay'
+ include includes/page/essay.pug
when 'photo'
include includes/page/photo.pug
when 'tags'
include includes/page/tags.pug
···
CSS样式
创建
[blogRoot]/source/css/essay_page/essay_page.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325#page:has(#essay_page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
#page:has(#essay_page) .page-title {
display: none;
}
#web_bg ~ .page:has(#essay_page) {
background: var(--icat-essay-background);
}
#bber .bber-container-img {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
#bber .bber-container-img .bber-content-noimg {
width: calc(100% / 4 - 5px);
}
#bber .bber-content-img img {
object-fit: cover;
max-height: 100%;
border-radius: 12px;
}
#bber .bber-content-img {
height: 100px;
border-radius: 12px;
overflow: hidden;
display: flex;
position: relative;
margin-bottom: 10px;
}
#bber .bber-content .datacont {
order: 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--icat-essay-fontcolor);
width: 100%;
line-height: 1.38;
border-radius: 12px;
margin-bottom: 0.8rem;
display: flex;
flex-direction: column;
text-align: justify;
padding: 0px 8px;
}
#bber p {
margin: 0px;
}
#bber div.bber-content {
display: flex;
flex-flow: wrap;
border-radius: 12px;
width: 100%;
height: 100%;
}
#bber .timeline ul li.bber-item {
position: relative;
width: 32%;
border: var(--icat-style-border-always);
border-radius: 12px;
padding: 1rem 1rem 0.5rem;
transition: all 0.3s ease 0s;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: flex-start;
background: var(--icat-essay-card-bg);
box-shadow: var(--icat-essay-shadow-border);
margin-right: 2%;
}
#bber .timeline #waterfall.show {
opacity: 1;
}
#bber .timeline #waterfall {
opacity: 0;
transition: all 0.3s ease 0s;
}
#bber ul.list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#bber {
margin-top: 1rem;
width: 100%;
}
#bber > section > ul > li.bber-item {
margin-bottom: 1rem;
}
#bber-tips {
font-size: 14px;
display: flex;
justify-content: center;
margin-top: 1rem;
}
#bber .timeline ul li.bber-item hr {
display: flex;
position: relative;
margin: 8px 0px;
border: 1px dashed var(--icat-essay-hr);
width: 100%;
}
#bber .bber-info {
display: flex;
align-items: center;
}
#bber > section > ul > li > div .bber-info-time,
#bber > section > ul > li > div .bber-info-from {
color: var(--icat-essay-fontcolor);
font-size: 0.7rem;
background-color: var(--icat-essay-gray-op);
padding: 0px 8px;
border-radius: 20px;
cursor: default;
display: flex;
align-items: center;
padding-right: 10px;
}
#bber > section > ul > li > div .bber-info-time > i {
padding-right: 2px;
}
#bber .bber-info .far.fa-clock {
margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-from span,
#bber > section > ul > li > div .bber-info-from {
margin-left: 4px;
}
#bber .bber-bottom {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
#bber .timeline ul li.bber-item:hover {
border: var(--icat-style-border-hover);
}
#bber .bber-content-link {
display: flex;
margin-left: 0.5rem;
font-size: 0.7rem;
align-items: center;
background-color: rgba(245, 108, 108, 0.13);
color: rgb(245, 108, 108);
padding: 0px 8px;
border-radius: 20px;
padding-right: 10px;
}
#bber .bber-content-link i {
margin-right: 3px;
}
#bber .bber-content-link:hover {
background-color: var(--icat-essay-main);
color: var(--icat-essay-white);
}
#bber .bber-music {
width: 100%;
height: 90px;
margin: 0.5rem 0;
border-radius: 8px;
overflow: hidden;
border: var(--icat-style-border-always);
background: var(--icat-essay-secondbg);
}
#bber .aplayer {
margin: 0;
}
#bber .aplayer.aplayer-withlrc .aplayer-pic {
height: 82px;
width: 82px;
margin: 4px;
border-radius: 4px;
}
.bber-music .aplayer.aplayer-withlrc .aplayer-info {
padding: 5px 7px 0;
}
#bber .aplayer .aplayer-info .aplayer-music {
height: 23px;
}
#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size: 0.8rem;
font-weight: 700;
margin: 0;
color: var(--icat-essay-fontcolor);
}
#bber .aplayer .aplayer-info .aplayer-controller {
align-items: center;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
padding: 0;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: initial;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
background: var(--icat-essay-gray);
height: 8px;
border-radius: 12px;
transition: 0.3s;
overflow: hidden;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
height: 100%;
border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
height: 100%;
border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
display: none;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: initial;
}
/* 顶部样式 */
.author-content.author-content-item.essayPage {
height: 19rem;
background: url(https://s1.ax1x.com/2023/03/17/ppG0Aje.jpg) left 28% / cover no-repeat;
color: var(--icat-essay-white);
overflow: hidden;
margin-top: 0px;
border-radius: 8px;
}
#page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {
color: var(--icat-essay-font-color-op);
border-radius: 20px !important;
}
.author-content-item .card-content {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
padding: 1rem 2rem;
}
.author-content-item .author-content-item-tips {
opacity: .8;
font-size: .6rem;
margin-bottom: 0.5rem;
}
.author-content-item .card-content .author-content-item-title {
margin-bottom: 0.5rem;
}
.author-content-item .author-content-item-title {
font-size: 36px;
font-weight: 700;
line-height: 1;
}
.author-content-item .content-bottom {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.author-content-item .card-content .banner-button-group .banner-button {
height: 40px;
width: 124px;
border-radius: 20px;
justify-content: center;
background: var(--icat-essay-card-bg);
color: var(--icat-essay-font-color);
display: flex;
align-items: center;
z-index: 1;
transition: .3s;
cursor: pointer;
border-bottom: 0!important;
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 4px;
font-size: 1rem;
}
.banner-button-text {
padding-right: 5px;
}
.banner-button-group {
margin-top: 10px;
}
/* 响应式 */
@media screen and (max-width: 1300px) {
#bber .timeline ul li.bber-item {
width: 49%;
margin-right: 1%;
}
}
@media screen and (max-width: 768px) {
#bber .timeline ul li.bber-item {
width: 100%;
margin-right: 0px;
}
}
[data-theme="dark"] #bber .bber-music .aplayer,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
background: var(--icat-essay-card-bg);
color: var(--icat-essay-fontcolor);
}
#bber .aplayer .aplayer-lrc p {
color: var(--icat-essay-fontcolor);
}在
_config.butterfly.yml中的inject下的head引入1
2
3
4
5inject:
head:
- <link rel="stylesheet" href="/css/essay_page/essay_page.css"> # 即刻短文样式
bottom:
- ···
JS文件
在
_config.butterfly.yml中开启站点的pjax1
2
3
4
5
6
7
8
9
10# Pjax
# https://github.com/MoOx/pjax
# 当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址；这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度
# 使用pjax后，一些自己DIY的js可能会无效，跳转页面时需要重新调用；使用pjax后，一些个别页面加载的js/css，将会改为所有页面都加载
# --------------------------------------
pjax:
enable: true
exclude:
# - xxxx
# - xxxx创建
[blogRoot]/source/js/custom.js用来处理即刻短文的逻辑
（或写在公共 js 中也可以）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96var percentFlag = false; // 节流阀
function essayScroll() {
let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
result <= 99 || (result = 99);
if (
!percentFlag &&
waterfallResult + 100 >= document.documentElement.clientHeight &&
document.querySelector("#waterfall")
) {
// console.info(waterfallResult, document.documentElement.clientHeight);
setTimeout(() => {
waterfall("#waterfall");
}, 500);
} else {
setTimeout(() => {
document.querySelector("#waterfall") && waterfall("#waterfall");
}, 500);
}
const r = window.scrollY + document.documentElement.clientHeight;
let p = document.getElementById("post-comment") || document.getElementById("footer");
(p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
return e.split(n).join(t);
}
var anzhiyu = {
diffDate: function (d, more = false) {
const dateNow = new Date();
const datePost = new Date(d);
const dateDiff = dateNow.getTime() - datePost.getTime();
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
let result;
if (more) {
const monthCount = dateDiff / month;
const dayCount = dateDiff / day;
const hourCount = dateDiff / hour;
const minuteCount = dateDiff / minute;
if (monthCount >= 1) {
result = datePost.toLocaleDateString().replace(/\//g, "-");
} else if (dayCount >= 1) {
result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
} else if (hourCount >= 1) {
result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
} else if (minuteCount >= 1) {
result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
} else {
result = GLOBAL_CONFIG.date_suffix.just;
}
} else {
result = parseInt(dateDiff / day);
}
return result;
},
changeTimeInEssay: function () {
document.querySelector("#bber") &&
document.querySelectorAll("#bber time").forEach(function (e) {
var t = e,
datetime = t.getAttribute("datetime");
(t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline");
});
},
reflashEssayWaterFall: function () {
document.querySelector("#waterfall") &&
setTimeout(function () {
waterfall("#waterfall");
document.getElementById("waterfall").classList.add("show");
}, 500);
},
commentText: function (e) {
if (e == "undefined" || e == "null") e = "好棒！";
var n = document.getElementsByClassName("el-textarea__inner")[0],
t = document.createEvent("HTMLEvents");
if (!n) return;
t.initEvent("input", !0, !0);
var o = replaceAll(e, "\n", "\n> ");
(n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
var i = document.querySelector("#post-comment").offsetTop;
window.scrollTo(0, i - 80),
n.focus(),
n.setSelectionRange(-1, -1),
document.getElementById("comment-tips") && document.getElementById("comment-tips").classList.add("show");
},
};
anzhiyu.changeTimeInEssay();
anzhiyu.reflashEssayWaterFall();新建 创建
[blogRoot]/source/js/waterfall/waterfall.js用于处理瀑布流1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60function waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0;
}
function c(a) {
return a + "px";
}
function d(a) {
return parseFloat(a.style.top);
}
function e(a) {
return parseFloat(a.style.left);
}
function f(a) {
return a.clientWidth;
}
function g(a) {
return a.clientHeight;
}
function h(a) {
return d(a) + g(a) + b("Bottom", a);
}
function i(a) {
return e(a) + f(a) + b("Right", a);
}
function j(a) {
a = a.sort(function (a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
});
}
function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function (a) {
return (a.style.position = "absolute"), a;
});
a.style.position = "relative";
var m = [];
l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
(p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
(p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
}在
_config.butterfly.yml中的inject下的bottom引入custom.js和waterfall.js1
2
3
4
5
6inject:
head:
- ···
bottom:
- <script async data-pjax src="/js/custom.js"></script> # 即刻逻辑文件
- <script async data-pjax src="/js/waterfall/waterfall.js"></script> # 即刻瀑布流JS
标签增加上下标
- 修改
[blogRoot]/themes/butterfly/scripts/helpers/page.js
（上标：${tag.length} 或 下标：${tag.length}； + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12···
source.forEach(tag => {
const ratio = length ? sizes.indexOf(tag.length) / length : 0
const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
style += ` color: ${color}`
- result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+ result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
})
return result
})
个人卡片背景
- 在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14[data-theme="light"] #aside-content > .card-widget.card-info {
background-image: url(https://s1.ax1x.com/2023/03/17/ppGwTkq.jpg);
background-repeat: no-repeat;
background-attachment: inherit;
background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
background-image: url(https://s1.ax1x.com/2023/03/17/ppGwI7n.jpg);
background-repeat: no-repeat;
background-attachment: inherit;
background-size: 100%;
}
/* 个人信息卡片背景图 */
足迹页
效果预览
足迹阁
人生足迹 - 那些我观赏过的艺术
创建数据
修改
[blogRoot]/themes/butterfly/layout/page.pug1
2
3
4
5
6when 'categories'
include includes/page/categories.pug
+ when 'collect'
+ include includes/page/collect.pug
default
include includes/page/default-page.pug新建
[blogRoot]/themes/butterfly/layout/includes/page/collect.pug页面内容
（样式可能需要根据自己的页面进行微调）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29#article-container-collect
.collect
- let collectPageContent = page.content
if site.data.collect
- let result = ""
each i in site.data.collect
- let className = i.class_name ? `<h2 ${i.class_desc?'':'style="margin-bottom:12px"'}>${i.class_name} (${i.link_list.length})</h2>` : ""
- let classDesc = i.class_desc ? `<div class="collect-desc">${i.class_desc}</div>` : ""
- let listResult = ""
each j in i.link_list
-
listResult += `
<div title="${j.name}" referrerPolicy="no-referrer" class="collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: #333;'}">
<div class="collect_top">
<i class="${j.icon?j.icon:'fa-solid fa-film'}"></i>
<span>${j.premiere?j.premiere:'看过?'}</span>
</div>
<div class="collect_content">
<span>${j.name?j.name:'未知'}</span>
<div>${j.score?toStar(j.score):toStar(0)}</div>
<p>${j.time?j.time:'时间'}</p>
</div>
<div class="collect-div"><a class="collect-a" href="${j.link?j.link:'链接'}"></a></div>
</div>
`
-
- result += `${className}${classDesc} <div class="collect-list">${listResult}</div>`
- collectPageContent = collectPageContent + result
!= collectPageContent新建
[blogRoot]/themes/butterfly/source/css/_page/collect.styl1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94.collect
h2
margin-bottom: 0
.collect-desc
margin-bottom: 10px
.collect-list
display: flex
gap: 18px
flex-wrap: wrap
.collect_box
--w: calc(100% / 6 - 15px)
width: var(--w)
display: flex
justify-content: space-between
flex-direction: column
background-position: center
background-size: cover
border-radius: 12px
position: relative
overflow: hidden
padding: 10px
color: #fff
transition: .5s
&::after
content: ''
position: absolute
height: 100%
width: 100%
left: 0
top: 0
background: rgba(0,0,0,0.3)
z-index: 0
transition: .5s
&:hover
transform: translateY(-10px)
&::after
background: rgba(0,0,0,0.1)
.collect_top
display: flex
z-index: 1
align-items: center
justify-content: space-between
.collect_content
z-index: 1
margin-top: 53%
span
display: block
font-size: 18px
font-weight: bold
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
p
font-size: 12px
margin-top: -6px
margin-bottom: 2px
--font-color: rgba(0,0,0,0.3)
[data-theme='dark']
.collect .collect-list .collect_box
color: #ddd !important
&:hover
transform: translateY(-10px)
&::after
background: rgba(0,0,0,0.2)
&::after
background: rgba(0,0,0,0.5)
.collect .collect-list
@media screen and (max-width: 1100px)
gap: 15px
.collect_box
--w: calc(20% - 12px)
@media screen and (max-width: 900px)
gap: 16px
.collect_box
--w: calc(25% - 12px)
@media screen and (max-width: 768px)
gap: 15px
.collect_box
--w: calc(100% / 3 - 10px)
@media screen and (max-width: 500px)
gap: 16px
.collect_box
--w: calc(50% - 8px)
.collect-div
position: absolute
z-index: 1
width: 85%
height: 90%
.collect-a
height: 100%
display: flex修改
[blogRoot]/themes/butterfly/scripts/helpers/page.js
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27···
hexo.extend.helper.register('page_description', function () {
const { config, page } = this
let description = page.description || page.content || page.title || config.description
if (description) {
description = escapeHTML(stripHTML(description).substring(0, 150)
.trim()
).replace(/\n/g, ' ')
return description
}
})
+hexo.extend.helper.register('toStar', function(num) {
+ let tmp = ''
+ for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="fa-solid fa-star"></i>' } // 整数部分加 实心星星
+ if (num - Math.floor(num) != 0) tmp += '<i class="fa-solid fa-star-half-alt"></i>' // 小数部分转成 半星
+ for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="fa-regular fa-star"></i>' } // 不够5个补 空心星星
+ return tmp
+})
+// 藏宝阁星星
hexo.extend.helper.register('cloudTags', function (options = {}) {
const env = this
let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
unit = unit || 'px'
···新建
[blogRoot]/source/_data/collect.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110- class_name: 📽️ 荧幕电影 # fa-solid fa-film 电影图标
class_desc: # 分类描述
link_list:
- name: 流浪地球2 # 片名
score: 5 # 1-5星
premiere: 三刷 # N刷
icon: fa-solid fa-film # 左上角图标
time: 2023/02/13 # 观影时间
img: https://yife68.gitee.io/icat-pic-2023/collect/film/1.jpg #图片链接
link: https://movie.douban.com/subject/35267208/ # 影片地址
- name: 动物世界
score: 5
premiere: N刷
icon: fa-solid fa-film
time: 未知时间
img: https://yife68.gitee.io/icat-pic-2023/collect/film/24.jpg
link: https://movie.douban.com/subject/26925317/?_dtcc=1
- name: 盛夏未来
score: 5
premiere: 已看
icon: fa-solid fa-film
time: 2021/08/22
img: https://yife68.gitee.io/icat-pic-2023/collect/film/39.jpg
link: https://movie.douban.com/subject/35158124/
- class_name: 💻 小屏电影 # fa-solid fa-film 电影图标
class_desc: # 分类描述
link_list:
- name: 素媛 # 片名
score: 5 # 1-5星
premiere: 已看 # N刷
icon: fa-solid fa-film # 左上角图标
time: 2021/01/01 # 观影时间
img: https://yife68.gitee.io/icat-pic-2023/collect/film/6.jpg #图片链接
link: https://movie.douban.com/subject/21937452/ # 影片地址
- name: 艺伎回忆录
score: 3
premiere: 已看
icon: fa-solid fa-film
time: 未知时间
img: https://yife68.gitee.io/icat-pic-2023/collect/film/21.jpg
link: https://movie.douban.com/subject/1309059/
- class_name: 📺 电视剧 # far fa-play-circle 电视剧图标
class_desc: # 分类描述
link_list:
- name: 狂飙 # 片名
score: 5 # 1-5星
premiere: 已追完 # N刷
icon: far fa-play-circle # 左上角图标
time: 2023/01/30 # 观影时间
img: https://yife68.gitee.io/icat-pic-2023/collect/TV-Play/1.jpg #图片链接
link: https://movie.douban.com/subject/35465232/ # 影片地址
- name: 林深见鹿
score: 5
premiere: 正在追
icon: far fa-play-circle
time: 2023/02/20
img: https://yife68.gitee.io/icat-pic-2023/collect/TV-Play/2.jpg
link: https://movie.douban.com/subject/35479983/
- class_name: 🍀 动漫 # far fa-play-circle 动漫图标
class_desc: # 分类描述
link_list:
- name: 名侦探柯南 # 片名
score: 5 # 1-5星
premiere: 未追完 # N刷
icon: far fa-play-circle # 左上角图标
time: 2016/06/01 # 在追时间
img: https://yife68.gitee.io/icat-pic-2023/collect/cartoon/1.jpg #图片链接
link: https://movie.douban.com/subject/1463371/ # 影片地址
- name: 武庚纪
score: 5
premiere: 未追完
icon: far fa-play-circle
time: 2016/06/24
img: https://yife68.gitee.io/icat-pic-2023/collect/cartoon/3.jpg
link: https://movie.douban.com/subject/26564735/
- class_name: 📚 书籍 # fas fa-book 书籍图标
class_desc: # 分类描述
link_list:
- name: 三体 # 书名
score: 5 # 1-5星
premiere: 已读完 # N刷
icon: fas fa-book # 左上角图标
time: 未知时间 # 阅读时间
img: https://yife68.gitee.io/icat-pic-2023/collect/book/1.jpg #图片链接
link: https://book.douban.com/subject/2567698/ # 书籍地址
- name: 三体Ⅱ
score: 5
premiere: 已读完
icon: fas fa-book
time: 未知时间
img: https://yife68.gitee.io/icat-pic-2023/collect/book/2.jpg
link: https://book.douban.com/subject/3066477/创建
[blogRoot]/source/collect/index.md来生成页面 page1
2
3
4
5
6
7---
title: 人生足迹
date: 2023-02-20 00:28:12
type: collect
top_img: https://s1.ax1x.com/2023/03/17/ppG0ZBd.jpg
aside: false
---
随机网页跳转（Heo无缝版）
创建
[blogRoot]/themes/butterfly/scripts/helpers/random.js1
2
3
4
5
6
7
8
9
10
11hexo.extend.generator.register('random', function (locals) {
const config = hexo.config.random || {}
const posts = []
for (const post of locals.posts.data) {
if (post.random !== false) posts.push(post.path)
}
return {
path: config.path || 'icat/random.js',
data: `var posts=${JSON.stringify(posts)};function toRandomPost(){pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]);};`
}
})若没有开启 pjax 用这个js
1
2
3
4
5
6
7
8
9
10
11hexo.extend.generator.register('random', function (locals) {
const config = hexo.config.random || {}
const posts = []
for (const post of locals.posts.data) {
if (post.random !== false) posts.push(post.path)
}
return {
path: config.path || 'icat/random.js',
data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
}
})在
_config.butterfly.yml中的inject下的bottom引入random.js1
2
3
4
5inject:
head:
- ···
bottom:
- <script src="/icat/random.js"></script> # 随机网页跳转
最新文章标志
原理：通过 hexo 的 api 获取所有文章，然后比较时间得到最新文章的名字，返回给pug文件比较并添加元素。
修改
[blogRoot]/themes/butterfly/scripts/helpers/page.js
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21···
return loop(menu) || defaultTitle
})
hexo.extend.helper.register('isImgOrUrl', function (path) {
const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
return true
}
return false
})
+hexo.extend.helper.register('newPost', function() {
+ let name, time;
+ hexo.locals.get('posts').map((item, index) => {
+ if (index == 0) name = item.title, time = item.date
+ else if (item.date > time) { name = item.title, time = item.date }
+ });
+ return name
+})
+// 最新文章修改
[blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26mixin postUI(posts)
+ - let newTitle= newPost()
each article , index in page.posts.data
.recent-post-item
-
let link = article.link || article.path
let title = article.title || _p('no_title')
const position = theme.cover.position
let leftOrRight = position === 'both'
? index%2 == 0 ? 'left' : 'right'
: position === 'left' ? 'left' : 'right'
let post_cover = article.cover
let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
-
if post_cover && theme.cover.index_enable
.post_cover(class=leftOrRight)
a(href=url_for(link) title=title)
if article.cover_type === 'img'
img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
else
div.post-bg(style=`background: ${post_cover}`)
.recent-post-info(class=no_cover)
+ if newTitle == title
+ span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新文章
p(class=`p-icat-${leftOrRight=='left'?'right':'left'}`)
a.article-title(href=url_for(link) title=title)= title在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28#recent-posts>.recent-post-item {
position: relative;
}
.newPost-left,
.newPost-right {
color: white;
padding: 4px 10px;
background-color: #E60012;
border-radius: 9px 9px 9px 9px;
letter-spacing: 2px;
padding-left: 13px;
}
.newPost-left {
left: 15px;
}
.newPost-right {
right: 15px;
}
.p-icat-left,
.p-icat-right {
margin: 8px;
}
/* 最新文章图标 */
51la & 灵雀监控
51la统计
免费、易用、专业的网站数据统计与营销分析平台
灵雀应用监控
提供专业、全面、精准的网站错误监控服务，准确追踪异常问题，帮助提升异常问题的感知及解决效率
在上方两个平台注册好账号 并添加网站
在
_config.butterfly.yml中的inject下的head引入文件1
2
3
4
5
6
7
8inject:
head:
- <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
- <script> LA.init({id:"51la统计的16位id",ck:"51la统计的16位ck"})</script> # 51统计 - id & ck
- <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
- <script>new LingQue.Monitor().init({id:"灵雀监控的16位id",sendSuspicious:true});</script> # 灵雀监控 - id
bottom:
- ···
右键菜单
创建
[blogRoot]/themes/butterfly/layout/includes/rightmenu.pug
（注意该页面中fontawesome 图标需要自行替换）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70#rightMenu.js-pjax
.rightMenu-group.rightMenu-small
a.rightMenu-item(href="javascript:window.history.back();")
i.iconfont.icat-angle-left
a.rightMenu-item(href="javascript:window.history.forward();")
i.iconfont.icat-angle-right
a.rightMenu-item(href="javascript:window.location.reload();")
i.iconfont.icat-refresh
a.rightMenu-item(href="javascript:rmf.switchDarkMode();")
i.iconfont.icat-changing-over
.rightMenu-group.rightMenu-line.hide#menu-text
a.rightMenu-item(href="javascript:rmf.copySelect();")
i.iconfont.icat-copy-paste
span='复制'
a.rightMenu-item(href="javascript:window.open(\"https://www.baidu.com/s?wd=\"+window.getSelection().toString());window.location.reload();")
i.iconfont.icat-baidu
span='百度搜索'
.rightMenu-group.rightMenu-line.hide#menu-too
a.rightMenu-item(href="javascript:window.open(window.getSelection().toString());window.location.reload();")
i.iconfont.icat-jump-link
span='转到链接'
.rightMenu-group.rightMenu-line.hide#menu-paste
a.rightMenu-item(href='javascript:rmf.paste()')
i.iconfont.icat-copy-paste
span='粘贴'
.rightMenu-group.rightMenu-line.hide#menu-post
if is_post()||is_page()
a.rightMenu-item(href="javascript:rmf.switchReadMode();")
i.iconfont.icat-read
span='阅读模式'
a.rightMenu-item(href="javascript:rmf.copyWordsLink()")
i.iconfont.icat-copy-paste
span='复制本文地址'
.rightMenu-group.rightMenu-line.hide#menu-to
a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
i.iconfont.icat-new-window
span='新窗口打开'
a.rightMenu-item#menu-too(href="javascript:rmf.open()")
i.iconfont.icat-jump-link
span='转到链接'
a.rightMenu-item(href="javascript:rmf.copyLink()")
i.iconfont.icat-copy-paste
span='复制链接'
.rightMenu-group.rightMenu-line.hide#menu-img
a.rightMenu-item(href="javascript:rmf.saveAs()")
i.iconfont.icat-download-save
span='保存图片'
a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
i.iconfont.icat-new-window
span='在新窗口打开'
a.rightMenu-item(href="javascript:rmf.click()")
i.iconfont.icat-full-screen
span='全屏显示'
a.rightMenu-item(href="javascript:rmf.copyLink()")
i.iconfont.icat-copy-paste
span='复制图片链接'
.rightMenu-group.rightMenu-line
a.rightMenu-item(href="javascript:toRandomPost()")
i.iconfont.icat-random
span='随便逛逛'
a.rightMenu-item(href="javascript:rmf.translate();")
i.iconfont.icat-simple-complex
span='繁简转换'
.rightMenu-group.rightMenu-line
a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")
i.iconfont.icat-conceal
span='隐私协议'
a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")
i.iconfont.icat-cc
span='版权协议'修改
[blogRoot]/themes/butterfly/layout/includes/layout.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8···
else
include ./404.pug
include ./rightside.pug
include ./additional-js.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
+ !=partial('includes/rightmenu',{}, {cache:true})新建
[blogRoot]/themes/butterfly/source/css/rightmenu.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71#rightMenu{
display: none;
position: fixed;
width: 160px;
height: fit-content;
top: 10%;
left: 10%;
background-color: var(--card-bg);
border: 1px solid var(--icat-rightmenu-style-border);
border-radius: 8px;
z-index: 100;
}
#rightMenu .rightMenu-group{
padding: 7px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)){
border-bottom: 1px solid var(--icat-rightmenu-theme-op);
}
#rightMenu .rightMenu-group.rightMenu-small{
display: flex;
justify-content: space-between;
}
#rightMenu .rightMenu-group .rightMenu-item{
height: 30px;
line-height: 30px;
border-radius: 8px;
transition: 0.3s;
color: var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{
display: flex;
height: 40px;
line-height: 40px;
padding: 0 4px;
}
#rightMenu .rightMenu-group .rightMenu-item:hover{
background-color: var(--text-bg-hover);
}
#rightMenu .rightMenu-group .rightMenu-item i{
display: inline-block;
text-align: center;
line-height: 30px;
width: 30px;
height: 30px;
padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item span{
line-height: 30px;
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{
height: 40px;
line-height: 40px;
}
.rightMenu-group.hide{
display: none;
}
#rightMenu .rightMenu-group .rightMenu-item .icat-refresh,
#rightMenu .rightMenu-group .rightMenu-item .icat-changing-over,
#rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex {
font-weight: 900;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}在
_config.butterfly.yml中的inject下的head引入rightmenu.css1
2
3
4
5inject:
head:
- <link rel="stylesheet" href="/css/rightmenu.css"> # 右键菜单样式
bottom:
- ···创建
[blogRoot]/themes/butterfly/source/js/rightmenu.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300function setMask(){//设置遮罩层
if(document.getElementsByClassName("rmMask")[0]!=undefined){
return document.getElementsByClassName("rmMask")[0];
}
mask = document.createElement('div');
mask.className = "rmMask";
mask.style.width = window.innerWidth + 'px';
mask.style.height = window.innerHeight + 'px';
mask.style.background = '#fff';
mask.style.opacity = '.0';
mask.style.position = 'fixed';
mask.style.top = '0';
mask.style.left = '0';
mask.style.zIndex = 998;
document.body.appendChild(mask);
document.getElementById("rightMenu").style.zIndex=19198;
return mask;
}
function insertAtCursor(myField, myValue) {
//IE 浏览器
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//FireFox、Chrome等
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// 保存滚动条
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}
let rmf = {};
rmf.showRightMenu = function (isTrue, x = 0, y = 0) {
let $rightMenu = $('#rightMenu');
$rightMenu.css('top', x + 'px').css('left', y + 'px');
if (isTrue) {
$rightMenu.show();
} else {
$rightMenu.hide();
}
}
rmf.switchDarkMode = function () {
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
if (nowMode === 'light') {
activateDarkMode()
saveToLocal.set('theme', 'dark', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
} else {
activateLightMode()
saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
typeof utterancesTheme === 'function' && utterancesTheme()
typeof FB === 'object' && window.loadFBComment()
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
};
// 日夜模式切换
rmf.copyWordsLink = function () {
let url = window.location.href
let txa = document.createElement("textarea");
txa.value = url;
document.body.appendChild(txa)
txa.select();
document.execCommand("Copy");
document.body.removeChild(txa);
Snackbar.show({
text: '链接复制成功！快去分享吧！',
pos: 'bottom-center',
showAction: false
});
}
// 复制链接
rmf.switchReadMode = function () {
const $body = document.body
$body.classList.add('read-mode')
const newEle = document.createElement('button')
newEle.type = 'button'
newEle.className = 'fas fa-sign-out-alt exit-readmode'
$body.appendChild(newEle)
function clickFn() {
$body.classList.remove('read-mode')
newEle.remove()
newEle.removeEventListener('click', clickFn)
}
newEle.addEventListener('click', clickFn)
}
// 阅读模式
rmf.copySelect = function () {
document.execCommand('Copy', false, null);
//这里可以写点东西提示一下 已复制
Snackbar.show({
text: '复制成功！快去分享吧！',
pos: 'bottom-center',
showAction: false
});
}
//复制选中文字
rmf.translate = function () {
document.getElementById("translateLink").click();
}
// 繁简转换
rmf.searchinThisPage=()=>{
document.body.removeChild(mask);
document.getElementsByClassName("local-search-box--input")[0].value=window.getSelection().toString()
document.getElementsByClassName("search")[0].click()
var evt = document.createEvent("HTMLEvents");evt.initEvent("input", false, false);document.getElementsByClassName("local-search-box--input")[0].dispatchEvent(evt);
}
document.body.addEventListener('touchmove', function(e){
}, { passive: false });
function popupMenu() {
//window.oncontextmenu=function(){return false;}
window.oncontextmenu = function (event) {
if(event.ctrlKey||document.body.clientWidth<900) return true;
$('.rightMenu-group.hide').hide();
if (document.getSelection().toString()) {
$('#menu-text').show();
}
if (document.getElementById('post')) {
$('#menu-post').show();
} else {
if (document.getElementById('page')) {
$('#menu-post').show();
}
}
var el = window.document.body;
el = event.target;
var a=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
if (a.test(window.getSelection().toString())&&el.tagName!="A"){
$('#menu-too').show()
}
if (el.tagName == 'A') {
$('#menu-to').show()
rmf.open = function () {
if(el.href.indexOf("http://")==-1&&el.href.indexOf("https://")==-1||el.href.indexOf("yisous.xyz")!=-1){
pjax.loadUrl(el.href)
}
else{
location.href = el.href
}
}
rmf.openWithNewTab = function () {
window.open(el.href);
// window.location.reload();
}
rmf.copyLink = function () {
let url = el.href
let txa = document.createElement("textarea");
txa.value = url;
document.body.appendChild(txa)
txa.select();
document.execCommand("Copy");
document.body.removeChild(txa);
}
}
if (el.tagName == 'IMG') {
$('#menu-img').show()
rmf.openWithNewTab = function () {
window.open(el.src);
// window.location.reload();
}
rmf.click = function () {
el.click()
}
rmf.copyLink = function () {
let url = el.src
let txa = document.createElement("textarea");
txa.value = url;
document.body.appendChild(txa)
txa.select();
document.execCommand("Copy");
document.body.removeChild(txa);
}
rmf.saveAs=function(){
var a = document.createElement('a');
var url = el.src;
var filename = url.split("/")[-1];
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}
} else if (el.tagName == "TEXTAREA" || el.tagName == "INPUT") {
$('#menu-paste').show();
// rmf.paste=function(){
// input.addEventListener('paste', async event => {
// event.preventDefault();
// const text = await navigator.clipboard.readText();
// el.value+=text;
// });
// }
rmf.paste = function () {
navigator.permissions
.query({
name: 'clipboard-read'
})
.then(result => {
if (result.state == 'granted' || result.state == 'prompt') {
//读取剪贴板
navigator.clipboard.readText().then(text => {
console.log(text)
insertAtCursor(el, text)
})
} else {
Snackbar.show({
text: '请允许读取剪贴板！',
pos: 'top-center',
showAction: false,
})
}
})
}
}
let pageX = event.clientX + 10;
let pageY = event.clientY;
let rmWidth = $('#rightMenu').width();
let rmHeight = $('#rightMenu').height();
if (pageX + rmWidth > window.innerWidth) {
pageX -= rmWidth + 10;
}
if (pageY + rmHeight > window.innerHeight) {
pageY -= pageY + rmHeight - window.innerHeight;
}
mask=setMask();
window.onscroll=()=>{
rmf.showRightMenu(false);
window.onscroll=()=>{}
document.body.removeChild(mask);
}
$(".rightMenu-item").click(()=>{
document.body.removeChild(mask);
})
$(window).resize(()=>{
rmf.showRightMenu(false);
document.body.removeChild(mask);
})
mask.onclick=()=>{
document.body.removeChild(mask);
}
rmf.showRightMenu(true, pageY, pageX);
return false;
};
window.addEventListener('click', function () {
rmf.showRightMenu(false);
});
}
if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
popupMenu()
}
const box = document.documentElement
function addLongtabListener(target, callback) {
let timer = 0 // 初始化timer
target.ontouchstart = () => {
timer = 0 // 重置timer
timer = setTimeout(() => {
callback();
timer = 0
}, 380) // 超时器能成功执行，说明是长按
}
target.ontouchmove = () => {
clearTimeout(timer) // 如果来到这里，说明是滑动
timer = 0
}
target.ontouchend = () => { // 到这里如果timer有值，说明此触摸时间不足380ms，是点击
if (timer) {
clearTimeout(timer)
}
}
}
addLongtabListener(box, popupMenu)在
_config.butterfly.yml中的inject下的bottom引入rightmenu.js1
2
3
4
5inject:
head:
- ···
bottom:
- <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单 - 多样式JS
动态相册
如果没有服务器可以搭建memos，可以使用小N和杜老师维护的公益服务：memos纯公益代部署服务
效果预览
生活相册
关于我 快门の色彩瞬间
创建数据
创建
[blogRoot]/source/photos/index.md来生成页面 page1
2
3
4
5
6
7---
title: 生活相册
date: 2023-03-14 21:47:47
type: photo
top_img: false
aside: false
---创建
[blogRoot]/source/js/memos/photo.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36// 适配pjax
function whenDOMReady() {
if (location.pathname == '/photos/') photos();
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)
// 自适应
window.onresize = () => {
if (location.pathname == '/photos/') waterfall('.gallery-photos');
};
// 函数
function photos() {
fetch('你的memos地址/api/memo?creatorId=32&tag=相册').then(res => res.json()).then(data => { // 记得修改memos地址
let html='', imgs = [];
data.data.forEach(item => { imgs = imgs.concat(item.content.match(/\!\[.*?\]\(.*?\)/g)) });
imgs.forEach(item => {
let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1');
if (tat.indexOf(' ') != -1) {
time = tat.split(' ')[0];
title = tat.split(' ')[1];
} else title = tat
html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="photo-img" loading='lazy' decoding="async" src="${img}"></a>`;
title ? html += `<span class="photo-title">${title}</span>` : '';
time ? html += `<span class="photo-time">${time}</span>` : '';
html += `</div>`;
});
document.querySelector('.gallery-photos.page').innerHTML = html
imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos'); });
window.Lately && Lately.init({ target: '.photo-time' });
}).catch()
}
获取api地址
memos地址就是首页地址，如：memos.meuicat.com
发送一条
公共memos点击
探索接着点击用户名查看URL获取ID
如url是：https://memos.meuicat.com/u/1
则creatorId就是1
最后完整链接如下：
https://memos.meuicat.com//api/memo?creatorId=32&tag=相册
能看到数据则为正确链接
创建
[blogRoot]/source/js/memos/imgStatus.min.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17! function() {
this.loaded = 0, this.failed = 0, this.total = 0, this.watch = function(a, b) {
var c = document.querySelectorAll(a);
if (!c.length) return console.log("[imgStatus]: There aren't any images associated with this selector (" + a + ")!");
this.total = c.length;
for (var d = 0; d < this.total; d++) isCached(c[d].src) ? this._setLoaded(b) : c[d].addEventListener ? (c[d].addEventListener("load", this._setLoaded.bind(this, b)), c[d].addEventListener("error", this._setFailed.bind(this, b))) : (c[d].attachEvent("onload", this._setLoaded.bind(this, b)), c[d].attachEvent("onerror", this._setFailed.bind(this, b)))
}, this.isCached = function(a) {
var b = new Image;
return b.src = a, b.complete
}, this._setFailed = function(a, b) {
++this.failed, "function" == typeof a && a(this)
}, this._setLoaded = function(a, b) {
++this.loaded, "function" == typeof a && a(this)
}, this.isDone = function() {
return this.loaded + this.failed === this.total ? !0 : !1
}, "object" == typeof window && (window.imgStatus = this)
}();创建
[blogRoot]/source/js/memos/lately.min.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63/**
* Lately.min.js 2.5.2
* MIT License - http://www.opensource.org/licenses/mit-license.php
* https://tokinx.github.io/lately/
*/
! function() {
window.Lately = new function() {
var t = this;
this.lang = {
second: "秒",
minute: "分钟",
hour: "小时",
day: "天",
month: "个月",
year: "年",
ago: "前",
error: "NaN"
};
var e = function(e) {
e = new Date(n(e));
var r = new function() {
this.second = (Date.now() - e.getTime()) / 1e3, this.minute = this.second / 60, this.hour = this.minute / 60, this.day = this.hour / 24, this.month = this.day / 30, this.year = this.month / 12
}, i = Object.keys(r).reverse().find(function(t) {
return r[t] >= 1
});
return (i ? function(t, e) {
return Math.floor(t) + e
}(r[i], t.lang[i]) : t.lang.error) + t.lang.ago
}, n = function(t) {
return t = new Date(t && ("number" == typeof t ? t : t.replace(/-/g, "/").replace("T", " "))), !isNaN(t.getTime()) && t.getTime()
};
return {
init: function() {
var r = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, i = r.target,
a = void 0 === i ? "time" : i,
o = r.lang;
o && (t.lang = o);
var u = !0,
h = !1,
l = void 0;
try {
for (var s, c = document.querySelectorAll(a)[Symbol.iterator](); !(u = (s = c.next()).done); u = !0) {
var f = s.value,
g = n(f.dateTime) || n(f.title) || n(f.innerHTML) || 0;
if (!g) return;
f.title = new Date(g).toLocaleString(), f.innerHTML = e(g)
}
} catch (t) {
h = !0, l = t
} finally {
try {
!u && c.
return &&c.
return ()
} finally {
if (h) throw l
}
}
},
format: e
}
}
}();创建
[blogRoot]/source/js/memos/waterfall.min.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69function waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0
}
function c(a) {
return a + "px"
}
function d(a) {
return parseFloat(a.style.top)
}
function e(a) {
return parseFloat(a.style.left)
}
function f(a) {
return a.clientWidth
}
function g(a) {
return a.clientHeight
}
function h(a) {
return d(a) + g(a) + b("Bottom", a)
}
function i(a) {
return e(a) + f(a) + b("Right", a)
}
function j(a) {
a = a.sort(function(a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
})
}
function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function(a) {
return a.style.position = "absolute", a
});
a.style.position = "relative";
var m = [];
l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
}在
_config.butterfly.yml中的inject下的bottom引入waterfall.min.jslately.min.jsimgStatus.min.jsphoto.js1
2
3
4
5
6
7
8inject:
head:
- ···
bottom:
- <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos动态相册 - waterfall
- <script type="text/javascript" src="/js/memos/imgStatus.min.js"></script> # memos动态相册 - imgStatus
- <script type="text/javascript" src="/js/memos/lately.min.js"></script> # memos动态相册 - lately
- <script type="text/javascript" src="/js/memos/photo.js"></script> # memos动态相册 - 格式链JS
使用
1 | #相册 |
示例
1 | #相册 |
文章meta显示位置
给文章添加一个位置显示
创建数据
- 修改
[blogRoot]/themes/butterfly/layout/includes/header/post-info.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17···
else
- let data_type_update = theme.post_meta.post.date_type === 'updated'
- let date_type = data_type_update ? 'updated' : 'date'
- let date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt'
- let date_title = data_type_update ? _p('post.updated') : _p('post.created')
i.fa-fw.post-meta-icon(class=date_icon)
span.post-meta-label= date_title
time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
+ span.post-meta-Publish-Location
+ span.post-meta-separator |
+ i.iconfont.icat-publish-location
+ span= page.publish_location || _p('未知')
if (theme.post_meta.post.categories && page.categories.data.length > 0)
span.post-meta-categories
if (theme.post_meta.post.date_type)
···
使用方式
Post Front-matter内加publish_location项1
2
3---
publish_location: 上海
---
文章meta显示调整
PE端顶部文章meta居中显示，并调整添加位置后meta重新排序
修改
[blogRoot]/themes/butterfly/layout/includes/header/post-info.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32···
span.post-meta-Publish-Location
span.post-meta-separator |
i.iconfont.icat-publish-location
span= page.publish_location || _p('未知')
- if (theme.post_meta.post.categories && page.categories.data.length > 0)
- span.post-meta-categories
- if (theme.post_meta.post.date_type)
- span.post-meta-separator |
-
- each item, index in page.categories.data
- i.fas.fa-inbox.fa-fw.post-meta-icon
- a(href=url_for(item.path)).post-meta-categories #[=item.name]
- if (index < page.categories.data.length - 1)
- i.fas.fa-angle-right.post-meta-separator
.meta-secondline
+ if (theme.post_meta.post.categories && page.categories.data.length > 0)
+ span.post-meta-categories
+ if (theme.post_meta.post.date_type)
+
+ each item, index in page.categories.data
+ i.fas.fa-inbox.fa-fw.post-meta-icon
+ a(href=url_for(item.path)).post-meta-categories #[=item.name]
+ if (index < page.categories.data.length - 1)
+ i.fas.fa-angle-right.post-meta-separator
- let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
if (postWordcount)
span.post-meta-separator |
span.post-meta-wordcount
if theme.wordcount.post_wordcount
···修改
[blogRoot]/themes/butterfly/source/css/_layout/head.styl
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38···
#post-info
position: absolute
bottom: 100px
padding: 0 8%
width: 100%
text-align: center
+maxWidth900()
bottom: 30px
- text-align: left
+ text-align: center
···
#post-meta
color: var(--light-grey)
font-size: 95%
- +minWidth768()
- > .meta-secondline
- > span:first-child
- display: none
+maxWidth768()
font-size: 90%
> .meta-firstline,
> .meta-secondline
- display: inline
+ display: -webkit-inline-box
.post-meta
&-separator
- margin: 0 5px
+ margin: 0 3px
+ padding-left: 5px
···
语雀同款链接卡片
效果预览
爱吃肉的猫
有肉有猫有生活.
创建数据
创建
[blogRoot]/themes/butterfly/scripts/tag/link.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22/**
* link
* {% link url,title,favicon,desc %}
* {% link 链接,标题,图标,介绍 %}
*/
'use strict'
let defaultIcon = '<svg t="1670307855063" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19066" width="200" height="200"><path d="M504.064 516.608m-384.256 0a384.256 384.256 0 1 0 768.512 0 384.256 384.256 0 1 0-768.512 0Z" fill="#009CF5" p-id="19068"></path><path d="M746.112 270.464L472.448 485.12l63.104 63.104L750.08 274.56c2.304-2.688-1.28-6.144-3.968-4.096z" fill="#FF4C3A" p-id="19069"></path><path d="M262.016 762.752l273.664-214.528-63.104-63.104-214.656 273.536c-2.176 2.688 1.28 6.144 4.096 4.096z" fill="#FFFFFF" p-id="19070"></path><path d="M505.216 155.136c-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.56 5.888 5.888 5.888s5.888-2.56 5.888-5.888v-53.504c-0.128-3.2-2.688-5.888-5.888-5.888zM442.368 160.512c-3.2 0.512-5.376 3.584-4.736 6.784l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736zM396.288 234.368c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552l-18.304-50.304c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552l18.304 50.304zM348.928 257.408c1.664 2.816 5.248 3.712 7.936 2.176s3.712-5.248 2.176-7.936l-26.752-46.336c-1.664-2.816-5.248-3.712-7.936-2.176-2.816 1.664-3.712 5.248-2.176 7.936l26.752 46.336zM306.304 288.256c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.432 2.048-2.816 5.76-0.768 8.192l34.432 40.96zM269.696 326.144c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-2.048 2.432-1.792 6.144 0.768 8.192l40.96 34.432zM193.792 342.912l46.336 26.752c2.816 1.664 6.4 0.64 7.936-2.176 1.664-2.816 0.64-6.4-2.176-8.064L199.552 332.8c-2.816-1.664-6.4-0.64-7.936 2.176-1.664 2.688-0.64 6.272 2.176 7.936zM168.32 399.488l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM207.872 457.344l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784zM201.984 509.568H148.48c-3.2 0-5.888 2.56-5.888 5.888 0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888zM205.44 562.176l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.376 6.784 4.736l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784s-3.584-5.248-6.784-4.736zM217.856 613.376l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 3.072 4.48 4.608 7.552 3.456l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456zM238.976 661.504l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.816 5.248 3.712 8.064 2.176l46.336-26.752c2.816-1.664 3.712-5.248 2.176-8.064-1.664-2.816-5.248-3.712-8.064-2.176zM268.16 705.408l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.432 5.76 2.816 8.192 0.768l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-1.92-2.56-5.632-2.816-8.192-0.768zM304.512 743.424l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.304-1.92-6.016-1.664-8.192 0.768zM347.008 774.656l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.664 6.4 0.64 8.064-2.176l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.536-6.4-0.64-8.064 2.176zM394.24 798.08l-18.304 50.304c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.152 6.4-0.512 7.552-3.456l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.528 0.384-7.552 3.456zM440.192 872.32c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.64 3.2 1.536 6.272 4.736 6.784zM502.912 878.08c3.2 0 5.888-2.56 5.888-5.888v-53.504c0-3.2-2.56-5.888-5.888-5.888-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.688 5.888 5.888 5.888zM549.632 815.232l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736-3.2 0.512-5.248 3.584-4.736 6.784zM600.832 802.816l18.304 50.304c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552L611.84 798.72c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552zM649.088 781.696l26.752 46.336c1.664 2.816 5.248 3.712 8.064 2.176 2.816-1.664 3.712-5.248 2.176-8.064l-26.88-46.336c-1.664-2.816-5.248-3.712-8.064-2.176-2.816 1.664-3.712 5.248-2.048 8.064zM692.864 752.384l34.432 40.96c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.56 2.048-2.816 5.76-0.768 8.192zM730.88 716.032l40.96 34.432c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-1.92 2.432-1.664 6.144 0.768 8.192zM762.112 673.664l46.336 26.752c2.816 1.664 6.4 0.64 8.064-2.176 1.664-2.816 0.64-6.4-2.176-7.936L768 663.552c-2.816-1.664-6.4-0.64-8.064 2.176-1.536 2.688-0.64 6.272 2.176 7.936zM785.536 626.432l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM800.256 575.872l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784zM800.256 517.76c0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888h-53.504c-3.328 0-5.888 2.56-5.888 5.888zM802.688 471.04l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784-0.512-3.2-3.584-5.376-6.784-4.736l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.248 6.784 4.736zM790.272 419.84l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 2.944 4.48 4.608 7.552 3.456zM769.152 371.584l46.336-26.752c2.816-1.664 3.712-5.248 2.176-7.936-1.664-2.816-5.248-3.712-8.064-2.176l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.688 5.248 3.712 8.064 2.048zM739.84 327.808l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-2.048-2.432-5.76-2.816-8.192-0.768l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.56 5.76 2.816 8.192 0.768zM703.488 289.664l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.432-2.048-6.144-1.792-8.192 0.768l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768zM661.12 258.56l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.664-6.4-0.64-8.064 2.176l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.536 6.4 0.64 8.064-2.176zM613.888 235.136l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.4 0.512-7.552 3.456L602.88 231.168c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.024 6.4-0.512 7.552-3.584zM556.544 225.152c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.512 3.2 1.536 6.144 4.736 6.784zM273.536 290.432c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96l21.12 21.12zM237.824 333.824c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536s-1.28 6.912 1.536 8.832l24.448 17.152zM183.04 370.176l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 7.04 3.072 8.448zM194.688 423.68l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.152 6.912 4.48 7.808l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808zM183.168 478.72l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.456 2.304 6.656 5.76 6.912l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.384-3.456-2.176-6.528-5.76-6.912zM181.504 535.04l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.456 6.144 6.912 5.76l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.328-6.016-6.912-5.76zM191.36 590.72l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.352 5.376 7.808 4.48l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.328-4.352-5.376-7.808-4.48zM207.232 644.224l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.2 5.248 4.608 8.448 3.072l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.408-3.2-5.248-4.48-8.448-3.072zM233.984 693.888l-24.448 17.152c-2.944 2.048-3.584 6.016-1.536 8.832 2.048 2.944 6.016 3.584 8.832 1.536l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536zM310.912 775.552L293.76 800c-2.048 2.944-1.28 6.912 1.536 8.832 2.944 2.048 6.912 1.28 8.832-1.536l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.816-2.048-6.912-1.408-8.832 1.536zM349.184 840.704c3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.536-3.2 0.128-7.04-3.072-8.448-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.408 3.2-0.128 6.912 3.072 8.448zM407.808 862.72c3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c0.896-3.456-1.152-6.912-4.48-7.808-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.328 1.152 6.912 4.48 7.808zM469.376 874.112c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.584 2.304 6.656 5.76 6.912zM522.496 839.168l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.456-6.144-6.912-5.76-3.456 0.256-6.016 3.328-5.76 6.912zM578.176 830.976l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928c-0.896-3.456-4.352-5.376-7.808-4.48-3.328 0.896-5.376 4.48-4.48 7.808zM631.68 813.312l12.672 27.136c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.248 3.072-8.448l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.48 5.248-3.072 8.448zM681.344 786.688l17.152 24.448c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 1.92-3.584 5.888-1.536 8.832zM725.504 751.744l21.12 21.12c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96zM763.008 709.76l24.448 17.152c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536-2.048 2.816-1.408 6.784 1.536 8.832zM792.576 661.888l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 6.912 3.072 8.448zM813.44 609.536l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.024 6.912 4.48 7.808zM824.832 554.368l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.256-3.456-2.304-6.656-5.76-6.912l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.584 2.304 6.656 5.76 6.912zM826.624 498.176l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.456-6.144-6.912-5.76l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.328 6.016 6.912 5.76zM818.432 442.368l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.456-4.352-5.376-7.808-4.48l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.48 5.376 7.808 4.48zM800.768 388.992l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.536-3.2-5.248-4.608-8.448-3.072l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.072 5.248 4.48 8.448 3.072zM774.144 339.328l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536L766.848 328.96c-2.944 2.048-3.584 6.016-1.536 8.832 1.92 2.816 5.888 3.584 8.832 1.536zM697.216 257.664l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.944-2.048-6.912-1.28-8.832 1.536l-17.152 24.448c-2.048 2.944-1.28 6.912 1.536 8.832 2.816 2.048 6.784 1.408 8.832-1.536zM658.944 192.512c-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.536 3.2-0.128 7.04 3.072 8.448 3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.408-3.2 0-7.04-3.072-8.448zM600.192 170.496c-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.456 1.152 6.912 4.48 7.808 3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c1.024-3.328-1.024-6.912-4.48-7.808zM534.912 201.6c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.456 2.304 6.528 5.76 6.912zM476.032 158.464c-3.456 0.256-6.144 3.456-5.76 6.912l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.328-6.016-6.912-5.76zM422.144 173.312c-0.896-3.456-4.352-5.376-7.808-4.48-3.456 0.896-5.376 4.352-4.48 7.808l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928zM376.448 219.776l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.608 5.248-3.072 8.448L364.8 225.28c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.376 3.2-8.576zM316.416 253.824c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 2.048-3.584 6.016-1.536 8.832l17.152 24.448z" fill="#FFFFFF" p-id="19071"></path></svg>'
function link(args) {
args = args.join(' ').split(',');
// 获取参数
let url = (args[0] || '').trim(),
title = (args[1] || '点击直达链接').trim(),
favicon = (args[2] ? `<img src="${args[2]}" class="no-lightbox">` : defaultIcon).trim(),
desc = (args[3] || '').trim()
return `<a href="${url}" ${url.includes('http')?'target="_blank"':''} title="${title}" referrerPolicy="no-referrer" class="link_card"><div class="link_icon">${favicon}</div><div class="link_content"><div class="link_title">${title}</div>${desc?`<div class="link_desc">${desc}</div>`:''}</div></a>`
}
hexo.extend.tag.register('link', link, { ends: false })创建
[blogRoot]/themes/butterfly/source/css/_tags/link.styl1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40.link_card
display: flex
margin: 10px 0
color: var(--font-color) !important
text-decoration: none !important
background: var(--reward-pop)
border-radius: 10px
padding: 12px
&:hover
background: #4976f5
color: white !important
.link_icon,.link_content
height: 4rem
.link_icon
img,svg
height: 4rem
width: 4rem
.link_content
margin-left: 1rem
width: calc(100% - 6rem)
overflow: hidden
line-height: 1.5
display: flex
flex-direction: column
justify-content: center
.link_title
font-weight: bold
font-size: 1.2rem
.link_title,.link_desc
word-break: break-all
overflow:hidden
text-overflow: ellipsis
&:not(:has(.link_desc)) .link_title
display:-webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:2
.link_desc
opacity: .6
.link_desc,&:has(.link_desc) .link_title
white-space: nowrap
使用参数
1 | <!-- 使用html是为了高亮代码，不必在意 --> |
| 参数 | 描述 | 默认值 |
|---|---|---|
| 链接 | 如果连接中包含http则新标签打开，否则本标签页打开 | 无 |
| 标题 | 网站的标题 | 点击直达链接 |
| 图标 | 网站favicon链接 | |
| 介绍 | 网站的description | 无 |
页脚透明
- 在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21#footer {
background: rgb(255 255 255 / 0%);
color: #000;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
backdrop-filter: saturate(100%) blur(5px)
}
#footer::before {
background: rgba(255,255,255,.15)
}
#footer #footer-wrap {
color: var(--font-color)
}
#footer #footer-wrap a {
color: var(--font-color)
}
/* 页脚透明 */
网站自动变灰
- 在自建的JS文件
[blogRoot]/source/js/icat.js里新增1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32if(PublicSacrificeDay()){
document.getElementsByTagName("html")[0].setAttribute("style","filter:gray !important;filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);");
}
function PublicSacrificeDay(){
var PSFarr=new Array("0707","0909","0918","1109","1213");
var currentdate = new Date();
var str = "";
var mm = currentdate.getMonth()+1;
if(currentdate.getMonth()>9){
str += mm;
}else{
str += "0" + mm;
}
if(currentdate.getDate()>9){
str += currentdate.getDate();
}else{
str += "0" + currentdate.getDate();
}
if(PSFarr.indexOf(str)>-1){
return 1;
}else{
return 0;
}
}
// 自动网站变灰
// 0707 - 七七事变
// 0909 - 毛主席忌辰
// 0918 - 九一八事变
// 1109 - 娣外公忌辰
// 1213 - 南京公祭日
个性定位欢迎语
进入 腾讯位置服务 应用管理界面
点击
创建应用，应用名称和类型随便填在新创建的应用中点击添加
key，产品选择WebServiceAPI，域名白名单填自己的域名或不填把得到的
key记下; 如果开启白名单记得把localhost也加上在
_config.butterfly.yml中的inject下的head引入文件1
2
3
4
5inject:
head:
- <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script>
bottom:
- ···创建
[blogRoot]/source/js/txmap.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244//get请求
$.ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/location/v1/ip',
data: {
key: '你获取的key',
output: 'jsonp',
},
dataType: 'jsonp',
success: function (res) {
ipLoacation = res;
}
})
function getDistance(e1, n1, e2, n2) {
const R = 6371
const { sin, cos, asin, PI, hypot } = Math
let getPoint = (e, n) => {
e *= PI / 180
n *= PI / 180
return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
}
let a = getPoint(e1, n1)
let b = getPoint(e2, n2)
let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
let r = asin(c / 2) * 2 * R
return Math.round(r);
}
function showWelcome() {
let dist = getDistance(31.24899, 121.48919, ipLoacation.result.location.lng, ipLoacation.result.location.lat); //这里换成自己的经纬度
let pos = ipLoacation.result.ad_info.nation;
let ip;
let posdesc;
//根据国家、省份、城市信息自定义欢迎语
switch (ipLoacation.result.ad_info.nation) {
case "日本":
posdesc = "よろしく，一起去看樱花吗";
break;
case "美国":
posdesc = "Let us live in peace!";
break;
case "英国":
posdesc = "想同你一起夜乘伦敦眼";
break;
case "俄罗斯":
posdesc = "干了这瓶伏特加！";
break;
case "法国":
posdesc = "C'est La Vie";
break;
case "德国":
posdesc = "Die Zeit verging im Fluge.";
break;
case "澳大利亚":
posdesc = "一起去大堡礁吧！";
break;
case "加拿大":
posdesc = "拾起一片枫叶赠予你";
break;
case "中国":
pos = ipLoacation.result.ad_info.province + " " + ipLoacation.result.ad_info.city + " " + ipLoacation.result.ad_info.district;
ip = ipLoacation.result.ip;
switch (ipLoacation.result.ad_info.province) {
case "北京市":
posdesc = "北——京——欢迎你~~~";
break;
case "天津市":
posdesc = "讲段相声吧";
break;
case "河北省":
posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
break;
case "山西省":
posdesc = "展开坐具长三尺，已占山河五百余";
break;
case "内蒙古自治区":
posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
break;
case "辽宁省":
posdesc = "我想吃烤鸡架！";
break;
case "吉林省":
posdesc = "状元阁就是东北烧烤之王";
break;
case "黑龙江省":
posdesc = "很喜欢哈尔滨大剧院";
break;
case "上海市":
posdesc = "众所周知，中国只有两个城市";
break;
case "江苏省":
switch (ipLoacation.result.ad_info.city) {
case "南京市":
posdesc = "这是我挺想去的城市啦";
break;
case "苏州市":
posdesc = "上有天堂，下有苏杭";
break;
default:
posdesc = "散装是必须要散装的";
break;
}
break;
case "浙江省":
posdesc = "东风渐绿西湖柳，雁已还人未南归";
break;
case "河南省":
switch (ipLoacation.result.ad_info.city) {
case "郑州市":
posdesc = "豫州之域，天地之中";
break;
case "南阳市":
posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
break;
case "驻马店市":
posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
break;
case "开封市":
posdesc = "刚正不阿包青天";
break;
case "洛阳市":
posdesc = "洛阳牡丹甲天下";
break;
default:
posdesc = "可否带我品尝河南烩面啦？";
break;
}
break;
case "安徽省":
posdesc = "蚌埠住了，芜湖起飞";
break;
case "福建省":
posdesc = "井邑白云间，岩城远带山";
break;
case "江西省":
posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
break;
case "山东省":
posdesc = "遥望齐州九点烟，一泓海水杯中泻";
break;
case "湖北省":
switch (ipLoacation.result.ad_info.city) {
case "黄冈市":
posdesc = "红安将军县！辈出将才！";
break;
default:
posdesc = "来碗热干面~";
break;
}
break;
case "湖南省":
posdesc = "74751，长沙斯塔克";
break;
case "广东省":
switch (ipLoacation.result.ad_info.city) {
case "广州市":
posdesc = "看小蛮腰，喝早茶了嘛~";
break;
case "深圳市":
posdesc = "今天你996了嘛~";
break;
case "阳江市":
posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
break;
default:
posdesc = "来两斤福建人~";
break;
}
break;
case "广西壮族自治区":
posdesc = "桂林山水甲天下";
break;
case "海南省":
posdesc = "朝观日出逐白浪，夕看云起收霞光";
break;
case "四川省":
posdesc = "康康川妹子";
break;
case "贵州省":
posdesc = "茅台，学生，再塞200";
break;
case "云南省":
posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
break;
case "西藏自治区":
posdesc = "躺在茫茫草原上，仰望蓝天";
break;
case "陕西省":
posdesc = "来份臊子面加馍";
break;
case "甘肃省":
posdesc = "羌笛何须怨杨柳，春风不度玉门关";
break;
case "青海省":
posdesc = "牛肉干和老酸奶都好好吃";
break;
case "宁夏回族自治区":
posdesc = "大漠孤烟直，长河落日圆";
break;
case "新疆维吾尔自治区":
posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
break;
case "台湾省":
posdesc = "我在这头，大陆在那头";
break;
case "香港特别行政区":
posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉";
break;
case "澳门特别行政区":
posdesc = "性感荷官，在线发牌";
break;
default:
posdesc = "带我去你的城市逛逛吧！";
break;
}
break;
default:
posdesc = "带我去你的国家逛逛吧";
break;
}
//根据本地时间切换欢迎语
let timeChange;
let date = new Date();
if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好，一日之计在于晨</span>";
else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好，记得午休喔~</span>";
else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好，饮茶先啦！</span>";
else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶♂️ 即将下班，记得按时吃饭~</span>";
else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好，夜生活嗨起来！</span>";
else timeChange = "夜深了，早点休息，少熬夜";
try {
//自定义文本和需要放的位置
document.getElementById("welcome-info").innerHTML =
`  ${timeChange} <br>欢迎来自 <b><span style="color: var(--icat-ip-color);font-size: var(--icat-gl-size)">${pos}</span></b> 的喵友，当前位置距博主约 <b><span style="color: var(--icat-ip-color)">${dist}</span></b> 公里！<br>  您IP地址为：<b><span>${ip}</span></b><br>  ${posdesc} <br><br>`;
} catch (err) {
// console.log("Pjax无法获取#welcome-info元素🙄🙄🙄")
}
}
window.onload = showWelcome;
// 如果使用了pjax在加上下面这行代码
document.addEventListener('pjax:complete', showWelcome);在
_config.butterfly.yml中的inject下的bottom引入txmap.js1
2
3
4
5inject:
head:
- ···
bottom:
- <script async data-pjax src="/js/txmap.js"></script> # 腾讯地图定位 - API修改
[blogRoot]/theme/butterfly/latout/includes/widget/card_announcement.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7if theme.aside.card_announcement.enable
.card-widget.card-announcement
+ #welcome-info
.item-headline
i.fas.fa-bullhorn.fa-shake
span= _p('aside.card_announcement')
.announcement_content!= theme.aside.card_announcement.content在自建的CSS文件
[blogRoot]/source/css/icat.css里新增1
2
3
4
5
6
7#welcome-info {
border-radius: 14px;
--icat-ip-color: #49B1F5;
--icat-gl-size: 16px!important;
}
/* 公告顶部欢迎信息 */
关于页美化
效果预览
关于本站
有肉有猫有生活.
创建数据
创建
[blogRoot]/source/about/index.md来生成页面 page1
2
3
4
5
6
7---
title: 关于本站
date: 2021-10-16 13:42:00
type: about
top_img: false
aside: false
---修改
[blogRoot]/themes/butterfly/layout/page.pug
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13case page.type
when 'essay'
include includes/page/essay.pug
when 'photo'
include includes/page/photo.pug
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
+ when 'about'
+ include includes/page/about.pug
when 'categories'
include includes/page/categories.pug创建
[blogroot]/themes/butterfly/layout/includes/page/about.pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421#about-page
.author-box
.author-img
img.no-lightbox(src='/media/avatar.jpg')
.image-dot
.author-content
.author-content-item.myInfoAndSayHello
.title1 Hey，很高兴认识你👋
.title2
| 我是
span.inline-word 亦封
.title1
| 是一名 自媒体iCat博主 &
span.inline-word 数控项目师
.aboutsiteTips.author-content-item
.author-content-item-tips 追求
h2
| 源于
br
| 热爱而去
span.inline-word 体验
.mask
span.first-tips 旅行
|
span 生活
|
span(data-up) 设计
|
span(data-show) 感受
.hello-about
.cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.shapes
.shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
.content
h1 MeuiCat
.author-content
.author-content-item.skills
.card-content
.author-content-item-tips 技能
span.author-content-item-title 极致创造
.skills-style-group
.tags-group-all
.tags-group-wrapper
each i in site.data.creativity
- const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0);
- const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1);
each item, index in i.creativity_list
if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
.tags-group-icon-pair
.tags-group-icon(style=`background: ${evenNum[index].color}`)
img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon)
.tags-group-icon(style=`background: ${oddNum[index].color}`)
img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon)
.skills-list
each i in site.data.creativity
each item, index in i.creativity_list
.skill-info
.skill-icon(style=`background: ${item.color}`)
img.no-lightbox(title=item.name, src=item.icon)
.skill-name
span=item.name
.etc ...
.author-content-item.careers
.card-content
.author-content-item-tips 生涯
span.author-content-item-title 無限進步
.careers-group
.careers-item
.circle(style='background:#357ef5')
.name EC/DC | 电商设计师
.careers-item
.circle(style='background:#937df7')
.name EC/TP | 运营规划师
.careers-item
.circle(style='background:#00d0e1')
.name UGC | 自媒体IP
.careers-item
.circle(style='background:#ff0000')
.name CNC/PE | 数控项目师
img.author-content-img.no-lightbox(alt='生涯', src='https://yife68.gitee.io/icat-pic-2023/blog/2.png')
.author-content
.about-statistic.author-content-item
.card-content
.author-content-item-tips 数据
span.author-content-item-title 访问统计
#statistic
.post-tips
| 统计信息来自
a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计
.banner-button-group
a.banner-button(onclick='pjax.loadUrl("/archives/")', data-pjax-state)
i.iconfont.icat-51la
|
span.banner-button-text 文章隧道
.author-content-item-group.column.mapAndInfo
.author-content-item.map.single
span.map-title
| 现在住在
b 上海 虹口
.author-content-item.selfInfo.single
div
span.selfInfo-title 生于
|
span.selfInfo-content(style='color:#43a6c6') 2002
div
span.selfInfo-title 星座
|
span.selfInfo-content(style='color:#c69043') 狮子座
div
span.selfInfo-title 现在职业
|
span.selfInfo-content(style='color:#b04fe6') 数控工程/项目师
.author-content
.author-content-item.personalities
.author-content-item-tips 性格
span.author-content-item-title 活动家
.title2(style='color:#56a178') ENFP-T
.post-tips
| 在
a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16Personalities
| 了解关于
a(target='_blank', rel='noopener external nofollow', href='https://www.16personalities.com/enfp-personality?utm_source=welcome-turbulent-campaigner&utm_medium=email&utm_campaign=results&utm_content=type-personality-0') 活动家
| 的更多信息
.image
img.no-lightbox(src='https://www.16personalities.com/static/images/personality-types/avatars/email/large/ENFP_male.png?v=1')
.author-content-item.myphoto
img.author-content-img.no-lightbox(alt='img', src='https://yife68.gitee.io/icat-pic-2023/blog/6.png')
.author-content
.author-content-item.maxim
.author-content-item-tips 座右铭
span.maxim-title
span(style='opacity:.6;margin-bottom:8px') 足够优秀
|
span 再大方拥有
.author-content-item.buff
.card-content
.author-content-item-tips 特长
span.buff-title
span(style='opacity:.6;margin-bottom:8px')
| 说走就走的
span.inline-word 追风狂魔
|
span
| 各项学习能力
span.inline-word MAX
.card-background-icon
i.fa-solid.fa-dice-d20
.author-content
.author-content-item.game-yuanshen
.card-content
.author-content-item-tips 爱好游戏
span.author-content-item-title Minecraft
.content-bottom
.tips.game-yuanshen-uid ID: Beam_Sealed
.author-content-item.comic-content
.card-content
.author-content-item-tips 爱好电影
span.author-content-item-title 动物世界
.content-bottom
.banner-button-group
a.banner-button(onclick='window.open("https://movie.douban.com/subject/26925317/")', data-pjax-state)
i.iconfont.icat-play
|
span.banner-button-text 豆瓣详情
.author-content
.author-content-item.like-technology
.card-content
.author-content-item-tips 关注偏好
span.author-content-item-title 数码科技
.content-bottom
.tips 手机、电脑软硬件
.author-content-item.like-music
.card-content
.author-content-item-tips 音乐偏好
span.author-content-item-title 电子乐、Beat
|
span.author-content-item-title 纯音乐、名谣
.content-bottom
.tips 跟 亦小封 一起欣赏更多音乐
.banner-button-group
a.banner-button(onclick='window.open("https://music.163.com/#/user/home?id=542585674")', data-pjax-state)
i.iconfont.icat-music
|
span.banner-button-text 更多推荐
.author-content
.create-site-post.author-content-item.single
.author-content-item-tips 心路历程
h1 关于本站
h3 首先，对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
strong 创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感；傲娇性随时放射；有位猫主子宠着
br
strong 也是想能够有一个让自己积累知识、积累兴趣的地方；是属于自己的温暖小窝；也是偌大的社会里的属于自己的内心避风港
br
strong 和他人分享，会让这些成为积累和沉淀。如果能够帮助到更多的人，帮助更多人解决问题，那一定是非常棒的事情
br
br
strong 与大多数垂直类的技术博客不同，这里的种类会非常的繁杂，有技能的教程干货、有生活上的吐槽和想法；所以一般我研究什么、发现了什么都会分享在这里
br
strong 这些就是创造 <b>MueiCat</b> 的本意，也是我分享生活的方式。有幸能和你相遇在这里，相信我们能共同留下一段美好记忆
br
br
h2 博客类型
strong 本站建立于 2021年10月16日
br
strong
emp
a(target="_blank" href="https://hexo.io/zh-cn/") Hexo
| 强力驱动 | Theme by
a(target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly/") Butterfly
br
strong 备案： <font color="red">粤ICP备2022035648号</font> | 萌备： <font color="red">萌ICP备20227060号</font>
br
strong 留言等信息回复请联系 个人微信(<b>y59851</b>)、TG，或者 邮箱留言
br
strong
emp
a(target="_blank" color="red" href="/Website-History/") 查看关于更多 iCat 发展历程
br
br
h2 更多主页平台
strong
ul
li 抖音号：y59851
li 微信公众号：爱吃肉的猫 (Meu-iCat）、卡布是只猫、小王爱吃糖
li Telegram:
emp
a(target="_blank" rel="noopener" href="https://t.me/yife68") 亦封
li GitHub:
emp
a(target="_blank" rel="noopener" href="https://github.com/yife68") 亦封
li Gitee:
emp
a(target="_blank" rel="noopener" href="https://gitee.com/yife68") 亦封
h3 如果遇到问题可以去上方频道私信我！
.author-content
.author-content-item.single.reward
.author-content-item-tips 致谢
span.author-content-item-title 赞赏名单
.author-content-item-description 非必要无需赞助！同时也感谢赞赏的喵友，让我感受到写博客这件事情能够给你们创造了价值
each i in site.data.reward
- let rawData = [...i.reward_list]
.reward-list-all
- let reward_list_amount = i.reward_list.sort((a,b)=>b.amount - a.amount)
each item, index in reward_list_amount
.reward-list-item
.reward-list-item-name=item.name
.reward-list-bottom-group
if item.amount >= 50
.reward-list-item-money(style='background:#ffc93e')=`¥${item.amount}`
else
.reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
.datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
.reward-list-updateDate
| 更新时间：
time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14)
.post-reward
#con
#TA-con(type='button', onclick='reward()')
#text-con
#linght
#TA 为TA充电
#tube-con
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
rect(y='186', width='236', height='24', fill='#e5e9ef')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
rect(y='186', width='236', height='24', fill='#f25d8e')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#orange-mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
rect(y='186', width='236', height='24', fill='#ffd52b')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
p#people
| <a href="https://afdian.net/a/yife68">爱发电</a>
b ：
| 小喵爪
script(src=url_for(theme.CDN.option.countup_js))
script(src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js")
script.
(() => {
function isInViewPortOfOne(el) {
if (!el) return;
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
const offsetTop = el.offsetTop;
const scrollTop = document.documentElement.scrollTop;
const top = offsetTop - scrollTop;
return top <= viewPortHeight;
}
fetch('https://v6-widget.51.la/v6/{掩码ID}/quote.js').then(res => res.text()).then((data) => {
let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)
num = num.map((el) => {
let val = el.replace(/(<\/span><span>)/g, '')
let str = val.replace(/(<\/span><\/p>)/g, '')
return str
})
let statisticEl = document.getElementById('statistic')
// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
let statistic = []
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return
if (i == 0 || i == num.length - 1) continue;
statisticEl.innerHTML += '<div><span>' + title[i] + '</span><span id='+ title[i] + '>' + num[i] + '</span></div>'
queueMicrotask(()=> {
statistic.push(new CountUp(title[i], 0, num[i], 0, 2, {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
}))
})
}
function statisticUP () {
let statisticElment = document.querySelector('.about-statistic.author-content-item');
if(isInViewPortOfOne(statisticElment)) {
for (let i = 0; i < num.length; i++) {
if (i == 0 || i == num.length - 1) continue;
statistic[i-1].start();
}
document.removeEventListener('scroll', throttleStatisticUP);
}
}
const selfInfoContentYear = new CountUp('selfInfo-content-year', 0, 2002, 0, 2, {
useEasing: true,
useGrouping: false,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
})
function scrollSelfInfoContentYear() {
let selfInfoContentYearElment = document.querySelector('.author-content-item.selfInfo.single');
if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) {
selfInfoContentYear.start()
document.removeEventListener('scroll', throttleScrollSelfInfoContentYear);
}
}
const throttleStatisticUP = btf.throttle(statisticUP, 200)
document.addEventListener('scroll', throttleStatisticUP, {passive: true})
const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200)
document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true})
});
var pursuitInterval = null;
pursuitInterval = setInterval(function () {
const show = document.querySelector('span[data-show]')
const next = show.nextElementSibling || document.querySelector('.first-tips')
const up = document.querySelector('span[data-up]')
if (up) {
up.removeAttribute('data-up')
}
show.removeAttribute('data-show')
show.setAttribute('data-up', '')
next.setAttribute('data-show', '')
}, 2000)
document.addEventListener('pjax:send', function(){
clearInterval(pursuitInterval);
});
var helloAboutEl = document.querySelector('.hello-about')
helloAboutEl.addEventListener("mousemove", evt => {
const mouseX = evt.offsetX;
const mouseY = evt.offsetY;
gsap.set(".cursor", {
x: mouseX,
y: mouseY,
})
gsap.to(".shape", {
x: mouseX,
y: mouseY,
stagger: -0.1
})
})
})()创建
[blogroot]/source/_data/reward.yml添加赞赏数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18- class_name: 赞赏
reward_list:
- name: 罐装旺仔
amount: 5
datatime: 2022-12-11
suffix: 小喵爪
- name: 魏安安
amount: 9.99
datatime: 2022-11-07
suffix: 喵粮
- name: 热心
amount: 6.66
datatime: 2021-10-29
suffix: 喵粮
- name: 指南针先生
amount: 10
datatime: 2021-11-09
suffix: 喵粮创建
[blogroot]/source/_data/creativity.yml添加创造力数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50- class_name: 开启创造力
creativity_list:
- name: Vue
color: "#b8f0ae"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633001374747b.png
- name: React
color: "#222"
icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
- name: Docker
color: "#57b6e6"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/63300647df7fa.png
- name: Photoshop
color: "#4082c3"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/63300647e1f10.png
- name: Node
color: "#333"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg
- name: Webpack
color: "#2e3a41"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/26/6330ff27e5c9b.png
- name: Pinia
color: "#fff"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg
- name: Python
color: "#fff"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/63300647dea51.png
- name: Vite
color: "#937df7"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg
- name: Flutter
color: "#4499e4"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633004063ff15.png
- name: Java
color: "#fff"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633005bf0fd1e.jpg
- name: CSS3
color: "#2c51db"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006cc55e07.png
- name: JS
color: "#f7cb4f"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006eee047b.png
- name: HTML
color: "#e9572b"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006f9ab27d.png
- name: Git
color: "#df5b40"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633006e37c7fd.webp
- name: Apifox
color: "#e65164"
icon: https://img02.anzhiy.cn/adminuploads/1/2022/09/25/633007087a4dc.webp
引入CSS
新建
[blogroot]/themes/butterfly/source/css/_custom/about/about.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308#gitcalendar {
margin: 0 auto;
border-radius: 24px;
background: var(--icat-unify-card-bg);
border: var(--icat-style-border-always);
box-shadow: var(--icat-shadow-border);
position: relative;
padding: 1rem 2rem;
overflow: hidden;
}
#page:has(#about-page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
#page:has(#about-page) .page-title {
display: none;
}
.page:has(#about-page) #footer-wrap {
opacity: 1;
overflow: visible;
height: auto !important;
min-height: 16px;
color: #666;
}
#web_bg ~ .page:has(#about-page) {
background: transparent;
}
#about-page .author-box {
position: relative;
margin-bottom: 46px;
}
#about-page .author-box .author-img {
margin: auto;
border-radius: 50%;
overflow: hidden;
width: 180px;
height: 180px;
}
#about-page .author-box .author-img img {
border-radius: 50%;
overflow: hidden;
width: 180px;
height: 180px;
border: 6px solid var(--icat-about-background);
}
#about-page .author-box .image-dot {
width: 45px;
height: 45px;
background: #6bdf8f;
position: absolute;
border-radius: 50%;
border: 6px solid var(--icat-about-background);
top: 50%;
left: 50%;
transform: translate(35px, 45px);
}
.author-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 1rem;
}
#about-page .myInfoAndSayHello {
display: flex;
flex-direction: column;
justify-content: center;
color: var(--icat-unify-white);
background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
background-size: 200%;
animation: gradient 15s ease infinite;
width: 59%;
}
.author-content-item {
width: 49%;
border-radius: 24px;
background: var(--icat-unify-card-bg);
border: var(--icat-style-border-always);
box-shadow: var(--icat-unify-shadow-border);
position: relative;
padding: 1rem 2rem;
overflow: hidden;
}
#about-page .myInfoAndSayHello .title1 {
opacity: 0.8;
line-height: 1.3;
}
#about-page .myInfoAndSayHello .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
margin: 0.5rem 0;
}
.inline-word {
word-break: keep-all;
white-space: nowrap;
}
#about-page .myInfoAndSayHello .title1 {
opacity: 0.8;
line-height: 1.3;
}
.author-content-item.aboutsiteTips {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
width: 39%;
}
.aboutsiteTips h2 {
margin-right: auto;
font-size: 36px;
font-family: Helvetica;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--font-color);
margin-top: 0;
}
.aboutsiteTips .mask {
height: 36px;
position: relative;
overflow: hidden;
margin-top: 4px;
}
.aboutsiteTips .mask span {
display: block;
box-sizing: border-box;
position: absolute;
top: 36px;
padding-bottom: var(--offset);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: no-repeat;
}
.aboutsiteTips .mask span[data-show] {
transform: translateY(-100%);
transition: 0.5s transform ease-in-out;
}
.aboutsiteTips .mask span[data-up] {
transform: translateY(-200%);
transition: 0.5s transform ease-in-out;
}
.aboutsiteTips .mask span:nth-child(1) {
background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1);
}
.aboutsiteTips .mask span:nth-child(2) {
background-image: linear-gradient(45deg, #18e198 50%, #0ec15d);
}
.aboutsiteTips .mask span:nth-child(3) {
background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);
}
.aboutsiteTips .mask span:nth-child(4) {
background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f);
}
@media screen and (max-width: 768px) {
.author-content-item.map {
margin-bottom: 0;
}
}
#about-page .about-statistic {
min-height: 380px;
width: 39%;
background: url(https://yife68.gitee.io/icat-pic-2023/blog/3.webp) no-repeat top;
background-size: cover;
color: var(--icat-unify-white);
overflow: hidden;
}
#about-page .about-statistic::after {
box-shadow: 0 -159px 173px 71px #0c1c2c inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.author-content-item .card-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
padding: 1rem 2rem;
}
.author-content-item .card-content .author-content-item-title {
margin-bottom: 0.5rem;
}
.author-content-item .author-content-item-title {
font-size: 36px;
font-weight: 700;
line-height: 1;
}
#statistic {
font-size: 16px;
border-radius: 15px;
width: 100%;
color: var(--icat-unify-white);
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 2rem;
}
#statistic div span:first-child {
opacity: 0.8;
font-size: 0.6rem;
}
#statistic div span:last-child {
font-weight: 700;
font-size: 34px;
line-height: 1;
white-space: nowrap;
}
#statistic div {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 50%;
margin-bottom: 0.5rem;
}
.post-tips {
color: var(--icat-unify-gray);
font-size: 14px;
position: absolute;
bottom: 1rem;
left: 2rem;
}
.post-tips a {
color: var(--icat-unify-gray) !important;
border: none !important;
}
.author-content-item .card-content .banner-button-group {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
height: 40px;
width: 124px;
border-radius: 20px;
justify-content: center;
background: var(--icat-unify-card-bg);
color: var(--font-color);
display: flex;
align-items: center;
z-index: 1;
transition: 0.3s;
cursor: pointer;
border-bottom: 0 !important;
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 8px;
font-size: 1rem;
}
#about-page .author-content-item .card-content .banner-button-group .banner-button i {
font-size: 1.15rem;
}
.author-content-item .card-content .banner-button-group .banner-button:hover {
background: var(--icat-unify-main);
color: var(--icat-unify-white);
border-radius: 20px !important;
}
.author-content-item.personalities {
position: relative;
width: 59%;
}
.author-content-item.personalities .image {
position: absolute;
right: 30px;
top: 10px;
width: 220px;
transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);
}
.author-content-item.personalities .image img {
display: block;
margin: 0 auto 20px;
max-width: 100%;
transition: filter 375ms ease-in 0.2s;
}
.author-content-item.personalities:hover .image {
transform: rotate(-10deg);
}
.author-content-item.myphoto {
height: 60%;
min-height: 240px;
position: relative;
overflow: hidden;
width: 39%;
display: flex;
align-items: center;
justify-content: center;
}
.author-content-item.myphoto img {
position: absolute;
min-width: 100%;
object-fit: cover;
transition: 0.6s;
animation: coverIn 2s ease-out forwards;
transition: transform 2s ease-out !important;
}
.author-content-item.myphoto:hover img {
transform: scale(1.1);
}
.author-content-item:hover .card-background-icon {
transform: rotate(20deg);
}
.author-content-item.personalities .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
}
.author-content-item.map {
background: url(https://yife68.gitee.io/icat-pic-2023/blog/4.png) no-repeat center;
min-height: 160px;
max-height: 400px;
position: relative;
overflow: hidden;
margin-bottom: 0.5rem;
height: 60%;
background-size: 100%;
transition: 1s ease-in-out;
}
[data-theme="dark"] .author-content-item.map {
background: url(https://yife68.gitee.io/icat-pic-2023/blog/5.png) no-repeat center;
background-size: 100%;
}
.author-content-item.single {
width: 100%;
}
.author-content-item.map .map-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: var(--icat-about-maskbg);
padding: 0.5rem 2rem;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: 1s ease-in-out;
font-size: 20px;
}
.author-content-item.map .map-title b {
color: var(--font-color);
}
.author-content-item.selfInfo {
display: flex;
min-height: 100px;
max-height: 400px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: -webkit-fill-available;
height: 40%;
}
.author-content-item.selfInfo div {
display: flex;
flex-direction: column;
margin: 0.5rem 2rem 0.5rem 0;
}
.author-content-item.selfInfo .selfInfo-title {
opacity: 0.8;
font-size: 0.6rem;
line-height: 1;
margin-bottom: 8px;
}
.author-content-item.selfInfo .selfInfo-content {
font-weight: 700;
font-size: 34px;
line-height: 1;
}
.author-content-item-group.column.mapAndInfo {
width: 59%;
}
.author-content-item.map:hover {
background-size: 120%;
transition: 4s ease-in-out;
background-position-x: 0;
background-position-y: 36%;
}
.author-content-item.map:hover .map-title {
bottom: -100%;
}
.author-content-item-group.column {
display: flex;
flex-direction: column;
width: 49%;
justify-content: space-between;
}
.post-tips a:hover {
color: var(--icat-unify-main) !important;
background: none !important;
}
.author-content-item.single.reward .reward-list-updateDate {
color: var(--icat-unify-gray);
font-size: 14px;
}
.author-content-item.single.reward .post-reward {
position: absolute;
margin-top: 0px;
width: auto;
text-align: none;
pointer-events: none;
right: 2rem;
top: 2rem;
}
.tip-button {
border: 0;
border-radius: 2.25rem;
cursor: pointer;
font-size: 20px;
font-weight: 600;
height: 2.6rem;
margin-bottom: -4rem;
outline: 0;
position: relative;
top: 0;
transform-origin: 0 100%;
transition: transform 50ms ease-in-out;
width: auto;
-webkit-tap-highlight-color: transparent;
}
.coin::before,
.coin__back,
.coin__back::after,
.coin__front,
.coin__front::after,
.coin__middle {
border-radius: 50%;
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 3;
}
.coin-wrapper {
background: 0 0;
bottom: 0;
height: 18rem;
left: 0;
opacity: 1;
overflow: hidden;
pointer-events: none;
position: absolute;
transform: none;
transform-origin: 50% 100%;
transition: opacity 0.2s linear 0.1s, transform 0.3s ease-out;
width: 100%;
}
.coin__front::after {
background: rgba(0, 0, 0, 0.2);
content: "";
opacity: var(--front-y-multiplier);
}
.coin__back::after {
background: rgba(0, 0, 0, 0.2);
content: "";
opacity: var(--back-y-multiplier);
}
.coin__middle {
background: #737c99;
transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier));
}
.coin::before {
background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent
calc(var(--shine-bg-multiplier) + 0), #e9f4ff calc(var(--shine-bg-multiplier) + 0), transparent calc(var(
--shine-bg-multiplier
) + 50%));
content: "";
opacity: var(--shine-opacity-multiplier);
transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier))
rotate(calc(var(--coin-rotation-multiplier) * 1deg));
z-index: 10;
}
.coin {
--front-y-multiplier: 0;
--back-y-multiplier: 0;
--coin-y-multiplier: 0;
--coin-x-multiplier: 0;
--coin-scale-multiplier: 0;
--coin-rotation-multiplier: 0;
--shine-opacity-multiplier: 0.4;
--shine-bg-multiplier: 50%;
bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);
height: 3.5rem;
margin-bottom: 3.05rem;
position: absolute;
right: calc(var(--coin-x-multiplier) * 34% + 16%);
transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(
--coin-rotation-multiplier
) * -1deg));
transition: opacity 0.1s linear 0.2s;
width: 3.5rem;
z-index: 3;
}
.coin__back {
background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent
35%);
background-color: #8590b3;
background-size: 100% 100%;
transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier));
}
.coin__front {
background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),
linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%),
linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(
to bottom,
#fcfaf9 44%,
transparent 44%,
transparent 65%,
#fcfaf9 65%,
#fcfaf9 71%,
#8590b3 71%
), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9
47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent
72%);
background-color: #8590b3;
background-size: 100% 100%;
transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier));
}
.tip-button__text {
color: #fff;
margin-right: 1.8rem;
opacity: 1;
position: relative;
transition: opacity 0.1s linear 0.5s;
z-index: 3;
}
.author-content .post-reward .reward-main {
bottom: 0;
top: 50px;
left: auto;
right: 0;
}
.author-content .post-reward .reward-main .reward-all:before {
top: -11px;
bottom: auto;
}
#about-page .post-reward .reward-item a:hover {
background: transparent !important;
}
#about-page .post-reward .reward-item a {
border-bottom: none !important;
}
#about-page .post-reward .reward-item a img {
margin-bottom: 0 !important;
}
#about-page .post-reward .reward-main .reward-all {
border-radius: 10px;
padding: 20px 10px !important;
}
.post-reward .reward-main .reward-all .reward-item {
padding: 0 8px !important;
}
.post-reward .reward-main .reward-all li.reward-item::before {
content: none !important;
}
.post-reward .reward-main .reward-all:after {
content: none !important;
}
.author-content-item.maxim {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
width: 39%;
}
.author-content-item .author-content-item-tips {
opacity: 0.8;
font-size: 0.6rem;
margin-bottom: 0.5rem;
}
.author-content-item.maxim .maxim-title {
display: flex;
flex-direction: column;
}
.author-content-item.buff {
height: 200px;
font-size: 36px;
font-weight: 700;
line-height: 1.1;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
color: var(--icat-unify-white);
background-size: 200%;
animation: gradient 15s ease infinite;
min-height: 200px;
height: fit-content;
width: 59%;
}
.author-content-item.buff .card-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.author-content-item.buff .buff-title {
display: flex;
flex-direction: column;
}
.card-background-icon {
font-size: 12rem;
opacity: 0.2;
position: absolute;
right: 0;
bottom: -40%;
transform: rotate(30deg);
transition: 2s ease-in-out;
}
.author-content-item.game-yuanshen {
background: url(https://yife68.gitee.io/icat-pic-2023/blog/7.webp) no-repeat top;
background-size: cover;
min-height: 300px;
overflow: hidden;
color: var(--icat-unify-white);
width: 59%;
}
.author-content-item .content-bottom {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.author-content-item .content-bottom .icon-group {
display: flex;
position: relative;
}
.author-content-item .content-bottom .icon-group i {
display: inline-block;
width: 143px;
height: 18px;
margin-right: 0.5rem;
}
.icon-pos-mid {
background: url(https://img02.anzhiy.cn/adminuploads/1/2022/09/25/632fb9cecfc8c.png);
}
.author-content-item.game-yuanshen::after {
box-shadow: 0 -69px 203px 11px #575d8b inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.author-content-item.comic-content {
width: 39%;
background: url(https://yife68.gitee.io/icat-pic-2023/blog/8.jpg) no-repeat top;
background-size: cover;
min-height: 300px;
overflow: hidden;
color: var(--icat-unify-white);
}
.author-content-item.comic-content::after {
box-shadow: 0 -48px 203px 11px #505050 inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.author-content-item.like-technology {
background: url(https://yife68.gitee.io/icat-pic-2023/blog/9.png) no-repeat;
background-size: cover;
min-height: 230px;
color: var(--icat-unify-white);
}
.author-content-item.like-music {
background: url(https://yife68.gitee.io/icat-pic-2023/blog/10.jpg) no-repeat top;
background-size: cover;
min-height: 400px;
color: var(--icat-unify-white);
overflow: hidden;
}
.author-content-item .card-content .banner-button-group {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}
.author-content-item.like-music::after {
box-shadow: 0 -69px 203px 11px #453e38 inset;
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media screen and (max-width: 768px) {
#gitcalendar {
display: none;
}
[data-theme="dark"] .author-content-item .card-content .banner-button-group .banner-button {
color: #000 !important;
display: contents;
}
.author-content-item .card-content .banner-button-group .banner-button:hover {
background: none !important;
}
.author-content-item.game-yuanshen .content-bottom {
padding-bottom: 10px;
}
.author-content-item.game-yuanshen .game-yuanshen-uid {
display: none;
}
.author-content {
margin-top: 0;
}
.author-content-item {
width: 100% !important;
margin-top: 1rem;
padding: 1rem;
}
.author-content-item.map {
margin-bottom: 0;
}
.author-content-item-group.column {
width: 100% !important;
}
.author-content-item.selfInfo {
height: 95%;
}
.author-content-item.personalities {
height: 170px;
}
.post-tips {
left: auto;
}
.author-content-item.personalities .image {
width: 90px;
}
.site-card-group > a {
width: 100% !important;
}
.post-reward {
display: none;
}
.reward-list-item {
width: 100% !important;
}
.layout > div:first-child:not(.recent-posts) {
/* border-radius: 0; */
padding: 0 1rem !important;
box-shadow: none !important;
}
.author-content-item .card-content .banner-button-group .banner-button-text {
display: none;
}
.author-content-item .card-content .banner-button-group {
right: 1rem;
bottom: 1rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
background: 0 0;
padding: 0;
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 0;
font-size: 1.5rem;
background: white;
border-radius: 50%;
padding: 6px;
margin-left: 80px;
}
.author-content-item .card-content .banner-button-group .banner-button:hover i {
background: var(--icat-about-background) !important;
color: var(--icat-essay-theme);
}
#selfInfo-content-year {
width: 90px;
}
}
@media screen and (min-width: 768px) and (max-width: 896px) {
.author-content-item.like-music .content-bottom .tips {
display: none;
}
}
/* 赞赏的css */
.reward-list-all {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 0.5rem;
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.reward-list-item {
padding: 1rem;
border-radius: 12px;
border: var(--icat-style-border-always);
width: calc((100% / 3) - 0.5rem);
margin: 0 0.25rem 0.5rem 0.25rem;
box-shadow: var(--icat-unify-shadow-border);
}
.reward-list-item .reward-list-item-name {
font-size: 1rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
}
.reward-list-item .reward-list-bottom-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.reward-list-item .reward-list-item-money {
padding: 4px;
background: var(--font-color);
color: var(--card-bg);
font-size: 12px;
line-height: 1;
border-radius: 4px;
margin-right: 4px;
white-space: nowrap;
}
.reward-list-item .reward-list-item-time {
font-size: 12px;
color: var(--icat-essay-secondtext);
white-space: nowrap;
}
/*充电按钮的全部CSS*/
.reward-main {
-webkit-animation: donate_effcet .3s .1s ease both;
-moz-animation: donate_effcet .3s .1s ease both;
-o-animation: donate_effcet .3s .1s ease both;
-ms-animation: donate_effcet .3s .1s ease both;
animation: donate_effcet .3s .1s ease both;
}
.post-reward {
position: relative;
margin-top: 80px;
width: 100%;
text-align: center;
pointer-events: none;
}
.post-reward>* {
pointer-events: auto;
}
.post-reward .reward-button {
display: inline-block;
padding: 4px 24px;
background: var(--btn-bg);
color: var(--btn-color);
cursor: pointer;
}
.post-reward:hover .reward-button {
background: var(--btn-hover-color);
}
.post-reward:hover .reward-button>.reward-main {
display: block;
}
.post-reward .reward-main {
position: absolute;
bottom: 40px;
left: -23%;
z-index: 100;
display: none;
padding: 0 0 15px;
}
.post-reward .reward-main .reward-all {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
margin: 0;
padding: 20px 10px;
border-radius: 4px;
background: var(--reward-pop);
}
.post-reward .reward-main .reward-all:before {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 20px;
content: '';
}
.post-reward .reward-main .reward-all:after {
position: absolute;
right: 0;
bottom: 2px;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 13px solid var(--reward-pop);
border-right: 13px solid transparent;
border-left: 13px solid transparent;
content: '';
}
.post-reward .reward-main .reward-all .reward-item {
display: inline-block;
padding: 0 8px;
list-style-type: none;
vertical-align: top;
}
.post-reward .reward-main .reward-all .reward-item img {
width: 130px;
height: 130px;
}
.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
width: 130px;
color: #858585;
}
.author-content-item.single.reward .reward-list-updateDate {
color: var(--icat-unify-gray);
font-size: 14px;
}
@media screen and (max-width:768px) {
#gitcalendar {
display: none;
}[ data-theme=dark] .author-content-item .card-content .banner-button-group .banner-button {
color: #000!important;
}
.author-content-item .card-content .banner-button-group .banner-button:hover {
background: 0 0!important;
}
#page:has(#about-page) .page-title {
display: none;
}
.author-content-item.game-yuanshen .content-bottom {
padding-bottom: 10px;
}
.author-content-item.game-yuanshen .game-yuanshen-uid {
display: none;
}
.author-content {
margin-top: 0;
}
.author-content-item {
margin-top: 1rem;
padding: 1rem;
width: 100%!important;
}
.author-content-item.map {
margin-bottom: 0;
}
.author-content-item-group.column {
width: 100%!important;
}
.author-content-item.selfInfo {
height: 95%;
}
.author-content-item.personalities {
height: 170px;
}
.post-tips {
left: auto;
}
.author-content-item.personalities .image {
width: 90px;
}
.site-card-group>a {
width: 100%!important;
}
.post-reward {
display: none;
}
.layout>div:first-child:not(.recent-posts) {
padding: 1rem 1rem!important;
box-shadow: none!important;
}
.author-content-item .card-content .banner-button-group .banner-button-text {
display: none;
}
.author-content-item .card-content .banner-button-group {
right: 1rem;
bottom: 1rem;
}
.author-content-item .card-content .banner-button-group .banner-button {
padding: 0;
background: 0 0;
}
.author-content-item .card-content .banner-button-group .banner-button i {
margin-right: 0;
margin-left: 80px;
padding: 6px;
border-radius: 50%;
background: #fff;
font-size: 1.15rem;
}
.author-content-item .card-content .banner-button-group .banner-button:hover i {
background: var(--icat-about-background)!important;
color: var(--icat-essay-theme);
}
#selfInfo-content-year {
width: 90px;
}
}
@media screen and (min-width:768px) and (max-width:896px) {
.author-content-item.like-music .content-bottom .tips {
display: none;
}
}
#console.reward-show,#console.show {
opacity: 1;
pointer-events: all;
}
#console.reward-show .console-mask,#console.show .console-mask {
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.console-card-group-reward {
display: none;
opacity: 0;
}
.reward-show .console-card-group-reward {
position: absolute;
display: block;
opacity: 1;
}
.console-card-group-reward .reward-all {
display: flex;
align-items: center;
justify-content: center;
}
.console-card-group-reward .reward-all .reward-item {
display: flex;
flex-direction: column;
align-items: center;
}
.console-card-group-reward .reward-all .reward-item img {
width: 230px;
height: 230px;
}
@media screen and (max-width:768px) {
.console-card-group-reward .reward-all .reward-item img {
width: 130px;
height: 130px;
}
}
.about-reward {
position: absolute;
top: 1rem;
right: 2rem;
}
@media screen and (max-width:768px) {
.reward .about-reward #con {
width: 170px;
}
.reward #tube-con {
display: none;
}
}
.reward #con {
position: relative;
width: 350px;
height: 85px;
border-radius: 4px;
}
.reward #TA-con {
position: absolute;
top: 50%;
left: 10%;
width: 157px;
height: 50px;
border-radius: 4px;
background-color: #f25d8e;
box-shadow: 0 4px 4px rgba(255,112,159,.3);
cursor: pointer;
transform: translateY(-50%);
}
.reward #text-con {
position: relative;
margin: 0 auto;
width: 100px;
height: 100%;
}
.reward #linght {
position: absolute;
top: 36%;
left: 4px;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
border-radius: 4px;
transform: rotate(-55deg);
}
.reward #linght::after {
position: absolute;
top: -13px;
left: -11px;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
border-radius: 4px;
content: "";
transform: rotate(180deg);
}
.reward #TA {
float: right;
color: #fff;
font-size: 15px;
line-height: 50px;
}
.reward #TA-con:hover {
background-color: #ff6b9a;
}
.reward #tube-con {
position: absolute;
top: 15px;
right: -5px;
width: 157px;
height: 55px;
}
.reward svg {
width: 100%;
height: 100%;
}
.reward #mask {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 0;
height: 100%;
transition: all .5s;
}
.reward #mask svg {
width: 157px;
height: 55px;
}
.reward #TA-con:hover+#tube-con>#mask {
width: 157px;
}
.reward #TA-con:hover+#tube-con>#orange-mask {
animation: move1 .5s linear .2s infinite;
}
.reward #TA-con:hover+#tube-con>#orange-mask svg {
animation: movetwo .5s linear .2s infinite;
}
.reward #orange-mask {
position: absolute;
top: 0;
left: -15px;
overflow: hidden;
width: 18px;
height: 100%;
}
.reward #orange-mask svg {
position: absolute;
top: 0;
left: 15px;
width: 157px;
height: 55px;
}
@keyframes move1 {
0% {
left: -15px;
}
100% {
left: 140px;
}
}
@keyframes movetwo {
0% {
left: 15px;
}
100% {
left: -140px;
}
}
.reward #people {
position: absolute;
top: 4px;
right: 10px;
color: #aaa;
font-size: 12px;
font-family: "雅黑";
}
.reward #people>b {
color: #777;
}新建
[blogroot]/themes/butterfly/source/css/_custom/about/careers.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39.author-content-item.careers {
min-height: 400px;
}
.author-content-item.careers .careers-group {
margin-top: 12px;
}
.author-content-item.careers .careers-item {
display: flex;
align-items: center;
}
.author-content-item.careers .careers-item .circle {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 16px;
}
.author-content-item.careers .careers-item .name {
color: var(--icat-essay-secondtext);
}
.author-content-item.careers .careers-item {
display: flex;
align-items: center;
}
.author-content-item.careers .careers-item .circle {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 16px;
}
.author-content-item.careers .careers-item .name {
color: var(--icat-essay-secondtext);
}
.author-content-item.careers img {
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
transition: 0.6s;
}新建
[blogroot]/themes/butterfly/source/css/_custom/about/genshinimpact.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122:root {
--loadingbar-background-color: #2c2b30;
--loadingbar-prospect-color: #ece5d8;
}
/* html.dark body {
background-color: #161d22;
} */
.loading-bar {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 62.5px;
transform: translate(-25%, -50%) scale(0.5);
transition: all 0.5s;
user-select: none;
overflow: hidden;
}
.loading-bar img {
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 var(--loadingbar-background-color));
}
.loading-bar::after {
content: "";
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color));
width: 500px;
height: 62.5px;
background: url("https://yuanshen.site/imgs/loading-bar.png") no-repeat left 100%;
background-size: 500px 62.5px;
background-position-x: 0;
}
.author-content-item.game-yuanshen:hover .loading-bar::after {
animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards;
}
@media screen and (max-width: 719px) {
.loading-bar .loading-bar {
display: none;
}
}
@media screen and (max-width: 719px) and (orientation: landscape) {
.loading-bar .loading-bar {
display: block !important;
transform: translate(-50%, -50%) scale(0.7) !important;
}
}
@supports not (filter: drop-shadow(0 0 0 #fff)) {
.loading-bar:before {
content: "Your browser does not support the animation";
}
}
@keyframes loading-bar {
0% {
width: 0;
background-size: 500px 62.5px;
}
16.6% {
}
33.2% {
}
49.8% {
}
66.4% {
}
83% {
width: 475px;
}
83.1% {
width: 475px;
}
83.2% {
width: 475px;
}
83.3% {
width: 475px;
}
83.4% {
width: 475px;
}
83.5% {
width: 475px;
}
83.6% {
width: 475px;
}
83.7% {
width: 475px;
}
83.8% {
width: 475px;
}
83.9% {
width: 475px;
}
84% {
width: 475px;
}
85% {
width: 475px;
}
86% {
width: 475px;
}
87% {
width: 475px;
}
100% {
width: 500px;
}
}新建
[blogroot]/themes/butterfly/source/css/_custom/about/hello-about.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103.hello-about {
margin: 20px auto;
border-radius: 24px;
background: var(--icat-unify-card-bg);
border: var(--icat-style-border-always);
box-shadow: var(--icat-unify-shadow-border);
position: relative;
overflow: hidden;
user-select: none;
}
.shapes {
position: relative;
height: 315px;
width: 100%;
background: #2128bd;
overflow: hidden;
}
.shape {
will-change: transform;
position: absolute;
border-radius: 50%;
}
.shape.shape-1 {
background: #005ffe;
width: 650px;
height: 650px;
margin: -325px 0 0 -325px;
}
.shape.shape-2 {
background: #ffe5e3;
width: 440px;
height: 440px;
margin: -220px 0 0 -220px;
}
.shape.shape-3 {
background: #ffcc57;
width: 270px;
height: 270px;
margin: -135px 0 0 -135px;
}
.hello-about .content {
top: 0;
left: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 315px;
width: 100%;
background: #fff;
mix-blend-mode: screen;
}
[data-theme="dark"] .hello-about .content {
background: transparent;
}
[data-theme="dark"] .hello-about h1 {
color: var(--icat-unify-white);
}
.hello-about h1 {
font-size: 200px;
color: #000;
margin: 0;
text-align: center;
font: inherit;
vertical-align: baseline;
line-height: 1;
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 419px) {
.hello-about h1 {
font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
}
}
.cursor {
position: absolute;
background: #2128bd;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
will-change: transform;
user-select: none;
pointer-events: none;
z-index: 3;
}
::selection {
color: #fff;
background: #2128bd;
}新建
[blogroot]/themes/butterfly/source/css/_custom/about/skills.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104.author-content-item.skills {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
width: 50%;
min-height: 450px;
}
.author-content-item.skills .skills-style-group {
position: relative;
}
.author-content-item.skills .tags-group-all {
display: flex;
transform: rotate(0);
transition: 0.3s;
}
.author-content-item.skills .tags-group-wrapper {
margin-top: 40px;
display: flex;
flex-wrap: nowrap;
animation: rowup 60s linear infinite;
}
.tags-group-icon-pair {
margin-left: 1rem;
}
.tags-group-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 66px;
font-weight: 700;
box-shadow: var(--icat-about-shadow-blackdeep);
width: 120px;
height: 120px;
border-radius: 30px;
}
.tags-group-icon img {
width: 60%;
margin: 0 auto !important;
}
.tags-group-icon-pair .tags-group-icon:nth-child(even) {
margin-top: 1rem;
transform: translate(-60px);
}
.author-content-item.skills .skills-list {
display: flex;
opacity: 0;
transition: 0.3s;
position: absolute;
width: 100%;
top: 0;
left: 0;
flex-wrap: wrap;
flex-direction: row;
margin-top: 10px;
}
.author-content-item.skills .skill-info {
display: flex;
align-items: center;
margin-right: 10px;
margin-top: 10px;
background: var(--icat-about-skill-background);
border-radius: 40px;
padding: 4px 12px 4px 5px;
border: var(--icat-about-style-border);
box-shadow: var(--icat-unify-shadow-border);
}
.author-content-item.skills .skill-icon {
width: 32px;
height: 32px;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.author-content-item.skills .skill-icon img {
width: 18px;
height: 18px;
margin: 0 auto !important;
}
.author-content-item.skills .etc {
margin-right: 10px;
margin-top: 15px;
font-weight: 900;
}
@keyframes rowup {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.author-content-item.skills:hover .skills-style-group .tags-group-all {
opacity: 0;
}
.author-content-item.skills:hover .skills-style-group .skills-list {
opacity: 1;
}新建
[blogroot]/themes/butterfly/source/css/_custom/about/site.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156.site-card-group .site-card .info {
margin-top: 0;
}
.site-card-group > a {
width: calc(100% / 4 - 0.5rem);
height: 150px;
position: relative;
display: block;
margin: 0.5rem 0.25rem;
float: left;
overflow: hidden;
padding: 0;
border-radius: 8px;
-webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-webkit-box-shadow: none;
box-shadow: none;
border: var(--icat-style-border) !important;
}
.site-card-group > a .wrapper {
position: relative;
}
.site-card-group > a .cover {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
.site-card-group > a .info,
.site-card-group > a .wrapper .cover {
position: absolute;
top: 0;
left: 0;
}
.site-card-group > a .info {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.7);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
-ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
}
.site-card-group > a .info img {
position: relative;
top: 45px;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
z-index: 1;
text-align: center;
pointer-events: none;
}
.site-card-group > a .info span {
padding: 20px 10% 60px 10%;
font-size: 16px;
width: 100%;
text-align: center;
-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
background-color: rgba(255, 255, 255, 0.7);
color: var(--font-color);
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.site-card-group .site-card:hover {
border-color: var(--icat-unify-main) !important;
background-color: var(--icat-unify-main) !important;
-webkit-box-shadow: var(--icat-unify-shadow-theme) !important;
box-shadow: var(--icat-unify-shadow-theme) !important;
}
.site-card-group > a:hover .wrapper img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.site-card-group > a .cover {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
-ms-transition: -ms-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
.site-card-group > a .wrapper img {
height: 150px;
pointer-events: none;
}
.site-card-group .site-card .wrapper img {
-webkit-transition: -webkit-transform 0.5s ease-out !important;
-moz-transition: -moz-transform 0.5s ease-out !important;
-o-transition: -o-transform 0.5s ease-out !important;
-ms-transition: -ms-transform 0.5s ease-out !important;
transition: transform 0.5s ease-out !important;
}
.site-card-group > a .wrapper .fadeIn {
-webkit-animation: coverIn 0.8s ease-out forwards;
-moz-animation: coverIn 0.8s ease-out forwards;
-o-animation: coverIn 0.8s ease-out forwards;
-ms-animation: coverIn 0.8s ease-out forwards;
animation: coverIn 0.8s ease-out forwards;
}
.site-card-group > a:hover .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}修改
[blogroot]/themes/butterfly/source/css/index.styl
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22if hexo-config('css_prefix')
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
+@import '_custom/**/*.css'
// search
if hexo-config('algolia_search.enable')
@import '_search/index'
@import '_search/algolia'
if hexo-config('local_search') && hexo-config('local_search.enable')
@import '_search/index'
@import '_search/local-search'如果开启了 51la统计 就需要在
_config.butterfly.yml中的inject下的head引入文件1
2
3
4
5
6
7
8inject:
head:
- <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
- <script> LA.init({id:"# 自己的id",ck:"# 自己的ck"})</script> # 51统计 - id & ck
- <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
- <script>new LingQue.Monitor().init({id:"# 自己的id",sendSuspicious:true});</script> # 灵雀监控 - id
bottom:
- ···其中
你的ID为上方about.pug提到的{掩码ID}
而你的CK可以在站点配置-参数设置-统计代码-手动安装（通用）中找到
引入JS
创建
[Blogroot]/source/js/reward.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48function reward(){
Swal.fire({
title: '<strong>您正在为 <u>MeuiCat</u> 充电</strong>',
html: '<b>请选择您的付款方式</b>',
icon: 'info',
showCancelButton: true,
confirmButtonText:
'<i class="iconfont icat-alipay"></i> 支付宝',
cancelButtonText:
'<i class="iconfont icat-weixin"></i> 微信支付',
confirmButtonColor: '#1677FF',
cancelButtonColor: '#2AAE67',
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: '感谢您',
html: '请打开支付宝 <b>[扫一扫]</b> 以充电',
imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/alipay.jpg',
imageWidth: 175,
imageHeight: 175,
imageAlt: 'Custom image'
}).then((result) => {
Swal.fire(
'充电成功',
'感谢您的支持',
'success'
)
})
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
Swal.fire({
title: '感谢您',
html: '请打开微信 <b>[扫一扫]</b> 以充电',
imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/wechat.jpg',
imageWidth: 175,
imageHeight: 175,
imageAlt: 'Custom image'
}).then((result) => {
Swal.fire(
'充电成功',
'感谢您的支持',
'success'
)
})
}
})
}在
_config.butterfly.yml中的inject下的head引入reward.js1
2
3
4
5
6inject:
head:
- <script type="text/javascript" src ="/js/reward.js" ></script> # 关于页面 - 打赏充电JS
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.6.16/dist/sweetalert2.all.min.js"></script> # 关于页面JS
bottom:
- ···创建
[Blogroot]/source/js/countup.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209var CountUp = function (target, startVal, endVal, decimals, duration, options) {
var self = this;
self.version = function () {
return "1.9.2";
};
self.options = {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
easingFn: easeOutExpo,
formattingFn: formatNumber,
prefix: "",
suffix: "",
numerals: [],
};
if (options && typeof options === "object") {
for (var key in self.options) {
if (options.hasOwnProperty(key) && options[key] !== null) {
self.options[key] = options[key];
}
}
}
if (self.options.separator === "") {
self.options.useGrouping = false;
} else {
self.options.separator = "" + self.options.separator;
}
var lastTime = 0;
var vendors = ["webkit", "moz", "ms", "o"];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
window.cancelAnimationFrame =
window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
function formatNumber(num) {
num = num.toFixed(self.decimals);
num += "";
var x, x1, x2, x3, i, l;
x = num.split(".");
x1 = x[0];
x2 = x.length > 1 ? self.options.decimal + x[1] : "";
if (self.options.useGrouping) {
x3 = "";
for (i = 0, l = x1.length; i < l; ++i) {
if (i !== 0 && i % 3 === 0) {
x3 = self.options.separator + x3;
}
x3 = x1[l - i - 1] + x3;
}
x1 = x3;
}
if (self.options.numerals.length) {
x1 = x1.replace(/[0-9]/g, function (w) {
return self.options.numerals[+w];
});
x2 = x2.replace(/[0-9]/g, function (w) {
return self.options.numerals[+w];
});
}
return self.options.prefix + x1 + x2 + self.options.suffix;
}
function easeOutExpo(t, b, c, d) {
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
}
function ensureNumber(n) {
return typeof n === "number" && !isNaN(n);
}
self.initialize = function () {
if (self.initialized) {
return true;
}
self.error = "";
self.d = typeof target === "string" ? document.getElementById(target) : target;
if (!self.d) {
self.error = "[CountUp] target is null or undefined";
return false;
}
self.startVal = Number(startVal);
self.endVal = Number(endVal);
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
self.decimals = Math.max(0, decimals || 0);
self.dec = Math.pow(10, self.decimals);
self.duration = Number(duration) * 1000 || 2000;
self.countDown = self.startVal > self.endVal;
self.frameVal = self.startVal;
self.initialized = true;
return true;
} else {
self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
return false;
}
};
self.printValue = function (value) {
var result = self.options.formattingFn(value);
if (self.d.tagName === "INPUT") {
this.d.value = result;
} else {
if (self.d.tagName === "text" || self.d.tagName === "tspan") {
this.d.textContent = result;
} else {
this.d.innerHTML = result;
}
}
};
self.count = function (timestamp) {
if (!self.startTime) {
self.startTime = timestamp;
}
self.timestamp = timestamp;
var progress = timestamp - self.startTime;
self.remaining = self.duration - progress;
if (self.options.useEasing) {
if (self.countDown) {
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
} else {
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
}
} else {
if (self.countDown) {
self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration);
} else {
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
}
}
if (self.countDown) {
self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal;
} else {
self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal;
}
self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
self.printValue(self.frameVal);
if (progress < self.duration) {
self.rAF = requestAnimationFrame(self.count);
} else {
if (self.callback) {
self.callback();
}
}
};
self.start = function (callback) {
if (!self.initialize()) {
return;
}
self.callback = callback;
self.rAF = requestAnimationFrame(self.count);
};
self.pauseResume = function () {
if (!self.paused) {
self.paused = true;
cancelAnimationFrame(self.rAF);
} else {
self.paused = false;
delete self.startTime;
self.duration = self.remaining;
self.startVal = self.frameVal;
requestAnimationFrame(self.count);
}
};
self.reset = function () {
self.paused = false;
delete self.startTime;
self.initialized = false;
if (self.initialize()) {
cancelAnimationFrame(self.rAF);
self.printValue(self.startVal);
}
};
self.update = function (newEndVal) {
if (!self.initialize()) {
return;
}
newEndVal = Number(newEndVal);
if (!ensureNumber(newEndVal)) {
self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
return;
}
self.error = "";
if (newEndVal === self.frameVal) {
return;
}
cancelAnimationFrame(self.rAF);
self.paused = false;
delete self.startTime;
self.startVal = self.frameVal;
self.endVal = newEndVal;
self.countDown = self.startVal > self.endVal;
self.rAF = requestAnimationFrame(self.count);
};
if (self.initialize()) {
self.printValue(self.startVal);
}
};在
_config.butterfly.yml中的CDN下的option引入countup.js
（ + 号直接删除 即是正常缩进）1
2
3
4
5
6
7CDN:
option:
# 可以在这里更换部分文件,会覆盖原有的配置
# main_css:
···
# busuanzi:
+ countup_js: /js/countup.js
安装sweetalert2
- 在
[blogroot]执行该命令安装插件1
$ npm install sweetalert2 --save
关于about内容
第4行中的/media/avatar.jpg为页面最上方头像第84行中的https://yife68.gitee.io/icat-pic-2023/blog/2.png为生涯板块的图像第198行至第244行为使用Plaintext语法撰写的心路历程，需自行修改第322行中的{掩码ID}由访问统计板块中 51la统计 提供
（需要在站点配置-参数设置-数据挂件中开启数据挂件）
此文章版权归 MeuiCat 所有，如有转载，请註明来自原作者！
