67 lines
2.1 KiB
Markdown
67 lines
2.1 KiB
Markdown
+++
|
||
date = '2025-05-02T14:42:07+08:00'
|
||
draft = false
|
||
author = "paw"
|
||
title = '让你的Hugo博客支持萌百式的黑幕'
|
||
categories = ["blog"]
|
||
tags = ["css","muhehehe"]
|
||
+++
|
||
|
||
>非常喜欢某明清时期知名文学评论家的一句话:"paw有可能很可爱
|
||
>{{< muhehehe text="，但是paw很可爱有点不可能" title="出自《明朝-提瓦剌史》" >}}"
|
||
><div style="text-align: right;">
|
||
>——【清】甘雨
|
||
></div>
|
||
|
||
TL;DR
|
||
==============================
|
||
首先新建`static/css/muheheh.css`，并且内容为：
|
||
~~~css
|
||
.muhehehe,
|
||
.muhehehe a,
|
||
a .muhehehe,
|
||
.muhehehe a.new {
|
||
background-color: #252525;
|
||
color: #252525;
|
||
text-shadow: none;
|
||
}
|
||
.muhehehe:hover,
|
||
.muhehehe:active,
|
||
.muhehehe:hover .muhehehe,
|
||
.muhehehe:active .muhehehe {
|
||
color: white !important;
|
||
}
|
||
.muhehehe:hover a,
|
||
a:hover .muhehehe,
|
||
.muhehehe:active a,
|
||
a:active .muhehehe {
|
||
color: lightblue !important;
|
||
}
|
||
.muhehehe:hover .new,
|
||
.muhehehe .new:hover,
|
||
.new:hover .muhehehe,
|
||
.muhehehe:active .new,
|
||
.muhehehe .new:active,
|
||
.new:active .muhehehe {
|
||
color: #BA0000 !important;
|
||
}
|
||
~~~
|
||
然后在你的主题引入的外部header中添加上
|
||
~~~css
|
||
<link rel="stylesheet" href="/css/muhehehe.css">
|
||
~~~
|
||
作为范例，paw的博客主题所引入的的外部header为`layouts/partials/head_custom.html`。
|
||
最后，我们{{<muhehehe text="为了少些几行代码">}}再新建一个shortcode，文件地址为`layouts/shortcodes/muhehehe.html`，内容为
|
||
~~~html
|
||
<span class="muhehehe" title="{{ default " qwq" (.Get "title" ) }}">{{ .Get "text" }}</span>
|
||
~~~
|
||
这样就完成啦，接下来就可以在你的.md文章里使用
|
||
~~~css
|
||
{{</* muhehehe text="你想说的话" title="鼠标放上去时会显示的内容，默认为qwq" */>}}
|
||
~~~
|
||
来实现萌娘百科一样的黑幕效果啦。
|
||
效果：{{<muhehehe text="你想说的话" title="鼠标放上去时会显示的内容，默认为qwq">}}
|
||
|
||
QA环节之：为什么这个项目要叫做"muhehehe"呢
|
||
===================
|
||
A:因为muhehehe很像是[可爱小猫的奸奇笑声](https://www.bilibili.com/video/BV1mUP1erExj/)。尽管可爱小猫正在奸笑，但是也没人能拒他；{{<muhehehe text="就像没人能拒绝你一样。">}} |