抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

一个 ToDo 清单。

和 blog 相关的 ToDo,但不包含写作计划。

ToDo

删除线 划掉的是 计划把我给嘎了,是计划被取消,没有完成。

只有打勾✔的才是完成的。

博客魔改时间线

2024-10-3

update typing-hitokoto.js

2024-08-29

修改隐藏文本的颜色

2024-08-28

更新 typing-hitokoto.js 同步输出到控制台,不打算更新文章了。

typing-hitokoto.js

2024-08-28

评论区的初音弹吉他,哈哈。

之前在 obaby 看到她评论区的那个舞动的精灵就一直想弄,今天总算加上了。

2024-08-26

调整一下JS文件的引用位置

2024-08-26

文章卡片 3D 悬浮效果

文章卡片 3D 悬浮效果,参考了 Bensz《Docker系列 WordPress系列 特效》感谢他的分享。

查看代码
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
// 设备判断
function shebeipanduan() {
var md = new MobileDetect(window.navigator.userAgent);
if (!md.phone()) {
return true
}
else {
return false
}
}


function my3dcard(myseletor){
VanillaTilt.init(document.querySelectorAll(myseletor),{
reverse:false, // 是否反转倾斜方向
max:2, // 最大的倾斜角度(度)
startX:0, // X轴上的起始倾斜,单位为度。
startY:0, // Y轴上的起始倾斜,单位为度。
perspective:1000, // 转换角度,越低倾斜越极端
scale:1.02, // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
speed:300, // 进入/退出 过渡的速度
transition:true, // 是否在进入/退出的时候设置过渡效果
axis:"y", // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
reset:true, // 设置在退出时清除倾斜效果
easing:"cubic-bezier(.03,.98,.52,.99)", // 设置进入退出时过渡的贝塞尔曲线
glare:false,// 设置是否拥有炫光效果,即透明度渐变效果
"max-glare":0.7, // 设置最大的透明效果,1=100%,0.5=50%
"glare-prerender":false, // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
"mouse-event-element":null, // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
"full-page-listening":false, // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
gyroscope:false, // 是否开启陀螺仪的方向检测
gyroscopeMinAngleX: 0, //陀螺仪最小角度X
gyroscopeMaxAngleX: 0, //陀螺仪最大角度X
gyroscopeMinAngleY: 0, //陀螺仪最小角度
gyroscopeMaxAngleY: 0, //陀螺仪最大角度
gyroscopeSamples: 10 //陀螺仪样品
});
};

// 加载设备判断 JS 脚本
volantis.js("https://assets.buasis.eu.org/js/mobile-detect.min.js").then(()=>{
// 加载 3D JS 脚本成功
volantis.js("https://assets.buasis.eu.org/js/vanilla3D/vanilla-tilt.min.js")
.then(function() {
console.log("加载 3D JS 脚本成功")
function my3dcardgo(){
if (shebeipanduan()){
my3dcard("div.post-wrapper"); // 文章列表
my3dcard("section.widget"); // 侧边栏
// my3dcard("#post"); // 文章
// my3dcard("#comments"); //评论
// my3dcard("#friends");
// my3dcard("#docs");
// my3dcard("#page");

};
};
my3dcardgo();
volantis.pjax.push(my3dcardgo,"my3dcardgo") // Pjax 重载
})
.catch(function(error) {
console.error(error)
});
})

2024-08-26

更新了 css

时间线、友链卡片鼠标悬停后出现阴影,呈现浮动效果

查看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 时间线、友链卡片鼠标悬停后出现阴影,呈现浮动效果

div.timeline div.timenode div.body
transition transform 0.3s ease, box-shadow 0.3s ease

div.timeline div.timenode div.body:hover
transform translateY(-2px) /* 浮动效果 */
box-shadow 0 10px 20px rgba(0, 0, 0, 0.2) /* 阴影效果 */

a.friend-card
transition transform 0.3s ease, box-shadow 0.3s ease !important
a.friend-card:hover
transform translateY(-2px) /* 浮动效果 */ !important
box-shadow 0 10px 20px rgba(0, 0, 0, 0.2) /* 阴影效果 */ !important

2024-08-26

更新了 typing-hitokoto.js,就是文章《Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto》的那段 JavaScript,改了一下它的网络错误时的逻辑代码。

更新一下文章《Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto》知乎、csdn上的就懒得更新了。

typing-hitokoto.js

2024-08-25

彻底放弃 Service Worker

Service Worker 就是个坑,不知怎么总共 10M 的页面刷新几次就缓存冲破 100M,在多加载几页,冲破 1G 是肯定。

彻底放弃 Service Worker

2024-08-25

放弃迁移评论系统

2024-08-24

完成 “侧边栏 Umami 统计卡片的 JavaScript 适配 Pjax

实际上无需 Pjax 重载,把那端代码去掉即可

2024-08-24

彻底放弃了 hexo-offline 插件,决定自己写一个。

PWABuilder 生成了一个 Service Worker,顺便生成 manifest.json 弄了个 PWA。这个 Service Worker 只能创建页面副本,在离线时加载缓存页面,没啥用,还会占用超多的储存。但现在已经放到博客上了。

跟进一步的,我自己写了一个 Service Worker,但有很多 bug,目前在不断调试中,已经放到分支上了。