自本博客创建以来，在Typecho1.2.1版本下，为满足文章多样化表达形式的需求，我通过Vibe Coding先后开发出音乐播放器、贡献图、作者申明、图文融合组件，并通过组件面板的方式嵌入文章编辑页面。为方便分享和复用，这些组件已重新组织为Typecho插件，已通过GitHub开源、可以下载安装到个人的博客中。本文对这些组件插件予以介绍发布。

概述

相关代码开源地址：Plugins_for_Manueld-sBlog，供下载使用。下载后需将希望安装的插件目录复制到个人博客站点的 usr/plugins/ 文件夹下，然后在 Typecho 后台 → 插件 中启用相关插件。

启用这些插件后，若需要后台使用的组件插入UI面板，则需要安装Daydream博客主题。面板位置如下图：

更详细的说明见Plugins_for_Manueld-sBlog的readme文档。以下章节分别展示这些组件插件的效果。

插件一：音乐播放器

在Typecho嵌入视频/音乐/多媒体这篇文章中，我对现有的音频嵌入方法不甚满意，因此决定自己写一个自定义音乐播放器的插件，实现自己博客想要的封面音乐功能（谁知道拖了一年半才写满意）。

主界面：

使用方式：一般选择网易云音乐（歌曲ID）的插入方式，按下图所示的方法导出对应歌曲的分享链接：

点击解析曲目信息后、在文中插入插件，效果如下：

• 当勾选“进页显示「含背景音频」提示窗”时，打开文章会在右下角显示提示
• 可通过拖动播放碟调整进度

插件二：图文融合

主要用于插入图文混排的内容，实现自定义版式。主界面如下：

插件三：作者申明

主要用于涉及敏感话题文章的“宇宙安全申明”、涉及AI生成内容的创作申明等。主界面如下：

预设了部分模板供使用。主要以颜色块的形式突出显示所申明的内容。效果如下：

插件四：贡献图

仿照Github贡献图的风格，为博客发文准备了一个贡献图。它会记录每日的内容发布、修改，并将其记作一次贡献，通过可视化的方式展现出来。插入面板如下：

贡献图的效果如下：