From 98df6841e27c16293a07ab2dc6c2f8ffa5fc62f3 Mon Sep 17 00:00:00 2001 From: gizeku Date: Tue, 25 Aug 2026 18:50:04 +0800 Subject: [PATCH] first commit --- README.md | 209 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..2d9b63a --- /dev/null +++ b/README.md @@ -0,0 +1,209 @@ +# docusaurus收藏卡片 +[我现在blog的影像收藏页面](https://pennameco.xyz/vault/visual/)的实现方式，应该是可以直接用的。需要的话拿去喂ai修改也行。 + +🔧需要的东西 - 注册OMDb（邮箱申请就行），docusaurus项目。 + +⚠️注意: +* 目前移动端适配有问题，渲染框架会打架，我没精力排查。不过其实影响不大，除非强迫症。 +* MovieCard.jsx可能存在大小写问题，我没精力查。不过大概率没事。 + +## 路径图、组件 +```text +项目根目录/ +├── src/ +│ ├── pages/ +│ │ └── visual.mdx # 电影列表页面 +│ └── components/ +│ └── MovieCard.jsx # 电影卡片组件 +├── scripts/ +│ └── download-posters/ +│ └── download.js # 海报批量下载脚本（API Key 直接写在里面） +├── static/ +│ └── img/ +│ └── posters/ # 海报图片存放目录（脚本自动创建） +└── posters.bat # Windows 批处理运行脚本 +``` +## 需要修改的东西 +### OMDb、download.js +访问[OMDb](http://www.omdbapi.com/apikey.aspx)注册申请一个API Key。 +然后修改 `download.js` +```js +const API_KEY = '替换你的OMDb-key'; +``` +### 给visual.mdx增加封面路径 +添加和修改这句 +```mdx + // 在此添加更多电影，格式：{imdb:'ttxxxxxx', title:'片名'} + {imdb:'tt0095497', title:'基督最后的诱惑'}, //←修改这个部分就行 + // 复制上面，添加更多... +``` + +### 运行`posters.bat`抓取图片 +如果你用的不是windows，那可以直接运行。 +```bash + node scripts/download-posters/download.js +``` +他会把`visual.mdx`写的列表自己下载，看路径图。第一次运行会自动生成文件夹和内容。 + +## ⚠️ 修改和注意 +如果需要改`visual.mdx`的文件名，需要同步修改`download.js`l检索文件。 +download.js +```js +const mdxPath = path.join(__dirname, '../../src/pages/visual.mdx'); //←修改这个(默认是pages/visual.mdx) +``` + +## 版权和协议 +AI吐代码，我调试的。没有版权，没有协议，随便用。出了问题也别找我，不过可以跟[我聊聊看](https://pennameco.xyz/)怎么优化。 + +## 组件我放在项目文件里面了，但是如果你需要直接复制也能用下面的文档。不全，但是我也不打算删了👋。 + +### src/components/moviecard.jsx +```jsx +import React from 'react'; + +export default function MovieCard({ imdbId }) { + const CARD_WIDTH = 190; + const CARD_HEIGHT = 330; + + // 直接生成本地图片路径 + const posterUrl = `/img/posters/${imdbId}.jpg`; + + // 简单判断图片是否存在（通过 onError 回调处理） + const [hasError, setHasError] = React.useState(false); + + if (hasError) { + return ( +
+ 无海报 +
+ ); + } + + return ( + + 电影海报 setHasError(true)} + /> + + ); +} +``` + + +### src/pages/visual.mdx + + +```mdx +--- +title: 影像收藏 +--- + +import MovieCard from '@site/src/components/MovieCard'; + + + +
+## 标题 +### 电影 + +
+ {[ + // 在此添加更多电影，格式：{imdb:'ttxxxxxx', title:'片名'} + {imdb:'tt0095497', title:'基督最后的诱惑'}, + // 添加更多... + ].map(item => ( +
+
+ +
+

{item.title}

+
+ ))} +
+ +
+``` \ No newline at end of file