记录一下今天折腾博客遇到的各种问题和解决方法~
1. 摸鱼游戏页面问题
问题描述
想在博客添加一个摸鱼游戏页面，尝试了多种方案都不理想：
- Chrome 小恐龙游戏自己写的版本无法运行
- 嵌入外部网站有广告
- 敲木鱼功能也无法正常工作
解决方法
最后决定直接删除游戏功能
2. 隐藏文字功能
问题描述
想在文章中添加隐藏内容，只有特定操作才能看到。最初用白色文字，但在深色模式下会显示白色块。
解决方法
使用透明度代替白色，适配深浅色模式：
1
2
3
4
5
6
7
8
9
10
11
|
<span style="color: transparent; user-select: text;">隐藏内容</span>
<span
style="color: rgba(0,0,0,0.01); transition: all 0.3s; user-select: none;"
onmouseover="this.style.color='inherit'"
onmouseout="this.style.color='rgba(0,0,0,0.01)'"
>
悬停显示
</span>
|
或者在文章开头定义样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <style>
.hidden-text {
color: transparent;
user-select: text;
}
.hidden-text::selection {
background: #b3d4fc;
color: #000;
}
.hidden-hover {
color: rgba(0, 0, 0, 0.01);
transition: all 0.3s;
user-select: none;
}
.hidden-hover:hover {
color: inherit;
opacity: 1;
}
</style>
<span class="hidden-text">选中显示</span>
<span class="hidden-hover">悬停显示</span>
|
3. 首页摘要显示问题
问题描述
首页每篇文章显示的内容太多，想只显示一句话。
解决方法
方法1：修改全局摘要长度
在 _config.redefine.yml 中修改：
方法2：使用 <!-- more --> 标签（推荐）
在文章中想显示的内容后面加上：
1
2
3
4
5
6
7
8
9
| ---
title: 文章标题
---
这是首页显示的一句话。
<!-- more -->
这是详细内容，只有点进去才能看到。
|
4. CSS 样式不生效问题
问题描述
创建了 source/_data/styles.styl 文件定义样式，但在文章中使用 class 时不生效。
解决方法
直接在文章内部定义样式更可靠：
1
2
3
4
5
6
7
8
9
10
11
| ---
title: 文章标题
---
<style>
.my-style {
color: red;
}
</style>
<span class="my-style">红色文字</span>
|
总结
今天主要学会了：
- 使用透明度隐藏文字，适配深浅色模式
- 用
<!-- more --> 控制首页摘要
- 在文章内部定义样式更可靠
- 有时候删除比修复更简单
参考资料
Markdown 教程速查表
颜色选择器
* 本文由人工智能辅助生成
