hexo-afdian-plugin/README.md

爱发电插件，用于展示爱发电赞助信息

# Hexo 爱发电插件

这是一个用于Hexo博客的爱发电插件，可以展示您的爱发电赞助者信息。

## 功能特点

- 展示爱发电赞助者列表
- 自定义标题、描述和按钮文本
- 支持缓存机制，减少API调用
- 响应式设计，适配各种设备
- 支持多种展示样式
- 支持作为组件嵌入到博客的任何位置

## 安装

```bash
# 在Hexo博客根目录下执行
npm install hexo-plugin-afdian --save
```

或者手动安装：

1. 下载本插件
2. 将插件文件夹放入Hexo博客的`node_modules`目录
3. 在博客根目录执行`npm install`安装依赖

## 配置

在Hexo博客的`_config.yml`文件中添加以下配置：

```yaml
# 爱发电插件配置
afdian:
  # 必填项
  userId: '您的爱发电用户ID'  # 在 https://afdian.com/dashboard/dev 中获取
  token: '您的爱发电Token'    # 在 https://afdian.com/dashboard/dev 中获取
  
  # 可选项
  title: '赞助名单'           # 页面标题
  description: '感谢您的赞助！' # 页面描述
  buttonText: '赞赏作者'      # 按钮文本
  sponsorUrl: 'https://afdian.com/你的用户名' # 赞助链接
  sponsorNumber: 66         # 高亮显示金额阈值
  emptyText: '暂无赞助'      # 无数据时显示的文本
  cacheTime: 60             # 缓存时间（分钟）
```

## 使用方法

### 方法一：独立页面

配置完成后，访问您的博客地址 + `/afdian/` 即可查看赞助页面。例如：`https://yourblog.com/afdian/`

您也可以在导航菜单中添加链接：

```yaml
# 在主题的_config.yml中
menu:
  赞助: /afdian/
```

### 方法二：作为组件嵌入

您可以将爱发电组件嵌入到博客的任何位置，例如侧边栏、文章底部或关于页面。

#### 在侧边栏中添加

以Next主题为例，修改 `themes/next/layout/_macro/sidebar.swig`：

```swig
{% if theme.afdian_enable %}
  <div class="sidebar-panel sidebar-panel-show">
    <div class="sidebar-panel-header">赞助支持</div>
    <div class="sidebar-panel-body">
      {{ afdian_widget() }}
    </div>
  </div>
{% endif %}
```

然后在主题配置文件中启用：

```yaml
# 爱发电赞助组件
afdian_enable: true
```

#### 在文章底部添加

修改文章模板，在适当位置添加：

```ejs
<%- afdian_widget() %>
```

#### 在关于页面添加

编辑 `source/about/index.md` 文件：

```markdown
---

title: 关于我
date: 2023-01-01
---


## 个人介绍

这里是您的个人介绍内容...

## 赞助支持

{% raw %}
<%- afdian_widget() %>
{% endraw %}
```

更多详细的集成方法请参考 [examples/README.md](examples/README.md)。

## 自定义样式

如果您想自定义样式，可以在主题的自定义CSS文件中覆盖`.afdian-container`或`.afdian-widget`相关的样式。

## 常见问题

1. **无法获取赞助数据？**
   - 请确认您的userId和token是否正确
   - 检查网络连接是否正常
   - 查看Hexo生成日志中是否有错误信息

2. **页面样式异常？**
   - 可能与您的主题CSS有冲突，尝试自定义样式进行覆盖

3. **如何刷新缓存？**
   - 删除`public/data/sponsors.json`文件，或等待缓存过期

4. **组件不显示或显示错误？**
   - 确保正确调用了`afdian_widget()`辅助函数
   - 检查浏览器控制台是否有错误信息

## 许可证

MIT