shiro 备忘 - 刘耀文

shiro 升级#

mkdir shiro
cd shiro
wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env

vim .env # 修改你的 ENV 变量
docker compose up -d

docker compose pull # 后续更新镜像

LinkCard 组件使用#

配置 (参考额外功能 | Mix Space (mx-space.js.org))#

GitHub，默认直接用浏览器访问，可能受到 rate limit，可以填写 GH_TOKEN 以保证 API 可达性。
TMDB，必须填写 TMDB_API_KEY 才可以正确解析 tmdb 的链接。参考 https://post.smzdm.com/p/a5op4w33/(opens in a new tab) 这里获取 TOKEN

使用方法#

扩展语法只有 gh 和 gh-commit 语法，其他没有找到，查询源码 [LinkCard.tsx - Shiro GitHub] - Visual Studio Code - GitHub可知有以下几种#

其中 source 支持以下几种

<LinkCard source="gh-commit" id="mx-space/kami/commit/e1eee4136c21ab03ab5690e17025777984c362a0">

export enum LinkCardSource {
  GHRepo = 'gh-repo',
  Self = 'self',
  MixSpace = 'mx-space',
  GHCommit = 'gh-commit',
  GHPr = 'gh-pr',
  TMDB = 'tmdb',
}

再看请求数据的方式，找到id的填写方式

github

<LinkCard source="gh-repo" id="owner/repo">
实际请求：https://api.github.com/repos/${owner}/${repo}

GitHubCommitsad

username/repo/commit/commitId
<LinkCard source="gh-commit" id="username/repo/commit/commitId">
实际请求：https://api.github.com/repos/${owner}/${repo}/commits/${commitId}

GitHubPR

${owner}/${repo}/${pr}
<LinkCard source="gh-pr" id="owner/repo/pr">
实际请求：https://api.github.com/repos/${owner}/${repo}/pulls/${prNumber}

MxSpace

posts/cate/slug 或 notes/nid
<LinkCard source="mx-space" id="posts/cate/slugr"> or <LinkCard source="mx-space" id="notes/nid">
代码逻辑：
if (type === 'posts') {
    const [cate, slug] = rest
    const response = await apiClient.post.getPost(cate, slug)
    data = response
    setFullUrl(`/posts/${cate}/${slug}`)
  } else if (type === 'notes') {
    const [nid] = rest
    const response = await apiClient.note.getNoteById(+nid)
    data = response.data
    setFullUrl(`/notes/${nid}`)
  }

TheMovieDB

tv/id or movie/id
<LinkCard source="tmdb" id="tv/id"> or <LinkCard source="tmdb" id="movie/id">

TMDB 请求无法访问问题#

解决办法 1#

我觉得最简单的解决办法为，给服务器添加代理，但是我没有选择这种，给服务器维护一套代理规则和订阅比较麻烦

解决办法 2#

利用 CloudFlare 中的 worker 将 TMDB 的请求进行代理，原理就是将发往 TMDB 的请求先发送到 CloudFlare，让 CloudFlare 为我们请求数据，因为 CloudFlare 是没有被墙的，但是默认域名workers.dev是被墙的，所以需要绑定自己的域名

注册域名

使用namesilo注册域名，这个网上有很多教程，然后转移到 cloudflare 中，重复教程就不讲了；

在 CloudFlare 中创建 worker，这里我魔改了 innei 大佬的代码，将代码部署到 worker 中

export default {
  async fetch(request) {
    // 从请求中解析路径和查询参数
    const url = new URL(request.url);
    const pathname = url.pathname.split('/').slice(3);
    const query = url.searchParams;

    query.delete('all'); // 删除不需要的查询参数

    // 设置允许的路径类型和长度
    const allowedTypes = ['tv', 'movie'];
    const allowedPathLength = 2;
    if (
      pathname.length > allowedPathLength ||
      !allowedTypes.includes(pathname[0])
    ) {
      return new Response('This request is not allowed', { status: 400 });
    }

    const searchString = query.toString();

    // TMDB API 密钥
    const TMDB_API_KEY = "************************"; /

    // 检查 API 密钥是否存在
    if (!TMDB_API_KEY) {
      return new Response('TMDB_API_KEY is not set', { status: 500 });
    }

    // 构建 TMDB API 的完整 URL
    const apiUrl = `https://api.themoviedb.org/3/${pathname.join('/')}${
      searchString ? `?${searchString}&api_key=${TMDB_API_KEY}` : `?api_key=${TMDB_API_KEY}`
    }`;

    try {
      // 设置请求头
      const headers = new Headers();
      headers.set(
        'User-Agent',
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko), Shiro',
      );

      // 发起请求到 TMDB API
      const response = await fetch(apiUrl, { headers });
      const data = await response.json();

      // 返回响应
      return new Response(JSON.stringify(data), {
        headers: { 'Content-Type': 'application/json' },
      });
    } catch (error) {
      return new Response('Error fetching data', { status: 500 });
    }
  }
}

弄好后大改是这个界面

将步骤 1 的域名绑定到当前 worker 中，弄好后大改是这样

现在就可以通过自定义域名访问 TMDBAPI

https://xxxxxx.xxx/api/tmdb/movie/1299537?language=zh-CN

将 shiro 中的访问地址反向代理到刚刚部署好的 worker 中
```
location /api/tmdb {
    proxy_pass http://liuyaowen.top;
    proxy_set_header Host liuyaowen.top;

}
```
注意上面的 proxy_set_header Host liuyaowen.top; 必须修改，不然你会出现Please enable cookies. Error 1001页面
最后访问你的笔记时，发现，欸怎么跨域了，因为你 cloudflare 中的域名和你网站的域名不一样，所以需要配置跨域，在 cloudflare 设配置你的域名，添加转换规则
好了，你可以愉快的使用 TMDB 的 LinkCard 组件了

此文由 Mix Space 同步更新至 xLog
原始链接为 https://me.liuyaowen.club/notes/2