博客美化篇（二）：实用功能组件

一、萌萌哒看板娘

1. 安装步骤

下载stevenjoezhang/live2d-widget
解压到/source/live2d-widget目录
修改autoload.js：
1
const live2d_path = "/live2d-widget/";

2. API配置优化

autoload.js下的第34行是填写了live2d模型的API，如果你在国内可能jsdelivr.netCDN不仅不能加速，还会减速，我们把他注释掉，然后使用fghrsh的API接口：live2d.fghrsh.net。或者你拥有自己的服务器，也可以自己搭建live2d API项目。

initWidget({
  waifuPath: live2d_path + "waifu-tips.json",
  apiPath: "https://live2d.fghrsh.net/api/",
  // cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
});

3. 主题引入方式

在布局文件中添加：

1	`<script src="/live2d-widget/autoload.js"></script>`

引入jQuery和font-awesome。你的主题如果默认引入了，那请不要重复引入。2020年1月1日起，该项目不再依赖于 jQuery。

1 2	`<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">`

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

4. 参考教程

配置博客：给你的hexo添加live2D看板娘 - 遗失的美好灬 - 博客园 (cnblogs.com)

加强版项目地址：stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform (github.com)

看板娘拖拽功能： https://github.com/pymastera/live2d-widget/pull/2/files

纯本地版：【live2D看板娘】为你的网站添加萌萌的二次元板娘，这都拿不下你？-CSDN博客

二、音乐播放器

1. 推荐方案

MetingJS：xizeyoupan/MetingJS: :cake: A powerful plugin connect APlayer and Meting (github.com)
部署API：imsyy/Meting-API: 🐳 Meting API 的容器化与部署 (github.com)](https://github.com/imsyy/Meting-API/)
美化调整：Butterfly主题Aplayer播放器的美化与调整 | 定の栈 (saop.cc)

2. 明月浩空播放器

🎵明月浩空网-永久免费的HTML5网站音乐播放器 (myhkw.cn)

3. 自动播放失效问题解决

原因：hexo-neat插件将 autoplay=true 压缩成了 autoplay

设置collapseBooleanAttributes = false

三、实用小功能组件

1. 一言

1 2	`<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script> <div id="hitokoto">:D 获取中...</div>`

2. 悬挂的喵

参考博客园：博客园使用悬挂猫(上吊猫)置顶插件-CSDN博客，可实现快速返回顶部的功能

<!-- 悬挂的喵 -->
<script type="text/javascript" src="/js/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="/css/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>

3. 粒子时钟

canvas粒子时钟 - 小火柴的蓝色理想 - 博客园 (cnblogs.com)

4. 天气模块

使用心知天气提供的免费API

四、风格代码块

行内代码颜色

默认的行内代码颜色和正文颜色是继承关系，且行内代码背景色也不明显，因此视觉上难以区分。但是配置文件中又没有对应选项可以修改，查阅 GitHub 的 Issue 发现，有人曾提供过一个解决方案。

打开路径 hewei2001/themes/fluid/source/css/_pages/_base 下的 base.styl 文件，找到 code 配置项，修改颜色为 #E05B35。

Mac风格代码块

在主题文件\source\css目录下新建样式文件，如macpanel.styl，内容参考：

.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px

修改主题配置文件_config.fluid.yml，找到custom_css配置项，引入刚刚新建的样式文件（此处引入.styl文件无需加后缀）：

1 2	`custom_css: - /css/macpanel`

继续修改_config.fluid.yml，找到code.highlightjs配置项，将代码高亮风格修改暗色风格（dark系列），如：

highlightjs:
  # 在链接中挑选 style 填入
  # Select a style in the link
  # See: https://highlightjs.org/static/demo/
  style: "github dark dimmed"
  style_dark: "dark"

注：如果选用其他代码高亮风格，有可能会造成代码背景是偏白色的，与黑色的Mac栏不搭。

五、AI摘要

参考教程

使用Cloudflare Workers制作博客AI摘要 | Mayx的博客 (mabbs.github.io)

https://github.com/FloatSheep/Qwen-Post-Summary

文章页面中添加

1	`<div class="note note-primary"><strong>AI摘要：</strong><br/><p id="ai-output" style="text-align: justify"></p></div>`

六、评论系统

参考Fluid主题教程配置

Waline评论系统美化

贴图功能实现
自定义样式参考：
Waline美化教程

提示：所有自定义样式建议通过主题的_config.yml中的custom_css配置项引入，避免直接修改主题源文件。https://blog.fufu.ink/2023/04/walinedecoration.html)

waline评论和leancloud计数问题

原因：不同静态页面托管平台对html后缀处理不统一，导致同一页面waline的Path参数不一致

修改waline.ejs中waline.init()中的Path为：

function getPath(path){
    if(path.endsWith("/index.html")){
        return path.slice(0,-10);
    }
    if(path.endsWith(".html")){
        return path.slice(0,-5);
    }
    return path;
}

七、页脚信息

1. 网站运行时间

在页脚添加网站运行时间统计

2. 萌国备案

萌ICP备案指南
图标包下载：moe-icon.zip https://icp.gov.moe/?keyword=20240658)