Hexo 爱发电插件

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

功能特点

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

安装

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

或者手动安装：

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

配置

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

# 爱发电插件配置
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/

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

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

方法二：作为组件嵌入

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

在侧边栏中添加

以Next主题为例，修改 themes/next/layout/_macro/sidebar.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 %}

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

# 爱发电赞助组件
afdian_enable: true

在文章底部添加

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

<%- afdian_widget() %>

在关于页面添加

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

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

## 个人介绍

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

## 赞助支持

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

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

自定义样式

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

常见问题

1. 无法获取赞助数据？

   • 请确认您的userId和token是否正确
   • 检查网络连接是否正常
   • 查看Hexo生成日志中是否有错误信息

2. 页面样式异常？

   • 可能与您的主题CSS有冲突，尝试自定义样式进行覆盖

3. 如何刷新缓存？

   • 删除public/data/sponsors.json文件，或等待缓存过期

4. 组件不显示或显示错误？

   • 确保正确调用了afdian_widget()辅助函数
   • 检查浏览器控制台是否有错误信息

许可证

MIT