179 lines
17 KiB
HTML
179 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-us">
|
||
<head>
|
||
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
|
||
<link rel="manifest" href="/images/site.webmanifest">
|
||
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Goblin's Cave Right Here">
|
||
<title>让你的Hugo博客支持萌百式的黑幕 | Let's fall in love</title>
|
||
<link rel="stylesheet" href="/css/style.css" />
|
||
<link rel="stylesheet" href="/css/fonts.css" />
|
||
<link rel="stylesheet" href="https://b.peteralexwain.me/css/theme-override.css">
|
||
<script>NekoType = "black"</script>
|
||
<h1 id="nl">
|
||
<script src="/js/webneko.js"></script>
|
||
</h1>
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body, {
|
||
delimiters: [
|
||
{left: '$$', right: '$$', display: true},
|
||
{left: '$', right: '$', display: false},
|
||
{left: '\\(', right: '\\)', display: false},
|
||
{left: '\\[', right: '\\]', display: true}
|
||
]
|
||
});"></script>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.min.js"></script>
|
||
|
||
<link rel="stylesheet" href="/css/muhehehe.css">
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<nav>
|
||
<ul>
|
||
|
||
|
||
<li class="pull-left ">
|
||
<a href="https://b.peteralexwain.me/">~/let's fall in love</a>
|
||
</li>
|
||
|
||
|
||
<li class="pull-left ">
|
||
<a href="/categories/">~/categories</a>
|
||
</li>
|
||
|
||
|
||
<li class="pull-left ">
|
||
<a href="/tags/">~/tags</a>
|
||
</li>
|
||
|
||
|
||
|
||
|
||
<li class="pull-right">
|
||
<a href="/post/2025/06/25/friends/">~/友達</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
|
||
<div class="article-meta">
|
||
<h1><span class="title">让你的Hugo博客支持萌百式的黑幕</span></h1>
|
||
<h2 class="author">paw</h2>
|
||
<h2 class="date">2025/05/02</h2>
|
||
<p class="terms">
|
||
|
||
|
||
Categories: <a href="/categories/blog">blog</a>
|
||
|
||
|
||
|
||
Tags: <a href="/tags/css">css</a> <a href="/tags/muhehehe">muhehehe</a>
|
||
|
||
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="content-wrapper">
|
||
<main>
|
||
<blockquote>
|
||
<p>非常喜欢某明清时期不知名文学评论家的一句话:“paw有可能很可爱
|
||
<span class="muhehehe" title="出自《明朝-提瓦剌史》">，但是paw很可爱有点不可能</span>”</p>
|
||
<div style="text-align: right;">
|
||
——【清】甘雨
|
||
</div></blockquote>
|
||
<h1 id="tldr">TL;DR</h1>
|
||
<p> 首先新建<code>static/css/muheheh.css</code>，并且内容为：</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 1</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 2</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span> <span style="color:#6ab825;font-weight:bold">a</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 3</span><span><span style="color:#6ab825;font-weight:bold">a</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 4</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span> <span style="color:#6ab825;font-weight:bold">a</span>.<span style="color:#447fcf;text-decoration:underline">new</span> {
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 5</span><span> <span style="color:#6ab825;font-weight:bold">background-color</span>: <span style="color:#3677a9">#252525</span>;
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 6</span><span> <span style="color:#6ab825;font-weight:bold">color</span>: <span style="color:#3677a9">#252525</span>;
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 7</span><span> <span style="color:#6ab825;font-weight:bold">text-shadow</span>: <span style="color:#6ab825;font-weight:bold">none</span>;
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 8</span><span>}
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868"> 9</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">hover</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">10</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">active</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">11</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">hover</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">12</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">active</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span> {
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">13</span><span> <span style="color:#6ab825;font-weight:bold">color</span>: <span style="color:#6ab825;font-weight:bold">white</span> <span style="color:#cd2828;font-weight:bold">!important</span>;
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">14</span><span>}
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">15</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">hover</span> <span style="color:#6ab825;font-weight:bold">a</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">16</span><span><span style="color:#6ab825;font-weight:bold">a</span>:<span style="color:#ffa500">hover</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">17</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">active</span> <span style="color:#6ab825;font-weight:bold">a</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">18</span><span><span style="color:#6ab825;font-weight:bold">a</span>:<span style="color:#ffa500">active</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span> {
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">19</span><span> <span style="color:#6ab825;font-weight:bold">color</span>: <span style="color:#6ab825;font-weight:bold">lightblue</span> <span style="color:#cd2828;font-weight:bold">!important</span>;
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">20</span><span>}
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">21</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">hover</span> .<span style="color:#447fcf;text-decoration:underline">new</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">22</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span> .<span style="color:#447fcf;text-decoration:underline">new</span>:<span style="color:#ffa500">hover</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">23</span><span>.<span style="color:#447fcf;text-decoration:underline">new</span>:<span style="color:#ffa500">hover</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">24</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span>:<span style="color:#ffa500">active</span> .<span style="color:#447fcf;text-decoration:underline">new</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">25</span><span>.<span style="color:#447fcf;text-decoration:underline">muhehehe</span> .<span style="color:#447fcf;text-decoration:underline">new</span>:<span style="color:#ffa500">active</span>,
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">26</span><span>.<span style="color:#447fcf;text-decoration:underline">new</span>:<span style="color:#ffa500">active</span> .<span style="color:#447fcf;text-decoration:underline">muhehehe</span> {
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">27</span><span> <span style="color:#6ab825;font-weight:bold">color</span>: <span style="color:#3677a9">#BA0000</span> <span style="color:#cd2828;font-weight:bold">!important</span>;
|
||
</span></span><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">28</span><span>}
|
||
</span></span></code></pre></div><p> 然后在你的主题引入的外部header中添加上</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">1</span><span><<span style="color:#6ab825;font-weight:bold">link</span> <span style="color:#6ab825;font-weight:bold">rel</span>=<span style="color:#ed9d13">"stylesheet"</span> <span style="color:#6ab825;font-weight:bold">href</span>=<span style="color:#ed9d13">"/css/muhehehe.css"</span>>
|
||
</span></span></code></pre></div><p> 作为范例，paw的博客主题所引入的的外部header为<code>layouts/partials/head_custom.html</code>。<br>
|
||
最后，我们<span class="muhehehe" title=" qwq">为了少些几行代码</span>再新建一个shortcode，文件地址为<code>layouts/shortcodes/muhehehe.html</code>，内容为</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">1</span><span><<span style="color:#6ab825;font-weight:bold">span</span> <span style="color:#bbb">class</span>=<span style="color:#ed9d13">"muhehehe"</span> <span style="color:#bbb">title</span>=<span style="color:#ed9d13">"{{ default "</span> <span style="color:#bbb">qwq</span><span style="color:#a61717;background-color:#e3d2d2">"</span> <span style="color:#a61717;background-color:#e3d2d2">(.</span><span style="color:#bbb">Get</span> <span style="color:#a61717;background-color:#e3d2d2">"</span><span style="color:#bbb">title</span><span style="color:#a61717;background-color:#e3d2d2">"</span> <span style="color:#a61717;background-color:#e3d2d2">)</span> <span style="color:#a61717;background-color:#e3d2d2">}}"</span>>{{ .Get "text" }}</<span style="color:#6ab825;font-weight:bold">span</span>>
|
||
</span></span></code></pre></div><p> 这样就完成啦，接下来就可以在你的.md文章里使用</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868">1</span><span>{<span style="color:#a61717;background-color:#e3d2d2">{<</span> <span style="color:#a61717;background-color:#e3d2d2">muhehehe</span> <span style="color:#a61717;background-color:#e3d2d2">text="你想说的话"</span> <span style="color:#a61717;background-color:#e3d2d2">title="鼠标放上去时会显示的内容，默认为qwq"</span> <span style="color:#a61717;background-color:#e3d2d2">></span>}<span style="color:#a61717;background-color:#e3d2d2">}</span>
|
||
</span></span></code></pre></div><p>来实现萌娘百科一样的黑幕效果啦。<br>
|
||
效果：<span class="muhehehe" title="鼠标放上去时会显示的内容，默认为qwq">你想说的话</span></p>
|
||
<h1 id="qa环节之为什么这个项目要叫做muhehehe呢">QA环节之：为什么这个项目要叫做"muhehehe"呢</h1>
|
||
<p>A:因为muhehehe很像是<a href="https://www.bilibili.com/video/BV1mUP1erExj/">可爱小猫的奸奇笑声</a>，背后隐藏着不可告人的秘密。尽管可爱小猫正在奸笑，但是也没人能拒他；<span class="muhehehe" title=" qwq">就像没人能拒绝你一样。</span></p>
|
||
|
||
<a href="/"> >> Home</a>
|
||
</main>
|
||
</div>
|
||
<footer>
|
||
|
||
|
||
<script>
|
||
(function() {
|
||
function center_el(tagName) {
|
||
var tags = document.getElementsByTagName(tagName), i, tag;
|
||
for (i = 0; i < tags.length; i++) {
|
||
tag = tags[i];
|
||
var parent = tag.parentElement;
|
||
|
||
if (parent.childNodes.length === 1) {
|
||
|
||
if (parent.nodeName === 'A') {
|
||
parent = parent.parentElement;
|
||
if (parent.childNodes.length != 1) continue;
|
||
}
|
||
if (parent.nodeName === 'P') parent.style.textAlign = 'center';
|
||
}
|
||
}
|
||
}
|
||
var tagNames = ['img', 'embed', 'object'];
|
||
for (var i = 0; i < tagNames.length; i++) {
|
||
center_el(tagNames[i]);
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
|
||
<hr/>
|
||
© 2025 PeterAlexWain | <a href="https://github.com/peteralexwain/">Github</a> | <a href="https://b.peteralexwain.me">Goblin’s Cave</a>
|
||
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
|