shiro 备忘

shiro 升级

Copy
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 支持以下几种

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

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

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

github

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

GitHubCommitsad

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

​

GitHubPR

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

MxSpace

Copy
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

Copy
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 中

Copy
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

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

将 shiro 中的访问地址反向代理到刚刚部署好的 worker 中

Copy
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