Cirno_qwa's Blog

一、一键引用该博客的站娘

你可以在你的博客页脚/头部配置文件中添加此代码

1
<script src="https://bakablog.pages.dev/live2d_dist/autoload.js"></script>

如在此博客的themes/warmpaper/layout/partial/footer.ejs中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<footer class="site-footer">
 <div class="footer-inner">
   <% if (theme.copyright) { %>
     <p><%- theme.copyright %></p>
   <% } else { %>
     <p>&copy; <%= new Date().getFullYear() %> <%= config.author || config.title %></p>
   <% } %>
   <p>Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> &middot; Theme <a href="https://github.com/finch-xu/hexo-theme-warmpaper" target="_blank" rel="noopener">Warmpaper</a></p>
 </div>
 //<script src="/live2d_dist/autoload.js"></script>
 
 //--
 <script src="https://bakablog.pages.dev/live2d_dist/autoload.js"></script>
 //--
</footer>

二、此博客的Style样式

1.Miku色按钮样式
模板 1：大按钮

1
<mark style="background-color:#39C5BB;padding:4px 10px;border-radius:6px 6px 6px 6px;color:white;font-weight:bold;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">大按钮名</a></mark>

大按钮名

模板 2：小按钮

1
<mark style="background-color:#39C5BB;padding:2px 6px;border-radius:4px 4px 4px 4px;color:white;font-weight:bold;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">小按钮名</a></mark>

小按钮名

2.Miku色链接样式我是链接内容示例
模板 1：行内小标签（适合放在段落文字中间、末尾）
这个格式的圆角较小（4px），适合作为文字里的小标注、小按钮，比如“资料来源”或“点击访问”。

1
<mark style="background-color: #39C5BB; padding: 2px 6px; border-radius: 4px 0 0 4px;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">这里换成链接文字</a></mark><mark style="background-color: #FFB6C1; padding: 2px 6px; border-radius: 0 4px 4px 0; color: white; font-size: 0.9em;"><a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">这里换成右侧说明文字</a></mark>

如:
这里换成链接文字这里换成右侧说明文字

模板 2：独立行大标签（最适合“友情链接”或底部列表）
这个格式的圆角更大一些（6px），并且自带

标签包裹，确保每个链接会自动独立成行，不会和前后文死死贴在一起。

1
2
3
4
5
6
7
<p>
<mark style="background-color: #39C5BB; padding: 4px 10px; border-radius: 6px 0 0 6px;">
    <a href="这里换成网址" style="color: white; text-decoration: none; font-weight: bold;">网站/项目名</a>
</mark><mark style="background-color: #FFB6C1; padding: 4px 10px; border-radius: 0 6px 6px 0; color: white; font-size: 0.9em;">
    作者: XXX / 网址等信息
</mark>
</p>

如:

网站/项目名 作者: XXX / 网址等信息

3.Miku色标签样式(不可点击,照葫芦画瓢即可)我是Tag

模板 1：行内小标签（适合放在段落文字中间、末尾）
这个格式的圆角较小（4px），适合作为纯文字的分类标注，不可点击。

1
<mark style="background-color: #39C5BB; padding: 2px 6px; border-radius: 4px 0 0 4px; color: white; font-weight: bold;">左侧文字</mark><mark style="background-color: #FFB6C1; padding: 2px 6px; border-radius: 0 4px 4px 0; color: white; font-size: 0.9em; font-weight: bold;">右侧文字</mark>

如：
左侧文字右侧文字

模板 2：独立行大标签
这个格式的圆角更大一些（6px），并且自带

标签包裹，确保每个标签会自动独立成行，适合用在列表、或者突出的分类展示。

1
2
3
4
5
6
7
<p>
<mark style="background-color: #39C5BB; padding: 4px 10px; border-radius: 6px 0 0 6px; color: white; font-weight: bold;">
    大标签左
</mark><mark style="background-color: #FFB6C1; padding: 4px 10px; border-radius: 0 6px 6px 0; color: white; font-size: 0.9em; font-weight: bold;">
    大标签右
</mark>
</p>

如：

大标签左 大标签右