# 在Hexo博客中添加爱发电组件

本文档介绍如何在Hexo博客的不同位置添加爱发电赞助组件。

## 前提条件

1. 已安装 `hexo-plugin-afdian` 插件
2. 已在 `_config.yml` 中配置爱发电参数

## 在侧边栏添加爱发电组件

大多数Hexo主题都支持在侧边栏添加自定义组件。以下是几种常见主题的添加方法：

### Next主题

1. 在 `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 %}
```

2. 在主题配置文件 `themes/next/_config.yml` 中添加：

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

### Butterfly主题

1. 在 `themes/butterfly/layout/includes/widget/card_announcement.pug` 文件后创建新文件 `card_afdian.pug`：

```pug
if theme.afdian.enable
  .card-widget.card-afdian
    .card-content
      .item-headline
        i.fas.fa-donate
        span= theme.afdian.title || '赞助支持'
      .afdian-wrap!=afdian_widget()
```

2. 在 `themes/butterfly/layout/includes/aside.pug` 中添加：

```pug
include ./widget/card_afdian.pug
```

3. 在主题配置文件 `themes/butterfly/_config.yml` 中添加：

```yaml
# 爱发电赞助组件
afdian:
  enable: true
  title: '赞助支持'
```

### Fluid主题

1. 在 `themes/fluid/layout/_partial/footer/footer.ejs` 中找到合适位置，添加：

```ejs
<% if (theme.afdian.enable) { %>
  <div class="footer-afdian">
    <h4><%= theme.afdian.title || '赞助支持' %></h4>
    <%- afdian_widget() %>
  </div>
<% } %>
```

2. 在主题配置文件 `themes/fluid/_config.yml` 中添加：

```yaml
# 爱发电赞助组件
afdian:
  enable: true
  title: '赞助支持'
```

## 在文章底部添加爱发电组件

如果想在每篇文章的底部添加爱发电组件，可以修改文章模板：

### Next主题

在 `themes/next/layout/_macro/post.swig` 中找到 `{% if theme.reward_settings.enable %}` 部分，在其后添加：

```swig
{% if theme.afdian_enable %}
  <div class="post-afdian">
    <h3>赞助支持</h3>
    {{ afdian_widget() }}
  </div>
{% endif %}
```

### Butterfly主题

在 `themes/butterfly/layout/post.pug` 中找到 `if theme.reward.enable` 部分，在其后添加：

```pug
if theme.afdian.enable
  .post-afdian
    h3= theme.afdian.title || '赞助支持'
    .afdian-wrap!=afdian_widget()
```

### Fluid主题

在 `themes/fluid/layout/post.ejs` 中找到 `<% if(theme.post.reward.enable) { %>` 部分，在其后添加：

```ejs
<% if (theme.afdian.enable) { %>
  <div class="post-afdian">
    <h3><%= theme.afdian.title || '赞助支持' %></h3>
    <%- afdian_widget() %>
  </div>
<% } %>
```

## 在关于页面添加爱发电组件

1. 创建关于页面（如果尚未创建）：

```bash
hexo new page about
```

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

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

## 个人介绍

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

## 赞助支持

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

## 自定义样式

如果需要自定义爱发电组件的样式，可以在主题的自定义CSS文件中添加样式覆盖。例如：

```css
/* 自定义爱发电组件样式 */
.afdian-widget {
  /* 自定义样式 */
}

.reward-list-item {
  /* 自定义赞助者卡片样式 */
}
```

## 常见问题

1. **组件不显示或显示错误**
   - 检查是否正确配置了爱发电的用户ID和Token
   - 确认CSS文件已正确加载
   - 查看浏览器控制台是否有错误信息

2. **样式与主题不匹配**
   - 使用自定义CSS调整组件样式以匹配主题

3. **数据加载缓慢**
   - 适当增加缓存时间，减少API调用频率