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