update

Signed-off-by: Innei <[email protected]>

Author: Innei

components/Tag/index.ts

@@ -0,0 +1 @@
+export * from './tag'

components/Tag/tag.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import type { FC, PropsWithChildren } from 'react'
+
+export const TitleTag: FC<
+  PropsWithChildren & {
+    className?: string
+  }
+> = ({ children, className }) => {
+  return (
+    <div
+      className={clsx(
+        'inline-block text-xs text-white p-1 rounded-md bg-cyan-600 dark:bg-cyan-500',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const ProTag = () => {
+  return (
+    <TitleTag className="absolute translate-y-2 translate-x-2 z-[10]">
+      <span title="此功能仅闭源版本提供">闭源版本</span>
+    </TitleTag>
+  )
+}

pages/themes/shiro/extra.mdx

@@ -1,10 +1,19 @@
 # 额外功能
 
+## 扩展的 Markdown 语法
+
+参考 https://shiro.innei.in/#/markdown
+
+**对于 LinkCard 的解析，某些需要你填写 API Key，以下的键值都是填写在 .env 环境变量中**
+
+- GitHub，默认直接用浏览器访问，可能受到 rate limit，可以填写 `GH_TOKEN` 以保证 API 可达性。
+- TMDB，必须填写 `TMDB_API_KEY` 才可以正确解析 tmdb 的链接。参考 https://post.smzdm.com/p/a5op4w33/ 这里获取 TOKEN
+
 ## 我的动态
 
 Shiro 主题中，有一个可以在顶部显示博主当前正在做的事情的功能，这个功能是通过云函数和 ProcessReporter 软件实现的。
 
-import { ToGitHub } from '@components/ToGitHub';
+import { ToGitHub } from '@components/ToGitHub'
 
 <ToGitHub repo="mx-space/ProcessReporterMac" />
 <ToGitHub repo="TNXG/ProcessReporterWinpy" />
@@ -13,7 +22,7 @@ import { ToGitHub } from '@components/ToGitHub';
 import { Callout, Steps } from 'nextra/components'
 
 <Callout type="info">
-非常感谢 Innei, timochan, TNXG 的贡献，目前 ProcessReporter 已支持全平台！
+  非常感谢 Innei, timochan, TNXG 的贡献，目前 ProcessReporter 已支持全平台！
 </Callout>
 
 <Steps>
@@ -32,6 +41,7 @@ import { Callout, Steps } from 'nextra/components'
 这个密钥将用于验证你的软件是否有权限更新博主的动态，所以请务必设置一个复杂的密钥。
 
 **密钥在后面的步骤中还需要用到，所以请务必记住。**
+
 </Callout>
 
 上方没有提到的选项都不需要填写，然后在右侧的代码编辑器中填入下面链接中的代码：
@@ -41,7 +51,7 @@ import { Callout, Steps } from 'nextra/components'
 点击保存按钮，云函数就配置完成了。
 
 <Callout type="info">
-请关注此代码的更新，它可能会随时变化，你需要及时更新它们
+  请关注此代码的更新，它可能会随时变化，你需要及时更新它们
 </Callout>
 
 ### 配置主题配置
@@ -51,21 +61,21 @@ import { Callout, Steps } from 'nextra/components'
 ```json {14,15,16,17}
 {
   "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"
-      }
+    "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"
+    }
   }
 }
 ```
@@ -79,9 +89,10 @@ import { Callout, Steps } from 'nextra/components'
 <ToGitHub repo="ttimochan/processforlinux" />
 
 由于不同平台有不同的使用方法，不同的软件我们会在下方具体讲述。
+
 </Steps>
 
-## ProcessReporter `Mac`
+### ProcessReporter `Mac`
 
 打开软件后，你会发现你的系统菜单栏中多了一个图标，点击图标，然后点击「设置」，在弹出的窗口中填入你的信息：
 
@@ -92,18 +103,18 @@ import { Callout, Steps } from 'nextra/components'
 
 接着关闭窗口，再次点击菜单栏中的图标，点击「Enable」即可。如果一切正常，刷新一下你的博客你就可以在博客顶部看到你的动态了。
 
-## ProcessReporter `Windows`
+### ProcessReporter `Windows`
 
 Windows 版本的使用问题，请前往 [TNXG/ProcessReporterWinpy](https://github.com/TNXG/ProcessReporterWinpy#readme) 查看。
 
-### 使用 GUI 版本
+#### 使用 GUI 版本
 
 在 [Releases](https://github.com/TNXG/ProcessReporterWinpy/releases) 页面下载 `ProcessReporterWinpy_Launcher.exe`
 ，配置好 `config.yml` 文件，然后运行 `ProcessReporterWinpy_Launcher.exe` 即可。
 
 `config.yml` 配置具体配置项以及说明请参考 [TNXG/ProcessReporterWinpy](https://github.com/TNXG/ProcessReporterWinpy#readme)。
 
-### 使用预编译的二进制文件
+#### 使用预编译的二进制文件
 
 在 [Releases](https://github.com/TNXG/ProcessReporterWinpy/releases) 页面下载 `ProcessReporterWinpy.exe`，配置好 `config.yml` 文件后，在终端运行即可，示例如下
 
@@ -113,7 +124,7 @@ processforwinpy.exe --path "运行目录的路径"
 
 `config.yml` 配置具体配置项以及说明请参考 [TNXG/ProcessReporterWinpy](https://github.com/TNXG/ProcessReporterWinpy#readme)。
 
-### 使用源代码
+#### 使用源代码
 
 下载代码后，修改 `config.yml` 文件，填入你的信息：
 
@@ -123,14 +134,14 @@ processforwinpy.exe --path "运行目录的路径"
 
 接着运行程序即可。如果一切正常，刷新一下你的博客你就可以在博客顶部看到你的动态了。
 
-## ProcessReporter `Linux`
+### ProcessReporter `Linux`
 
 <ToGitHub repo="ttimochan/processforlinux#readme" />
 
 在仓库的 [Releases](https://github.com/ttimochan/processforlinux/releases) 页面下载对应的二进制包，解压运行即可，具体请参照项目的 README 进行配置运行。
 
 安装完成后，新建 `.env.process` 文件，填入你的信息：
-  
+
 ```env
 # 你的 key
 API_KEY=your_key
@@ -139,16 +150,59 @@ API_URL={你的API地址}/fn/ps/update
 # 上报时间间隔，单位为秒
 REPORT_TIME=30
 # 是否开启媒体状态上报
-MEDIA_ENABLE=true 
+MEDIA_ENABLE=true
 # 是否打印日志
-LOG_ENABLE=true 
+LOG_ENABLE=true
 ```
+
 然后执行程序即可。如果一切正常，刷新一下你的博客你就可以在博客顶部看到你的动态了。
 
 如果有什么疑问，可以去阅读该项目的 [README](https://github.com/ttimochan/processforlinux#readme)
 
 <style global jsx>{`
- .nextra-content pre {
-     max-height: 55vh;
+  .nextra-content pre {
+    max-height: 55vh;
   }
 `}</style>
+
+import { ProTag } from '@components/Tag'
+
+## 个人状态展示<ProTag />
+
+![](./status.png)
+
+设置当前的状态。
+
+### 配置云函数
+
+进入后台，点击左侧菜单栏的「其他 -> 配置与云函数」，然后点击新建按钮，在选项卡中填入以下信息：
+
+- 名称：`status`
+- 引用：`shiro`
+- 数据类型：`Function`
+- 请求方式：`ALL`
+
+这个地方还需要设置一个密钥，在 Secret 中填入 `key`，在 Value 中填入你自己的密钥。
+
+<Callout type="warning">
+这个密钥将用于验证你的软件是否有权限更新当前状态，所以请务必设置一个复杂的密钥。
+
+**密钥在后面的步骤中还需要用到，所以请务必记住。**
+
+</Callout>
+
+上方没有提到的选项都不需要填写，然后在右侧的代码编辑器中填入下面链接中的代码：
+
+<ToGitHub repo="mx-space/snippets/blob/main/shiro/functions/status.ts" />
+
+点击保存按钮，云函数就配置完成了。
+
+<Callout type="info">
+  请关注此代码的更新，它可能会随时变化，你需要及时更新它们
+</Callout>
+
+### 设置状态
+
+在主页登录之后，你可以点击此头像的右下方设置状态。
+
+APP 集成正在开发中..

pages/themes/shiro/index.mdx

@@ -173,7 +173,7 @@ import Video from '@components/Video'
         "#EAAEBA"
       ]
     },
-   
+
     "bg": [
       "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
       "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
@@ -182,9 +182,7 @@ import Video from '@components/Video'
       "css": [],
       "styles": [],
       "js": [],
-      "scripts": [
-         
-      ]
+      "scripts": []
     },
     "site": {
       "favicon": "/innei.svg",
@@ -339,12 +337,3 @@ Refer: https://github.com/Innei/Shiro/issues/137
     max-height: 50vh;
   }
 `}</style>
-
-## 扩展的 Markdown 语法
-
-参考 https://shiro.innei.in/#/markdown
-
-** 对于 LinkCard 的解析，某些需要你填写 API Key**
-
-- GitHub，默认直接用浏览器访问，可能受到 rate limit，可以填写 `GH_TOKEN` 以保证 API 可达性。
-- TMDB，必须填写 `TMDB_API_KEY` 才可以正确解析 tmdb 的链接。参考 https://post.smzdm.com/p/a5op4w33/