AlbumMusicSearch 插件开发教程

插件简介

AlbumMusicSearch 是为 Typecho 博客系统开发的音乐专辑信息一键抓取插件。它集成了 Discogs API，支持在文章编辑时快速搜索专辑/歌手信息，并自动填充自定义字段、标签和本地化专辑图片。

功能特性

支持歌手、专辑、模糊三种搜索模式
一键抓取专辑信息并填充到自定义字段
自动本地化专辑封面图片
自动将专辑风格写入文章标签
平滑的操作提示与 UI 交互

目录结构说明

usr/plugins/AlbumMusicSearch/
├── Plugin.php           # 插件主逻辑
├── SaveImage.php        # 图片本地化处理
└── assets/
    ├── search.js        # 前端搜索与交互脚本
    ├── fix-search.js    # 兼容性修复脚本
    └── style.css        # 插件样式

快速开始

将 AlbumMusicSearch 文件夹放入 usr/plugins/ 目录下。
后台启用插件。
在文章编辑页面底部即可看到音乐专辑搜索栏。

主要文件与代码示例

1. 插件主文件 Plugin.php

注册钩子、渲染搜索栏、自动本地化图片等核心逻辑：

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

class AlbumMusicSearch_Plugin implements Typecho_Plugin_Interface
{
    public static function activate()
    {
        Typecho_Plugin::factory('admin/write-post.php')->bottom = array('AlbumMusicSearch_Plugin', 'renderSearchBar');
        Typecho_Plugin::factory('Widget_Archive')->action('AlbumMusicSearch_SaveImage', 'action');
        Typecho_Plugin::factory('Widget_Contents_Post_Edit')->finishPublish = 'AlbumMusicSearch_Plugin::finishPublish';
        Typecho_Plugin::factory('Widget_Contents_Post_Edit')->finishSave = 'AlbumMusicSearch_Plugin::finishPublish';
    }

    public static function renderSearchBar()
    {
        $pluginUrl = Typecho_Common::url('AlbumMusicSearch/assets/', Helper::options()->pluginUrl);
        echo '<div id="album-music-search-bar">...搜索栏HTML...</div>';
        echo '<link rel="stylesheet" href="' . $pluginUrl . 'style.css">';
        echo '<script src="' . $pluginUrl . 'search.js"></script>';
    }

    // ...其他方法...
}

2. 前端交互 assets/search.js

Discogs API 搜索、专辑信息填充、标签自动写入等：

document.getElementById('searchBtn').addEventListener('click', searchMusic);
async function searchMusic(page) {
    let query = document.getElementById('searchInput').value;
    // 调用 Discogs API 搜索专辑/歌手
    let response = await fetch(`https://api.discogs.com/database/search?q=${query}&type=release`);
    let data = await response.json();
    // 展示结果，点击专辑可查看详情
    displayResults(data.releases);
}
function insertToCustomFields(info) {
    // 将专辑信息填充到自定义字段
    document.getElementById('customFieldAlbum').value = info.title;
    // 自动将风格写入标签
    let tags = info.style.join(',');
    document.getElementById('postTags').value = tags;
}

3. 图片本地化 SaveImage.php

提供图片下载接口，自动保存专辑封面：

<?php
class AlbumMusicSearch_SaveImage extends Typecho_Widget implements Widget_Action_Interface {
    public function action() {
        $url = isset($_POST['url']) ? trim($_POST['url']) : '';
        // 下载图片并保存到 uploads 目录
        $relPath = $this->downloadImage($url);
        $this->responseJson(['success'=>true, 'path'=>$relPath]);
    }

    private function downloadImage($url) {
        // ...下载逻辑...
        return $localPath;
    }
}

4. 样式与兼容 assets/style.css & fix-search.js

美化搜索栏和结果展示，兼容性修复：

#album-music-search-bar {
    border-radius: 4px;
    box-shadow: 0 1px 4px #eee;
    font-size: 14px;
}
#album-music-search-bar button {
    background: #2d8cf0;
    color: #fff;
}

生成的主要文件

Plugin.php：插件主逻辑，负责钩子注册、渲染搜索栏、图片本地化等
SaveImage.php：图片下载与本地化处理
assets/search.js：前端交互与 API 调用
assets/fix-search.js：兼容性修复脚本
assets/style.css：插件样式

插件扩展建议

可在 Plugin.php 的 config 方法中增加 API KEY 配置
支持更多音乐信息源
增强自定义字段映射

常见问题

Windows 环境下如搜索模式选择器不显示，请确保 fix-search.js 正常加载
若图片无法本地化，请检查 uploads 目录权限

参考

Discogs API 文档
Typecho 插件开发文档

如需二次开发，建议先阅读 Plugin.php 和 search.js 的注释，理解插件的钩子注册与前端数据流。

#AlbumMusicSearch 插件开发教程