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、デフォルトでブラウザから直接アクセスしますが、レート制限の影響を受ける可能性があります。API の到達性を確保するために GH_TOKEN を入力できます。
TMDB、正しく tmdb のリンクを解析するには TMDB_API_KEY を入力する必要があります。TOKEN を取得するには https://post.smzdm.com/p/a5op4w33/(新しいタブで開く) を参照してください。

使用方法#

拡張構文は 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"> または <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 または movie/id
<LinkCard source="tmdb" id="tv/id"> または <LinkCard source="tmdb" id="movie/id">

TMDB リクエストのアクセス問題#

解決策 1#

最も簡単な解決策は、サーバーにプロキシを追加することですが、私はこの方法を選びませんでした。サーバーにプロキシルールとサブスクリプションを維持するのは面倒です。

解決策 2#

CloudFlare のワーカーを利用して TMDB のリクエストをプロキシします。原理は、TMDB に送信されるリクエストを最初に CloudFlare に送信し、CloudFlare が私たちのためにデータをリクエストします。CloudFlare はブロックされていませんが、デフォルトのドメインworkers.devはブロックされているため、自分のドメインをバインドする必要があります。

ドメインを登録

namesiloを使用してドメインを登録します。オンラインには多くのチュートリアルがありますので、Cloudflare に転送し、チュートリアルを繰り返すことについては説明しません。

CloudFlare でワーカーを作成します。ここで私は innei さんのコードを改造し、コードをワーカーにデプロイしました。

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('このリクエストは許可されていません', { status: 400 });
    }

    const searchString = query.toString();

    // TMDB API キー
    const TMDB_API_KEY = "************************"; /

    // API キーが存在するか確認
    if (!TMDB_API_KEY) {
      return new Response('TMDB_API_KEYが設定されていません', { 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('データ取得中にエラーが発生しました', { status: 500 });
    }
  }
}

設定が完了したら、以下のようなインターフェースになります。

ステップ 1 のドメインを現在のワーカーにバインドし、設定が完了したら以下のようになります。

これでカスタムドメインを通じて TMDBAPI にアクセスできるようになります。

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

shiro のアクセスアドレスを先ほどデプロイしたワーカーにリバースプロキシします。
```
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