在尤雨溪微博看到爱发电相关博文后，点进去，发现之前也在 Heo 博客看到类似的卡片，遂即上手实践一下。

参照 Heo 博客展示逻辑，基于主题模版 asideNewestPost.ejs 的样式进行简单衍生。

效果预览：

爱发电卡片

关于爱发电

下面是官方的介绍

爱发电是什么？

爱发电

爱发电，连接创作者与粉丝。

我们认为，长期耕耘一件事或几件事的创作者值得被关注，他们为这个世界带来的美好，值得等价的回报。

从他们的作品中获得这份价值的粉丝们，也一定愿意用发电的方式支持自己喜爱的创作者。

让创作者获得长期、稳定的收入，将创作的自由还给创作者，是我们创办「爱发电」的目标。我们希望所有人都能感受到，创作是一件付出就有回报，并且会令自己感到快乐的事。
从粉丝的角度来说，既从支持中获得了喜悦，还得到了自己喜爱的会员奖励；从创作者的角度来说，能够更好、更自由地继续创作之路，还与粉丝建立了更加长期、深厚的关系。

集成

添加侧边模版并启用

  1. 新增 asideAfdian.ejs 并修改 layout/partial/compoment/aside/asideSwitch.ejs 支持该模块使用。
  2. 扩展主题侧边卡片配置 aside.[xxx].Sticky 可以配置 afdian。
    1
    2
    3
    4
    aside:
       post:
         noSticky: "about"
         Sticky: "afdian,newestPost"

详细新增代码及样式 👇

详细代码

添加配置

为了更灵活的配置，除样式外全部可以使用 afdian.yml 来配置对应数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
info:
  icon: /images/afdian.png
  title: 来自爱发电的赞助
  tip: 赞助
  link: https://afdian.net/a/zhangyuhan2016

sponsors:
  - name: 发电
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 飞翔的企鹅
    desc: 一些相关的描述2
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 蒲公英
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 奋斗的土豆
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 一个很长很长的昵称
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 爱
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 发
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com
  - name: 电
    desc: 一些相关的描述
    logo: /images/06280955.png
    link: https://xxx.com

因为个人没有相关需求，主要是也没有发电赞助，hahaaa。

目前逻辑是随机高亮 sponsor，如果需要指定高亮 sponsor，需要去调整 🤏 一点点代码。

找到：

1
<% let randomIndex = Math.floor(Math.random() * site.data.afdian.sponsors.length); %>

修改扩展一下，randomIndex 改为从 afdian.yml 获取一个变量即可。

为我发电

如果对博客内容感兴趣，你可以尝试点击前往赞助，对我进行支持。

  • 在所有文章的侧边卡片会出现你的对应信息
  • 在友链中会特殊标注你的支持
  • 更进一步的联络与交流