最近成功的安利我的一个朋友霖雫雫玩上了博客,在主题方面,他选择了butterfly。我目前这个糖羽仙深度定制nexmoe主题用了也有1年多的时间了,打算趁此机会也折腾一下新的主题。在这里记录一下折腾新主题遇到的一些需要注意的点。

Hexo方面

我自己是使用文章资源文件夹来管理blog中需要插入的图片的,在折腾新主题的时候忘了开这个功能……然后在我把主题差不多弄好之后,预览了一下发现图片加载不出来才注意到这个问题。于是我去Hexo本体的config文件里把这个功能打开了,结果不知道为什么就报错了。于是乎我就用hexo init blog2生成了一个新的Hexo文件夹,在把主题文件拷贝进去之前先开启了这个功能,主题文件拷贝进去之后预览,图片显示正常,问题解决。

通过将config.yml文件中的post_asset_folder选项设为true来打开。

正确的引用图片方式是使用下列的标签插件而不是 markdown :
{% asset_img example.jpg This is an example image %}

通过按键操作解锁隐藏内容的代码相关

按键跳转其他网站代码本体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
// 用于跟踪用户键入的按键序列
var konamiCode = [];
// 预定义的 Konami Code 序列
var correctCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

// 添加键盘事件侦听器
document.addEventListener('keydown', function(event) {
konamiCode.push(event.key);
konamiCode = konamiCode.slice(-correctCode.length); // 保持序列的长度与 Konami Code 相同

// 检查用户输入是否与 Konami Code 相匹配
if (JSON.stringify(konamiCode) === JSON.stringify(correctCode)) {
// 触发跳转到其他网站的操作
window.location.href = 'https://example.site'; // 替换为你想要跳转的网站链接
}
});
</script>

隐藏内容代码本体

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
<style>
#hidden-content {
display: none; /* 默认情况下隐藏内容 */
}
</style>

<script>
const konamiCode = [
'ArrowUp',
'ArrowUp',
'ArrowDown',
'ArrowDown',
'ArrowLeft',
'ArrowRight',
'ArrowLeft',
'ArrowRight',
'b',
'a'
];

let konamiCodeIndex = 0;

document.addEventListener('keydown', (event) => {
if (event.key === konamiCode[konamiCodeIndex])
{
konamiCodeIndex++;
if (konamiCodeIndex === konamiCode.length)
{
// 显示隐藏内容
const hiddenContent = document.getElementById('hidden-content');
hiddenContent.style.display = 'block';
}
}
else
{
konamiCodeIndex = 0; // 重置索引
}
});
</script>

<div id="hidden-content">
<!-- 需要隐藏的内容放在这里 -->
<p>这里是隐藏内容</p>
<blockquote>
<p>也可以将隐藏内容放在引用框里</p>
<p>直接按照html格式去写即可</p>
</blockquote>
</div>

直接将这段写在.md里就可以,下面是示例。

这下面有隐藏内容

这里是隐藏内容

也可以将隐藏内容放在引用框里

直接按照html格式去写即可

这上面有隐藏内容

隐藏图片时出现的问题

在使用nexmoe的时候,通过查看网页源码发现,插入网络图片的html语言如下

1
<p><img data-fancybox="gallery" data-sizes="auto" data-src="https://example.com/1.png" alt="avatar" class="lazyload"></p>

插入本地图片则为(在你开启了文章开头所说的文章资源文件夹时)

1
<img src="/2022/05/19/test/1.png" class="" title="This is an example image">

那么实际隐藏图片的时候只需把这些直接在div块中即可。

在nexmoe上测试正常,后来我在butterfly的主题中测试的时候也这么做了,发现显示不出来。

我稍微思考了一下问题出现在哪,抱着试试的心态看了一眼butterfly正常插入图片的html源码,果不其然,问题在此。

butterfly插入网络图片

1
<p><img src="https://example.com/1.png" alt="avatar"></p>

本地图片

1
<img src="/2022/05/19/test/1.png" class="" title="This is an example image">

在.md里同样是使用![avatar](https://example.com/1.png)插入网图,而实际生成的html确实不一样的,在不同主题中想使用html隐藏图片需要注意此点。

而插入本地图片则是一样,且对于本地图片还可以写成这样

1
<p><img src="/img/bg.png"></p>

Butterfly设置透明样式,并且引入l2d

Butterfly的config内容

1
2
3
4
5
6
7
8
inject:
head:
- <link rel="stylesheet" href=" /css/transpancy.css">
#- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
# - <link rel="stylesheet" href="/xxx.css">
bottom:
- <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
# - <script src="xxxx"></script>

透明化

如上设置head部分,引入一个css,这个transpancy.css具体内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.layout_post>#post 
{
background:rgba(255,255,255,.5);
}
#aside_content .card-widget,
#recent-posts>recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post
{
background:rgba(255,255,255,.5);
}
:root {
--card-bg: rgba(255,255,255,.5);
}

放在对应位置即可。其中,三个.5的地方可以设置透明度大小

l2d

开源地址在这Live2D Widget

一些因为自己脑瘫遇到的问题…

主题换色

其原本是全被注释掉的

1
2
3
4
5
6
7
# theme_color:
# enable: true
# main: "#49B1F5"
# paginator: "#00c4b6"
# button_hover: "#FF7242"
...
......

注意取消注释的时候…记得# theme_color:前面的#还有一个空格都要删掉…

主页副标题

原本设置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: false
# Typewriter Effect (打字效果)
effect: true
# Customize typed.js (配置typed.js)
# https://github.com/mattboldt/typed.js/#customization
typed_option:
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/
# source: 2 調用一句網(簡體) https://yijuzhan.com/
# source: 3 調用今日詩詞(簡體) https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:

书写副标题正确格式为

1
2
sub: 
- 这是副标题

而关于这里这个设置

1
2
3
4
5
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family:

这字体设置是个啥格式不知道,官方文档还没看完,可能有写。

但是我的问题是,这2个地方的标题如果能分开设置就好了,之后可能会稍微研究一下。