年轻人的第一个XP展板

~~哪个男孩子没有搭建一个 XP 展板的梦想呢？~~ 于是在某群友的启发下 EhFavorite 诞生了，目前部署在 eh.pops.moe。

NSFW Warning

警告：请勿在工作/上课时打开

提前准备

本文章默认你有一部分的开发和运维基础知识

本项目分为两个部分：前端 /front 和后端 /worker。前端部分是基于 Svelte 的标准 Jamstack，任何支持的平台或者 http server 都可以用来 host。我的现在部署在 Vercel 并通过某不愿透露姓名的知名 CDN Cloudflare 来减速加速，因为一些众所周知的原因，可能不太适合用来给国内访问。后端部分你可以用我已经部署好的 api（https://api.miao.dev/eh?cookie={cookie}），但是直接使用已经部署好的 api 可能会导致性能问题，而且我不会帮你定时更新缓存，缓存可能会过时。后端部分被部署在 Cloudflare Workers 上。部署本项目需要：

可以用来部署网站的服务器或支持 Jamstack 的平台（CF Pages，Vercel，Netlify 等）
一个可以用来编辑一些内容的本地环境（毕竟你我大概都不想在自己/别人的页面上看到 Pop’s Fav），包括 Node, npm/yarn 等。
一个 E-hentai 帐号

如果你打算也部署一个自己的后端，你还需要：

Cloudflare 账户（有免费 tier）
Wrangler

将本项目 Clone 至你自己的帐号下。

在满足了这部分条件之后就可以正式开始啦！~~I say… Hey, hey, hey, start…~~

E-hentai 通过 cookie 来判断用户信息。形如： ipb_member_id=ddddddd; ipb_pass_hash=xxxxxxxxxxx; 在浏览器上登陆一下 eh 然后通过 developer tool 的 Storage tag 就可以获取到 cookie 了。

开始修改！

修改以下内容 ~~我就是直接 hardcode 了你来打我呀~~：

<!-- /front/src/components/Level.svelte @ 12 -->
<p class="level-item has-text-centered has-text-weight-semibold xp">
  Pop's Fav
</p>

<!-- /front/src/components/Level.svelte @ 17 -->
<a class="title" href="https://github.com/GeorgeMiao219/EhFavorite">Link</a>

<!-- /front/src/components/Layout.svelte @ 18 -->
<p>
  <strong>EhFav</strong>
  built with ❤ by
  <a href="https://miao.dev">Pop</a>
  . Powered by
  <a href="https://svelte.dev">Svelte</a>
  and
  <a href="https://bulma.io/">Bulma</a>
  .
  <br />
  The source code is licensed
  <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
  .
</p>

<!-- /front/public/index.html @ 7-->
<link
  href="https://fonts.font.im/css?family=Roboto+Condensed"
  rel="stylesheet"
/>
<title>Pop's Fav</title>

更换为你的 api 或者在 url 后面放 ?cookie=$COOKIE_VALUE：

// /front/src/App.svelte
const loadGalleries = async () => {
  // 修改这行为你的 URL 或者 https://api.miao.dev/eh?cookie=$COOKIE_VALUE
  // 要不然你就会发现我的 xp 变成了你的 xp
  return await fetch('https://api.miao.dev/eh')
    .then((e) => {
      if (!e.ok) {
        throw new Error()
      } else return e
    })
    .then((e) => e.json())
    .then((e) => e.map(APItoGallery) as Gallery[])
    .catch(() => alert('Unable to load data from API, try later'))
  }

修改完成后检查一下有没有问题

$ yarn run dev
# or
$ npm run dev

部署

前端部分

Jamstack 部署可以参考这篇博客，编译输出的文件目录是 /front/dist，如果部署到平台后显示白屏请手动设置。

后端部分（可选）

首先创建一个 wrangler.toml:

> cd worker
> wrangler init

然后往里面添加你的帐号信息，其中 account_id 和 zone_id 都可以在 Cloudflare Dashboard 首页找到（详情参看官方文档）：

account_id = ""
route = "" # 如果你打算用 workers.dev 的话此处可以留空
zone_id = ""

首先使用 wrangler 创建一个叫做 eh 的 namespace

$ wrangler kv:namespace create eh

然后把自己的 cookie 存进 kv ~~其实应该放 secrets 里的，我就放 kv 了，你打我啊~~，把 $COOKIE_VALUE 替换为你刚才获取到的 cookie：

$ wrangler kv:key put cookies $COOKIE_VALUE --binding eh

然后部署到 Cloudflare：

$ wrangler publish

在 wrangler.toml 里添加你的 Cron trigger 来定时更新缓存：

# wrangler.toml
[triggers]
crons = ["0 0 * JAN-JUN FRI", "0 0 LW JUL-DEC *"]

注意：不要把 cron 设置的太过频繁，否则会导致 e-hentai ban ip。由于 Cloudflare Workers 的向外 fetch 的 IP 都是同一个，会导致所有访问 e-hentai 的 Workers 全部失效。

FAQ & 问题

Q: 为什么加载这么久？ A: 别问，问就是 known issue and won’t fix
Q: 为什么部署到 vercel （或者别的 Jamstack 平台）上之后显示白屏？ A: 去设置，找到 Output directory，改为 dist

提前准备

获取 Cookie

开始修改！

部署

前端部分

后端部分（可选）

FAQ & 问题