179 lines
12 KiB
HTML
179 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-us">
|
||
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
||
|
||
<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="A simple, minimal blog for those who love text.">
|
||
<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="http://localhost:1313/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="http://localhost:1313/">~/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="/index.xml">~/subscribe</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:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span> <span style="color:#f92672">a</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span> .<span style="color:#a6e22e">muhehehe</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span> <span style="color:#f92672">a</span>.<span style="color:#a6e22e">new</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-color</span>: <span style="color:#ae81ff">#252525</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#252525</span>;
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-shadow</span>: <span style="color:#66d9ef">none</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">hover</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">active</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">hover</span> .<span style="color:#a6e22e">muhehehe</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">active</span> .<span style="color:#a6e22e">muhehehe</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">white</span> <span style="color:#75715e">!important</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">hover</span> <span style="color:#f92672">a</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span>:<span style="color:#a6e22e">hover</span> .<span style="color:#a6e22e">muhehehe</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">active</span> <span style="color:#f92672">a</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#f92672">a</span>:<span style="color:#a6e22e">active</span> .<span style="color:#a6e22e">muhehehe</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">lightblue</span> <span style="color:#75715e">!important</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">hover</span> .<span style="color:#a6e22e">new</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span> .<span style="color:#a6e22e">new</span>:<span style="color:#a6e22e">hover</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">new</span>:<span style="color:#a6e22e">hover</span> .<span style="color:#a6e22e">muhehehe</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span>:<span style="color:#a6e22e">active</span> .<span style="color:#a6e22e">new</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">muhehehe</span> .<span style="color:#a6e22e">new</span>:<span style="color:#a6e22e">active</span><span style="color:#f92672">,</span>
|
||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">new</span>:<span style="color:#a6e22e">active</span> .<span style="color:#a6e22e">muhehehe</span> {
|
||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#BA0000</span> <span style="color:#75715e">!important</span>;
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span></code></pre></div><p>然后在你的主题引入的外部header中添加上</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#f92672">link</span> <span style="color:#f92672">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">"stylesheet"</span> <span style="color:#f92672">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/css/muhehehe.css"</span><span style="color:#f92672">></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:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"muhehehe"</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">"{{ default "</span> <span style="color:#a6e22e">qwq</span><span style="color:#960050;background-color:#1e0010">"</span> <span style="color:#960050;background-color:#1e0010">(.</span><span style="color:#a6e22e">Get</span> <span style="color:#960050;background-color:#1e0010">"</span><span style="color:#a6e22e">title</span><span style="color:#960050;background-color:#1e0010">"</span> <span style="color:#960050;background-color:#1e0010">)</span> <span style="color:#960050;background-color:#1e0010">}}"</span>>{{ .Get "text" }}</<span style="color:#f92672">span</span>>
|
||
</span></span></code></pre></div><p>这样就完成啦，接下来就可以在你的.md文章里使用</p>
|
||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>{<span style="color:#960050;background-color:#1e0010">{<</span> <span style="color:#960050;background-color:#1e0010">muhehehe</span> <span style="color:#960050;background-color:#1e0010">text="你想说的话"</span> <span style="color:#960050;background-color:#1e0010">title="鼠标放上去时会显示的内容，默认为qwq"</span> <span style="color:#960050;background-color:#1e0010">></span>}<span style="color:#960050;background-color:#1e0010">}</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/goodroot/hugo-classic">Github</a> | <a href="https://keybase.io/goodroot">Keybase</a>
|
||
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
|