|
|
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="x-dns-prefetch-control" content="on"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="HandheldFriendly" content="True"><meta name="mobile-web-app-capable" content="yes"><link rel="shortcut icon" href="https://hans362-img.oss.0vv0.top/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="https://hans362-img.oss.0vv0.top/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="https://hans362-img.oss.0vv0.top/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="https://hans362-img.oss.0vv0.top/apple-touch-icon.png"><link rel="mask-icon" href="https://hans362-img.oss.0vv0.top/safari-pinned-tab.svg"><title>【项目发布】Bilibili-Bangumi-JS | Hans362 's Blog</title><meta name="keywords" content="Web, 追番, Serverless, Vercel, Hans362"><meta name="description" content="📺 Render your Bilibili bangumi progress on a static web page 一个基于前端 + Serverless Function 的 Bilibili 追番进度展示页面。 GitHub：https://github.com/hans362/Bilibili-Bangumi-JS 前言 （只有这段不是照搬 README.md 的（逃"><meta property="og:type" content="article"><meta property="og:title" content="【项目发布】Bilibili-Bangumi-JS"><meta property="og:url" content="https://blog.hans362.cn/post/bilibili-bangumi-js/"><meta property="og:site_name" content="Hans362 's Blog"><meta property="og:description" content="📺 Render your Bilibili bangumi progress on a static web page 一个基于前端 + Serverless Function 的 Bilibili 追番进度展示页面。 GitHub：https://github.com/hans362/Bilibili-Bangumi-JS 前言 （只有这段不是照搬 README.md 的（逃"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://hans362-img.oss.0vv0.top/2021/02/13/16132186228460.jpg?width=1920"><meta property="article:published_time" content="2021-02-13T15:26:00.000Z"><meta property="article:modified_time" content="2025-04-11T10:35:15.354Z"><meta property="article:author" content="Hans362"><meta property="article:tag" content="Web"><meta property="article:tag" content="追番"><meta property="article:tag" content="Serverless"><meta property="article:tag" content="Vercel"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://hans362-img.oss.0vv0.top/2021/02/13/16132186228460.jpg?width=1920"><link rel="stylesheet" href="/css/style/main.css"><link rel="stylesheet" id="hl-default-theme" href="https://blog.hans362.cn/npm/highlight.js@10.1.2/styles/atom-one-light.css" media="none"><link rel="stylesheet" id="hl-dark-theme" href="https://blog.hans362.cn/npm/highlight.js@10.1.2/styles/atom-one-dark.css" media="none"><script src="/js/darkmode.js"></script><link rel="dns-prefetch" href="https://analytics.0vv0.top"><link rel="preconnect" href="https://hans362-img.oss.0vv0.top"><meta name="generator" content="Hexo 7.1.1"><link rel="alternate" href="/atom.xml" title="Hans362 's Blog" type="application/atom+xml"></head><body><div class="app-shell-loader">加载中...</div><div class="container" tabindex="-1"><header><div class="header__left"><a href="/" class="button"><span class="logo__text">Hans362 's Blog</span></a></div><div class="header__right"><div class="navbar__menus"><a href="/" class="button"><div class="navbar-menu">首页</div></a><a href="/archives/" class="button"><div class="navbar-menu">归档</div></a><a href="/tags/" class="button"><div class="navbar-menu">标签</div></a><a href="/bangumi/" class="button"><div class="navbar-menu">追番</div></a><a href="/links/" class="button"><div class="navbar-menu">友链</div></a><a href="/about/" class="button"><div class="navbar-menu">关于</div></a><a href="/atom.xml" class="button"><div class="navbar-menu">RSS</div></a></div><a href="/search/" class="button"><div id="btn-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="32"><path d="M192 448c0-141.152 114.848-256 256-256s256 114.848 256 256-114.848 256-256 256-256-114.848-256-256z m710.624 409.376l-206.88-206.88A318.784 318.784 0 0 0 768 448c0-176.736-143.264-320-320-320S128 271.264 128 448s143.264 320 320 320a318.784 318.784 0 0 0 202.496-72.256l206.88 206.88 45.248-45.248z"></path></svg></div></a><a href="javaScript:void(0);" rel="external nofollow noreferrer" class="button"><div id="btn-toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></div></a><a href="#" class="button" id="b2t" aria-label="回到顶部" title="回到顶部"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="32" height="32"><path d="M233.376 722.752L278.624 768 512 534.624 745.376 768l45.248-45.248L512 444.128zM192 352h640V288H192z" fill="currentColor"></path></svg> </a><a class="dropdown-icon button" tabindex="0"><div id="btn-dropdown"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="24" height="24" fill="none" stroke="currentColor" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M3.314,4.8h13.372c0.41,0,0.743-0.333,0.743-0.743c0-0.41-0.333-0.743-0.743-0.743H3.314c-0.41,0-0.743,0.333-0.743,0.743C2.571,4.467,2.904,4.8,3.314,4.8z M16.686,15.2H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,15.2,16.686,15.2z M16.686,9.257H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,9.257,16.686,9.257z"></path></svg></div></a><div class="dropdown-menus" id="dropdown-menus"><a href="/" class="dropdown-menu button">首页</a> <a href="/archives/" class="dropdown-menu button">归档</a> <a href="/tags/" class="dropdown-menu button">标签</a> <a href="/bangumi/" class="dropdown-menu button">追番</a> <a href="/links/" class="dropdown-menu button">友链</a> <a href="/about/" class="dropdown-menu button">关于</a> <a href="/atom.xml" class="dropdown-menu button">RSS</a></div></div></header><cover></cover><main><div class="post-content"><div class="post-title"><h1 class="post-title__text">【项目发布】Bilibili-Bangumi-JS</h1><div class="post-title__meta"><a href="/archives/2021/02/" class="post-meta__date button">2021-02-13</a> <span class="separate-dot"></span> <a href="/categories/%E9%A1%B9%E7%9B%AE%E5%8F%91%E5%B8%83/" class="button"><span class="post-meta__cats">项目发布</span></a><style>.post-meta__pv{color:var(--t-l);visibility:hidden;opacity:0;transition:.2s}</style><span class="separate-dot"></span> <span class="post-meta__pv"></span></div></div><aside class="post-side"><div class="post-side__toc"><div class="toc-title">文章目录</div><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%B7%E6%BA%90"><span class="toc-text">起源</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#demo"><span class="toc-text">Demo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%80%A7"><span class="toc-text">特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85"><span class="toc-text">安装</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%8E%E7%AB%AF%E5%AE%89%E8%A3%85"><span class="toc-text">后端安装</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%B8%80%E5%9F%BA%E4%BA%8E-vercel-serverless-function"><span class="toc-text">方案一：基于 Vercel Serverless Function</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%BA%8C%E8%87%AA%E5%BB%BA%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-text">方案二：自建服务器</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%AE%89%E8%A3%85"><span class="toc-text">前端安装</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%B8%80%E7%9B%B4%E6%8E%A5%E5%BC%95%E5%85%A5"><span class="toc-text">方案一：直接引入</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%BA%8C%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%8F%92%E4%BB%B6"><span class="toc-text">方案二：静态博客插件</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%84%9F%E8%B0%A2%EF%B8%8F"><span class="toc-text">感谢❤️</span></a></li></ol></div></aside><a class="btn-toc button" id="btn-toc" tabindex="0"><svg viewBox="0 0 1024 1024" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M128 256h64V192H128zM320 256h576V192H320zM128 544h64v-64H128zM320 544h576v-64H320zM128 832h64v-64H128zM320 832h576v-64H320z" fill="currentColor"></path></svg></a><div class="toc-menus" id="toc-menus"><div class="toc-title">文章目录</div><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%B7%E6%BA%90"><span class="toc-text">起源</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#demo"><span class="toc-text">Demo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%80%A7"><span class="toc-text">特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85"><span class="toc-text">安装</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%8E%E7%AB%AF%E5%AE%89%E8%A3%85"><span class="toc-text">后端安装</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%B8%80%E5%9F%BA%E4%BA%8E-vercel-serverless-function"><span class="toc-text">方案一：基于 Vercel Serverless Function</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%BA%8C%E8%87%AA%E5%BB%BA%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-text">方案二：自建服务器</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%AE%89%E8%A3%85"><span class="toc-text">前端安装</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%B8%80%E7%9B%B4%E6%8E%A5%E5%BC%95%E5%85%A5"><span class="toc-text">方案一：直接引入</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%A1%88%E4%BA%8C%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%8F%92%E4%BB%B6"><span class="toc-text">方案二：静态博客插件</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%84%9F%E8%B0%A2%EF%B8%8F"><span class="toc-text">感谢❤️</span></a></li></ol></div><article class="post post__with-toc card"><div class="post__header"><img alt="Cover Image" class="lazy" src="https://hans362-img.oss.0vv0.top/2021/02/13/16132186228460.jpg?width=1920" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEXMzMyWlpYU2uzLAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAACklEQVQImWNgAAAAAgAB9HFkpgAAAABJRU5ErkJggg==" data-srcset="https://hans362-img.oss.0vv0.top/2021/02/13/16132186228460.jpg?width=1920"><div class="post__expire" id="post-expired-notify"><p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="fill:#f5a623;stroke:#f5a623"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg> 本文最后更新于 <span id="expire-date"></span> 天前，文中部分描述可能已经过时。</p></div><script>(()=>{var e=Date.parse("2021-02-13"),t=(new Date).getTime(),t=Math.floor((t-e)/864e5);120<=t&&(document.querySelectorAll("#expire-date")[0].innerHTML=t,document.querySelectorAll("#post-expired-notify")[0].style.display="block")})()</script></div><div class="post__content"><html><head><script>var meting_api="https://api-v2.hans362.cn/vip/?server=:server&type=:type&id=:id&r=:r"</script><script class="meting-secondary-script-marker" src="/js/Meting.min.js"></script></head><body><blockquote><p>📺 Render your Bilibili bangumi progress on a static web page</p></blockquote><p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/bilibili-bangumi-js"><img src="https://img.shields.io/npm/v/bilibili-bangumi-js.svg?style=flat-square" class="lazy" data-srcset="https://img.shields.io/npm/v/bilibili-bangumi-js.svg?style=flat-square" srcset="/loading.gif" alt=""></a><a target="_blank" rel="noopener" href="https://hans362.cn"><img src="https://img.shields.io/badge/Author-Hans362-blue.svg?style=flat-square" class="lazy" data-srcset="https://img.shields.io/badge/Author-Hans362-blue.svg?style=flat-square" srcset="/loading.gif" alt=""></a><a target="_blank" rel="noopener" href="https://github.com/hans362/Bilibili-Bangumi-JS/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/bilibili-bangumi-js.svg?style=flat-square" class="lazy" data-srcset="https://img.shields.io/npm/l/bilibili-bangumi-js.svg?style=flat-square" srcset="/loading.gif" alt=""></a><a target="_blank" rel="noopener" href="https://www.jsdelivr.com/package/npm/bilibili-bangumi-js"><img src="https://data.jsdelivr.com/v1/package/npm/bilibili-bangumi-js/badge" class="lazy" data-srcset="https://data.jsdelivr.com/v1/package/npm/bilibili-bangumi-js/badge" srcset="/loading.gif" alt=""></a></p><p>一个基于前端 + Serverless Function 的 Bilibili 追番进度展示页面。</p><p>GitHub：<a target="_blank" rel="noopener" href="https://github.com/hans362/Bilibili-Bangumi-JS">https://github.com/hans362/Bilibili-Bangumi-JS</a></p><h2 id="前言"><a class="markdownIt-Anchor" href="#前言"></a> 前言</h2><p>（只有这段不是照搬 <a target="_blank" rel="noopener" href="http://README.md">README.md</a> 的（逃</p><p>大概是两年前写过一个名为 <a href="https://blog.hans362.cn/post/bangumi-list-display/">追番列表展示 API</a> 的辣鸡 PHP 小程序，写得贼烂，然后功能没写完就烂尾了2333后来忘了在哪里说过要用 Javascript 重构一下，结果也不了了之</p><p>然而这次寒假我居然把它肝了出来！于是就有了这个 Bilibili-Bangumi-JS！（虽然依旧写得很烂但是比之前那破玩意儿强大多了）</p><span id="more"></span><h2 id="起源"><a class="markdownIt-Anchor" href="#起源"></a> 起源</h2><p>如今许多博客主题都附带有追番展示页面，并且也有实现这一功能的相关插件，然而这些主题/插件多为基于 PHP 的博客程序（如 Wordpress、Typecho 等）设计，像我这种 Hexo 用户就只能哭了。</p><p>受制于静态博客的特殊性，尽管前端可以通过 POST 请求 Bilibili API 获得特定用户的追番列表，但无法得知用户的观看进度，除非 POST 请求中带上对应用户的 Cookies。然而众所周知，将 Cookies 这种敏感信息光明正大地写死在前端页面中是十分危险的，所以依然需要有一个后端程序来处理这件事情。</p><p>后端程序的运行离不开独立的服务器，然而静态博客用户们本就是为了节约购买服务器的费用才选择前端静态页面托管服务（如 Github Pages 等），于是我想到了 Vercel Serverless Function，提供了后端程序的运行环境及一定的免费配额，搭配前端页面就能够完美实现这一需求。</p><p>所以，就有了这个项目啦 😃</p><h2 id="demo"><a class="markdownIt-Anchor" href="#demo"></a> Demo</h2><ul><li><a target="_blank" rel="noopener" href="https://bilibili-bangumi-js.vercel.app/">https://bilibili-bangumi-js.vercel.app/</a></li><li><a href="https://blog.hans362.cn/bangumi/">https://blog.hans362.cn/bangumi/</a></li></ul><h2 id="特性"><a class="markdownIt-Anchor" href="#特性"></a> 特性</h2><ol><li>适用于 Hexo、Hugo 等无后端静态博客程序及静态网页。</li><li>利用 Bilibili Cookies 实现持久化登录，实时更新追番进度。</li><li>后端专为 Vercel Serverless Function 设计，无需独立的服务器即可运行。</li><li>敏感信息（如 Cookies）存储于 Vercel 后端环境变量中，无需担心前端隐私泄露。</li></ol><h2 id="安装"><a class="markdownIt-Anchor" href="#安装"></a> 安装</h2><p>安装分为后端安装和前端安装两步，均需要完成。</p><h3 id="后端安装"><a class="markdownIt-Anchor" href="#后端安装"></a> 后端安装</h3><h4 id="方案一基于-vercel-serverless-function"><a class="markdownIt-Anchor" href="#方案一基于-vercel-serverless-function"></a> 方案一：基于 Vercel Serverless Function</h4><ol><li>Fork 本项目。</li><li>前往 Vercel 官网注册或登录。</li><li>在 Vercel Dashboard 中点击 New Project，授权 GitHub，选择账户下 Fork 出来的本项目，点击 Deploy 完成部署。</li><li>点击 Vercel Dashboard 上的本项目。<br><img src="https://cdn.jsdelivr.net/gh/hans362/Bilibili-Bangumi-JS/assets/1.jpeg?width=1920" class="lazy" data-srcset="https://cdn.jsdelivr.net/gh/hans362/Bilibili-Bangumi-JS/assets/1.jpeg?width=1920" srcset="/loading.gif" alt=""></li><li>点击 Settings > Environment Variables，添加新的环境变量，选择 Secret 类型，变量名为<code>COOKIES</code>，内容为你的 Bilibili Cookies（获取方式：Chrome 中登录 Bilibili 账号，按下 F12 > Application > Cookies，找到<code>SESSDATA</code>，对应的值即为 Cookies）。<br><img src="https://cdn.jsdelivr.net/gh/hans362/Bilibili-Bangumi-JS/assets/2.jpeg?width=1920" class="lazy" data-srcset="https://cdn.jsdelivr.net/gh/hans362/Bilibili-Bangumi-JS/assets/2.jpeg?width=1920" srcset="/loading.gif" alt=""></li><li>记录下 Vercel 分配的 Production 域名（如 bilibili-bangumi-js.vercel.app）。</li></ol><h4 id="方案二自建服务器"><a class="markdownIt-Anchor" href="#方案二自建服务器"></a> 方案二：自建服务器</h4><ol><li>Clone 本项目。</li><li>安装 NodeJS 环境（包括 NPM）。</li><li>运行<code>npm install</code>安装依赖。</li><li>设置环境变量<code>COOKIES</code>为你的 Bilibili Cookies（获取方式：Chrome 中登录 Bilibili 账号，按下 F12 > Application > Cookies，找到<code>SESSDATA</code>，对应的值即为 Cookies）。</li><li><code>npm start</code>即可将服务运行在<code>localhost:3000</code>，自己想个办法让它保持在后台运行着就可以了。</li><li>解析一个域名到服务器，当然你也可以用 IP，需要 SSL 的话可以再搞个反代。</li></ol><h3 id="前端安装"><a class="markdownIt-Anchor" href="#前端安装"></a> 前端安装</h3><h4 id="方案一直接引入"><a class="markdownIt-Anchor" href="#方案一直接引入"></a> 方案一：直接引入</h4><p>在需要添加追番列表的页面中直接引入 CSS 和 JS。</p><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/jquery@3.3.1"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
|
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/bilibili-bangumi-js@latest/dist/bilibili-bangumi.css"</span>></span>
|
|
|
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span>
|
|
|
<span class="language-javascript"><span class="hljs-keyword">var</span> apiUrl = <span class="hljs-string">"https://bilibili-bangumi-js.vercel.app/api"</span>; <span class="hljs-comment">/* 替换成你的后端域名，后面加上 /api */</span></span>
|
|
|
<span class="language-javascript"><span class="hljs-keyword">var</span> userId = <span class="hljs-string">"66745436"</span>; <span class="hljs-comment">/* 替换成你的 Bilibili UID，可在个人空间中查看 */</span></span>
|
|
|
<span class="language-javascript"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
|
|
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/bilibili-bangumi-js@latest/dist/bilibili-bangumi.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre><p>上面的代码使用了 JsDelivr 的 CDN 加载了相关资源，你也可以下载本项目<code>dist</code>文件夹中的编译好的 CSS 和 JS 进行引入。</p><p>引入完成后在页面中需要添加追番列表的地方添加一个容器：</p><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bgm-container"</span>></span>
|
|
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bgm-collection"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bgm-collection"</span>></span>
|
|
|
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin: 0 auto;"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/gh/hans362/Bilibili-Bangumi-JS/assets/bilibili.gif"</span>></span>
|
|
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre><h4 id="方案二静态博客插件"><a class="markdownIt-Anchor" href="#方案二静态博客插件"></a> 方案二：静态博客插件</h4><p>Hexo 用户请参阅 <a target="_blank" rel="noopener" href="https://github.com/hans362/hexo-tag-bilibili-bangumi">hexo-tag-bilibili-bangumi</a>。</p><p>Hugo 等其它静态博客用户再等等吧，欢迎好心人开发其它博客的插件。</p><h2 id="感谢️"><a class="markdownIt-Anchor" href="#感谢️"></a> 感谢❤️</h2><ul><li><a target="_blank" rel="noopener" href="https://github.com/jquery/jquery">jquery/jquery</a> - 本项目中 JS 的前置依赖</li><li><a target="_blank" rel="noopener" href="https://github.com/BigCoke233/miracles">BigCoke233/Miracles</a> - 提供了解析 Bilibili API 返回数据的思路</li><li><a target="_blank" rel="noopener" href="https://github.com/Red-Asuka/bilibili-bangumi-api.git">Red-Asuka/bilibili-bangumi-api</a> - 提供后端实现</li><li><a target="_blank" rel="noopener" href="https://github.com/AlanDecode/PandaBangumi-Typecho-Plugin">AlanDecode/PandaBangumi-Typecho-Plugin</a> - 提供前端 CSS 原型</li><li><a target="_blank" rel="noopener" href="https://github.com/SukkaW/DisqusJS">SukkaW/DisqusJS</a> - 提供示例页面的 CSS 样式</li></ul></body></html></div><div class="license"><div class="license-title">【项目发布】Bilibili-Bangumi-JS</div><div class="license-link"><a href="https://blog.hans362.cn/post/bilibili-bangumi-js/">https://blog.hans362.cn/post/bilibili-bangumi-js/</a></div><div class="license-meta"><div class="license-meta-item"><div class="license-meta-title">本文作者</div><div class="license-meta-text">Hans362</div></div><div class="license-meta-item"><div class="license-meta-title">最后更新</div><div class="license-meta-text">2021-02-13</div></div><div class="license-meta-item"><div class="license-meta-title">许可协议</div><div class="license-meta-text"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="nofollow noopener noreferrer" target="_blank">CC BY-NC-SA 4.0</a></div></div></div><div>转载或引用本文时请遵守许可协议，注明出处、不得用于商业用途！</div></div><div class="post-footer__cats"><a href="/categories/%E9%A1%B9%E7%9B%AE%E5%8F%91%E5%B8%83/" class="post-cats__link button">项目发布</a><a href="/tags/Web/" class="post-tags__link button"># Web</a><a href="/tags/%E8%BF%BD%E7%95%AA/" class="post-tags__link button"># 追番</a><a href="/tags/Serverless/" class="post-tags__link button"># Serverless</a><a href="/tags/Vercel/" class="post-tags__link button"># Vercel</a></div></article><div class="nav"><div class="nav__prev"><a href="/post/use-github-as-picbed-in-mweb/" class="nav__link"><div><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#808080"></path></svg></div><div><div class="nav__label">上一篇</div><div class="nav__title">在 MWeb 中优雅地使用 GitHub + JsDelivr 图床</div></div></a></div><div class="nav__next"><a href="/post/2020-annual-report/" class="nav__link"><div><div class="nav__label">下一篇</div><div class="nav__title">2020年终总结</div></div><div><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#808080"></path></svg></div></a></div></div><div class="post__sponsers card"><div class="sponser-label">喜欢这篇文章吗？考虑支持一下作者吧～</div><a class="sponser-button button" href="https://afdian.net/@hans362" rel="external nofollow noreferrer" target="_blank" data-type="afdian">爱发电</a> <a class="sponser-button button" data-type="alipay">支付宝<img class="sponser-qrcode" src="https://hans362-img.oss.0vv0.top/2021/08/05/68281340.jpg"></a></div><div class="post__comments post__with-toc card" id="comment"><h4>评论</h4><div id="disqus_thread">您所在的地区可能无法访问 Disqus 评论系统，请切换网络环境再尝试。</div></div></div></main><footer><p class="footer-copyright">Copyright © 2017 - 2025 <a href="/">Hans362 's Blog</a></p><p>Powered by <a href="https://hexo.io" target="_blank">Hexo</a> | Theme - <a href="https://github.com/ChrAlpha/hexo-theme-cards" target="_blank">Cards</a></p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8746554831230893" data-ad-slot="6356225601" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script></footer></div><script defer src="https://blog.hans362.cn/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script><script>window.lazyLoadOptions={elements_selector:".lazy"}</script><script async defer data-website-id="5d181692-8a81-4c20-a282-cee87a6b90ef" src="https://analytics.0vv0.top/vue.js"></script><script src="/js/pageviews.js"></script><link rel="stylesheet" href="https://blog.hans362.cn/npm/katex@0.16.0/dist/katex.min.css" crossorigin="anonymous"><script>function loadComment(){let n,e;(n=document.createElement("script")).src="https://blog.hans362.cn/js/disqus.js",document.body.appendChild(n),n.onload=()=>{new DisqusJS({shortname:"hans362-s-blog",siteName:"Hans362 's Blog",api:"https://api-v3.hans362.cn/",apikey:"8Z1UVT4UOk22yNyk9MhpqQ0FLb27Hb1bpV066b4v9zOFie0GQ6VCoJ9TJwoGlCVF",admin:"hans362",identifier:"post/bilibili-bangumi-js/",url:"https://blog.hans362.cn/post/bilibili-bangumi-js/",nesting:"4"})},(e=document.createElement("link")).rel="stylesheet",e.href="https://blog.hans362.cn/css/disqusjs.css",document.head.appendChild(e)}var runningOnBrowser="undefined"!=typeof window,isBot=runningOnBrowser&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent),supportsIntersectionObserver=runningOnBrowser&&"IntersectionObserver"in window;setTimeout(function(){var e;!isBot&&supportsIntersectionObserver?(e=new IntersectionObserver(function(n){n[0].isIntersecting&&(loadComment(),e.disconnect())},{threshold:[0]})).observe(document.getElementById("comment")):loadComment()},1)</script></body></html> |