前端主题
部署 Shiro 主题
额外功能

额外功能

我的动态

Shiro 主题中,有一个可以在顶部显示博主当前正在做的事情的功能,这个功能是通过云函数和 ProcessReporter 软件实现的。

非常感谢 Innei, timochan, TNXG 的贡献,目前 ProcessReporter 已支持全平台!

配置云函数

进入后台,点击左侧菜单栏的「其他 -> 配置与云函数」,然后点击新建按钮,在选项卡中填入以下信息:

  • 名称:update
  • 引用:ps
  • 数据类型:Function
  • 请求方式:POST

这个地方还需要设置一个密钥,在 Secret 中填入 key,在 Value 中填入你自己的密钥。

⚠️

这个密钥将用于验证你的软件是否有权限更新博主的动态,所以请务必设置一个复杂的密钥。

密钥在后面的步骤中还需要用到,所以请务必记住。

上方没有提到的选项都不需要填写,然后在右侧的代码编辑器中填入以下代码:

export default async function handler(ctx: Context) {
  const { timestamp, process, key, media } = ctx.req.body || {}
 
  const [processName, mediaInfo] = await Promise.all([
    ctx.storage.cache.get('ps'),
    ctx.storage.cache.get('media').then((JSONString) => {
      if (JSONString) {
        try {
          return JSON.parse(JSONString)
        } catch {
          return undefined
        }
      }
    }),
  ])
 
  if (!key) {
    return {
      processName,
      mediaInfo,
    }
  }
 
  const validKey = (await ctx.secret.key) || 'testing'
  if (key != validKey)
    ctx.throws(401, "You haven't permission to update process info")
  await ctx.storage.cache.set('ps', process, 60)
  const ts = +new Date()
 
  if (process !== processName)
    ctx.broadcast('ps-update', {
      process,
      ts,
    })
  if (media) {
    await ctx.storage.cache.set('media', JSON.stringify(media), 10)
 
    if (mediaInfo.title !== media.title) ctx.broadcast('media-update', media)
  }
  return {
    ok: 1,
    process,
    timestamp: +new Date(),
  }
}

点击保存按钮,云函数就配置完成了。

配置主题配置

继续在「配置与云函数」页面,找到「theme -> shiro」配置,点击编辑,进入编辑页面,在代码中找到 module,加入 activity 配置,如下:(高亮部分)

{
  "module": {
      "donate": {
        "enable": false,
        "link": " https://afdian.net/@Innei ",
        "qrcode": [
          " https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png ",
          " https://cdn.innei.ren/bed/2023/0424213144.png "
        ]
      },
      "bilibili": {
        "liveId": 1434499
      },
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      }
  }
}

配置软件

前往对应着你的电脑系统的软件的 GitHub 仓库,下载并打开 ProcessReporter。

由于不同平台有不同的使用方法,不同的软件我们会在下方具体讲述。

ProcessReporter Mac

打开软件后,你会发现你的系统菜单栏中多了一个图标,点击图标,然后点击「设置」,在弹出的窗口中填入你的信息:

  • Endpoint:{你的API地址}/fn/ps/update (请将 {你的API地址} 替换为你的 API 地址,如:https://api.example.com/api/v2
  • API Key:填入你刚刚在云函数中设置的密钥

如果你希望软件在开机时自动启动,可以勾选「Launch at login」选项。

接着关闭窗口,再次点击菜单栏中的图标,点击「Enable」即可。如果一切正常,刷新一下你的博客你就可以在博客顶部看到你的动态了。

ProcessReporter Windows

Windows 版本的使用问题,请前往 TNXG/ProcessReporterWinpy (opens in a new tab) 查看。

使用 GUI 版本

Releases (opens in a new tab) 页面下载 ProcessReporterWinpy_Launcher.exe ,配置好 config.yml 文件,然后运行 ProcessReporterWinpy_Launcher.exe 即可。

config.yml 配置具体配置项以及说明请参考 TNXG/ProcessReporterWinpy (opens in a new tab)

使用预编译的二进制文件

Releases (opens in a new tab) 页面下载 ProcessReporterWinpy.exe,配置好 config.yml 文件后,在终端运行即可,示例如下

processforwinpy.exe --path "运行目录的路径"

config.yml 配置具体配置项以及说明请参考 TNXG/ProcessReporterWinpy (opens in a new tab)

使用源代码

下载代码后,修改 config.yml 文件,填入你的信息:

  • api_url:{你的API地址}/fn/ps/update (请将 {你的API地址} 替换为你的 API 地址,如:https://api.example.com/api/v2
  • api_key:填入你刚刚在云函数中设置的密钥
  • report_time: 上报间隔(单位:秒)

接着运行程序即可。如果一切正常,刷新一下你的博客你就可以在博客顶部看到你的动态了。

ProcessReporter Linux

在仓库的 Releases (opens in a new tab) 页面下载对应的二进制包,解压运行即可,具体请参照项目的 README 进行配置运行。

安装完成后,新建 .env.process 文件,填入你的信息:

# 你的 key
API_KEY=your_key
# 你的云函数地址
API_URL={你的API地址}/fn/ps/update
# 上报时间间隔,单位为秒
REPORT_TIME=30
# 是否开启媒体状态上报
MEDIA_ENABLE=true 
# 是否打印日志
LOG_ENABLE=true 

然后执行程序即可。如果一切正常,刷新一下你的博客你就可以在博客顶部看到你的动态了。

如果有什么疑问,可以去阅读该项目的 README (opens in a new tab)