让你的Hugo博客支持萌百式的黑幕

paw

2025/05/02

Categories: blog Tags: css muhehehe

非常喜欢某明清时期不知名文学评论家的一句话:“paw有可能很可爱 ,但是paw很可爱有点不可能

——【清】甘雨

TL;DR

首先新建static/css/muheheh.css,并且内容为:

 1.muhehehe,
 2.muhehehe a,
 3a .muhehehe,
 4.muhehehe a.new {
 5    background-color: #252525;
 6    color: #252525;
 7    text-shadow: none;
 8}
 9.muhehehe:hover,
10.muhehehe:active,
11.muhehehe:hover .muhehehe,
12.muhehehe:active .muhehehe {
13    color: white !important;
14}
15.muhehehe:hover a,
16a:hover .muhehehe,
17.muhehehe:active a,
18a:active .muhehehe {
19    color: lightblue !important;
20}
21.muhehehe:hover .new,
22.muhehehe .new:hover,
23.new:hover .muhehehe,
24.muhehehe:active .new,
25.muhehehe .new:active,
26.new:active .muhehehe {
27    color: #BA0000 !important;
28}

然后在你的主题引入的外部header中添加上

1<link rel="stylesheet" href="/css/muhehehe.css">

作为范例,paw的博客主题所引入的的外部header为layouts/partials/head_custom.html
最后,我们为了少些几行代码再新建一个shortcode,文件地址为layouts/shortcodes/muhehehe.html,内容为

1<span class="muhehehe" title="{{ default " qwq" (.Get "title" ) }}">{{ .Get "text" }}</span>

这样就完成啦,接下来就可以在你的.md文章里使用

1{{< muhehehe text="你想说的话" title="鼠标放上去时会显示的内容,默认为qwq" >}}

来实现萌娘百科一样的黑幕效果啦。
效果:你想说的话

QA环节之:为什么这个项目要叫做"muhehehe"呢

A:因为muhehehe很像是可爱小猫的奸奇笑声,背后隐藏着不可告人的秘密。尽管可爱小猫正在奸笑,但是也没人能拒他;就像没人能拒绝你一样。

>> Home