更新获取豆瓣方式
This commit is contained in:
parent
fcd1fa1d67
commit
e69663dad4
20
README.md
20
README.md
|
@ -3,6 +3,12 @@
|
||||||
移植自 `bigfa `大大的 `hugo-theme-farallon` 原汁原味,可以直接使用 原主题的CSS
|
移植自 `bigfa `大大的 `hugo-theme-farallon` 原汁原味,可以直接使用 原主题的CSS
|
||||||
精简部分 JS.
|
精简部分 JS.
|
||||||
|
|
||||||
|
- 2024.6.12
|
||||||
|
|
||||||
|
更新豆瓣API获取方式
|
||||||
|
[Docker 自动同步豆瓣书影音记录](https://fatesinger.com/103483)
|
||||||
|
主题设置处填入API
|
||||||
|
|
||||||
- 2024.6.7
|
- 2024.6.7
|
||||||
|
|
||||||
用自带评论做的说说页面,来自
|
用自带评论做的说说页面,来自
|
||||||
|
@ -51,14 +57,16 @@ https://github.com/bigfa/hugo-theme-farallon
|
||||||
|
|
||||||
### 豆瓣观影
|
### 豆瓣观影
|
||||||
|
|
||||||
使用原版的获取方式
|
更新 获取方式
|
||||||
|
|
||||||
>豆瓣收藏使用方法
|
~~使用原版的获取方式~~
|
||||||
微信扫码登录https://node.wpista.com/
|
|
||||||
输入你的豆瓣数字 id,点击保存即可自动同步豆瓣记录。
|
|
||||||
点击 Get integration token 会生成一个 token。
|
|
||||||
|
|
||||||
获取`token`之后填入主题设置项中
|
~~豆瓣收藏使用方法~~
|
||||||
|
~~微信扫码登录https://node.wpista.com/~~
|
||||||
|
~~输入你的豆瓣数字 id,点击保存即可自动同步豆瓣记录。~~
|
||||||
|
~~点击 Get integration token 会生成一个 token。~~
|
||||||
|
|
||||||
|
~~获取`token`之后填入主题设置项中~~
|
||||||
|
|
||||||
### 友情链接
|
### 友情链接
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,350 @@
|
||||||
|
class Douban {
|
||||||
|
constructor(config) {
|
||||||
|
this.container = config.container;
|
||||||
|
this.types = config.types ?? [
|
||||||
|
"movie",
|
||||||
|
"book",
|
||||||
|
"music",
|
||||||
|
"game",
|
||||||
|
"drama",
|
||||||
|
];
|
||||||
|
this.baseAPI = config.baseAPI;
|
||||||
|
this.ver = "1.0.6";
|
||||||
|
this.type = "movie";
|
||||||
|
this.status = "done";
|
||||||
|
this.finished = false;
|
||||||
|
this.paged = 1;
|
||||||
|
this.genre_list = [
|
||||||
|
{
|
||||||
|
name: "已看",
|
||||||
|
value: "done",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "在看",
|
||||||
|
value: "doing",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "想看",
|
||||||
|
value: "mark",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
this.subjects = [];
|
||||||
|
this._create();
|
||||||
|
}
|
||||||
|
|
||||||
|
on(event, element, callback) {
|
||||||
|
const nodeList = document.querySelectorAll(element);
|
||||||
|
nodeList.forEach((item) => {
|
||||||
|
item.addEventListener(event, callback);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleGenreClick() {
|
||||||
|
this.on("click", ".db--genreItem", (t) => {
|
||||||
|
const self = t.currentTarget;
|
||||||
|
if (self.classList.contains("is-active")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
document.querySelector(".db--list").innerHTML = "";
|
||||||
|
document.querySelector(".lds-ripple").classList.remove("u-hide");
|
||||||
|
|
||||||
|
this.status = self.dataset.status || ""; // Provide a default value of an empty string if self.dataset.status is undefined
|
||||||
|
this._renderGenre();
|
||||||
|
this.paged = 1;
|
||||||
|
this.finished = false;
|
||||||
|
this.subjects = [];
|
||||||
|
this._fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_reanderTypes() {
|
||||||
|
document.querySelector(".db--nav").innerHTML = this.types
|
||||||
|
.map((item) => {
|
||||||
|
return `<span class="db--navItem JiEun${
|
||||||
|
this.type == item ? " current" : ""
|
||||||
|
}" data-type="${item}">${item}</span>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
this._handleNavClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
_renderGenre() {
|
||||||
|
document.querySelector(".db--genres").innerHTML = this.genre_list
|
||||||
|
.map((item) => {
|
||||||
|
return `<span class="db--genreItem${
|
||||||
|
this.status == item.value ? " is-active" : ""
|
||||||
|
}" data-status="${item.value}">${item.name}</span>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
this._handleGenreClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
_fetchData() {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
paged: this.paged.toString(),
|
||||||
|
type: this.type,
|
||||||
|
status: this.status,
|
||||||
|
});
|
||||||
|
fetch(this.baseAPI + "list?" + params.toString())
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((t) => {
|
||||||
|
console.log(t.results);
|
||||||
|
if (t.results.length) {
|
||||||
|
if (
|
||||||
|
document
|
||||||
|
.querySelector(".db--list")
|
||||||
|
.classList.contains("db--list__card")
|
||||||
|
) {
|
||||||
|
this.subjects = [...this.subjects, ...t.results];
|
||||||
|
this._randerDateTemplate();
|
||||||
|
} else {
|
||||||
|
this.subjects = [...this.subjects, ...t.results];
|
||||||
|
this._randerListTemplate();
|
||||||
|
}
|
||||||
|
document
|
||||||
|
.querySelector(".lds-ripple")
|
||||||
|
.classList.add("u-hide");
|
||||||
|
} else {
|
||||||
|
this.finished = true;
|
||||||
|
document
|
||||||
|
.querySelector(".lds-ripple")
|
||||||
|
.classList.add("u-hide");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_randerDateTemplate() {
|
||||||
|
const result = this.subjects.reduce((result, item) => {
|
||||||
|
const date = new Date(item.create_time);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const key = `${year}-${month.toString().padStart(2, "0")}`;
|
||||||
|
if (Object.prototype.hasOwnProperty.call(result, key)) {
|
||||||
|
result[key].push(item);
|
||||||
|
} else {
|
||||||
|
result[key] = [item];
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
let html = ``;
|
||||||
|
for (let key in result) {
|
||||||
|
const date = key.split("-");
|
||||||
|
html += `<div class="db--listBydate"><div class="db--titleDate"><div class="db--titleDate__day">${date[1]}</div><div class="db--titleDate__month">${date[0]}</div></div><div class="db--dateList__card">`;
|
||||||
|
html += result[key]
|
||||||
|
.map((movie) => {
|
||||||
|
return `<div class="db--item${
|
||||||
|
this.type == "music" ? " db--item__music" : ""
|
||||||
|
}"><img src="${
|
||||||
|
movie.poster
|
||||||
|
}" referrerpolicy="no-referrer" class="db--image"><div class="db--score ">${
|
||||||
|
movie.douban_score > 0
|
||||||
|
? '<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" ><path d="M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z"></path></svg>' +
|
||||||
|
movie.douban_score
|
||||||
|
: ""
|
||||||
|
}${
|
||||||
|
movie.year > 0 ? " · " + movie.year : ""
|
||||||
|
}</div><div class="db--title"><a href="${
|
||||||
|
movie.link
|
||||||
|
}" target="_blank">${movie.name}</a></div></div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
html += `</div></div>`;
|
||||||
|
}
|
||||||
|
document.querySelector(".db--list").innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
_randerListTemplate() {
|
||||||
|
document.querySelector(".db--list").innerHTML = this.subjects
|
||||||
|
.map((item) => {
|
||||||
|
return `<div class="db--item"><img src="${
|
||||||
|
item.poster
|
||||||
|
}" referrerpolicy="no-referrer" class="db--image"><div class="ipc-signpost ">${
|
||||||
|
item.create_time
|
||||||
|
}</div><div class="db--score ">${
|
||||||
|
item.douban_score
|
||||||
|
? '<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" ><path d="M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z"></path></svg>' +
|
||||||
|
item.douban_score
|
||||||
|
: ""
|
||||||
|
}${
|
||||||
|
item.year ? " · " + item.year : ""
|
||||||
|
}</div><div class="db--title"><a href="${
|
||||||
|
item.link
|
||||||
|
}" target="_blank">${item.name}</a></div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleScroll() {
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
var t = window.scrollY || window.pageYOffset;
|
||||||
|
const moreElement = document.querySelector(
|
||||||
|
".block-more"
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
moreElement.offsetTop + -window.innerHeight < t &&
|
||||||
|
document
|
||||||
|
.querySelector(".lds-ripple")
|
||||||
|
.classList.contains("u-hide") &&
|
||||||
|
!this.finished
|
||||||
|
) {
|
||||||
|
document
|
||||||
|
.querySelector(".lds-ripple")
|
||||||
|
.classList.remove("u-hide");
|
||||||
|
this.paged++;
|
||||||
|
this._fetchData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleNavClick() {
|
||||||
|
this.on("click", ".db--navItem", (t) => {
|
||||||
|
const self = t.currentTarget;
|
||||||
|
if (self.classList.contains("current")) return;
|
||||||
|
this.status = "done";
|
||||||
|
this.type = self.dataset.type;
|
||||||
|
this._renderGenre();
|
||||||
|
document.querySelector(".db--list").innerHTML = "";
|
||||||
|
document.querySelector(".lds-ripple").classList.remove("u-hide");
|
||||||
|
document
|
||||||
|
.querySelector(".db--navItem.current")
|
||||||
|
.classList .remove("current");
|
||||||
|
self.classList.add("current");
|
||||||
|
this.paged = 1;
|
||||||
|
this.finished = false;
|
||||||
|
this.subjects = [];
|
||||||
|
this._fetchData();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_create() {
|
||||||
|
if (document.querySelector(".db--container")) {
|
||||||
|
const container = document.querySelector(
|
||||||
|
this.container
|
||||||
|
);
|
||||||
|
if (!container) return;
|
||||||
|
container.innerHTML = `<nav class="db--nav">
|
||||||
|
</nav>
|
||||||
|
<div class="db--genres">
|
||||||
|
</div>
|
||||||
|
<div class="db--list db--list__card">
|
||||||
|
</div>
|
||||||
|
<div class="block-more block-more__centered">
|
||||||
|
<div class="lds-ripple">
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
this._renderGenre();
|
||||||
|
this._reanderTypes();
|
||||||
|
this._fetchData();
|
||||||
|
this._handleScroll();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.querySelector(".js-db")) {
|
||||||
|
document.querySelectorAll(".js-db").forEach((item) => {
|
||||||
|
const db = item;
|
||||||
|
const id = db.dataset.id;
|
||||||
|
const type = db.dataset.type;
|
||||||
|
const nodeParent = db.parentNode;
|
||||||
|
fetch(this.baseAPI + `${type}/${id}`).then((response) => {
|
||||||
|
response.json().then((t) => {
|
||||||
|
if (t.data) {
|
||||||
|
const data = t.data;
|
||||||
|
const node = document.createElement("div");
|
||||||
|
node.classList.add("doulist-item");
|
||||||
|
node.innerHTML = `<div class="doulist-subject">
|
||||||
|
<div class="doulist-post"><img decoding="async" referrerpolicy="no-referrer" src="${data.poster}"></div>
|
||||||
|
<div class="doulist-content">
|
||||||
|
<div class="doulist-title"><a href="${data.link}" class="cute" target="_blank" rel="external nofollow">${data.name}</a></div>
|
||||||
|
<div class="rating"><span class="allstardark"><span class="allstarlight" style="width:55%"></span></span><span class="rating_nums"> ${data.douban_score} </span></div>
|
||||||
|
<div class="abstract">${data.card_subtitle}</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
nodeParent.replaceWith(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.querySelector(".db--collection")) {
|
||||||
|
document
|
||||||
|
.querySelectorAll(".db--collection")
|
||||||
|
.forEach((item) => {
|
||||||
|
this._fetchCollection(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_fetchCollection(item) {
|
||||||
|
const type = item.dataset.style ? item.dataset.style : "card";
|
||||||
|
fetch(
|
||||||
|
this.baseAPI +
|
||||||
|
"/list?type=" +
|
||||||
|
item.dataset.type +
|
||||||
|
"&paged=1&start_time=" +
|
||||||
|
item.dataset.start +
|
||||||
|
"&end_time=" +
|
||||||
|
item.dataset.end
|
||||||
|
)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((t) => {
|
||||||
|
if (t.length) {
|
||||||
|
if (type == "card") {
|
||||||
|
item.innerHTML += t
|
||||||
|
.map((movie) => {
|
||||||
|
return `<div class="doulist-item">
|
||||||
|
<div class="doulist-subject">
|
||||||
|
<div class="db--viewTime ">Marked ${movie.create_time}</div>
|
||||||
|
<div class="doulist-post"><img referrerpolicy="no-referrer" src="${movie.poster}"></div><div class="doulist-content"><div class="doulist-title"><a href="${movie.link}" class="cute" target="_blank" rel="external nofollow">${movie.name}</a></div><div class="rating"><span class="allstardark"><span class="allstarlight" style="width:75%"></span></span><span class="rating_nums">${movie.douban_score}</span></div><div class="abstract">${movie.card_subtitle}</div></div></div></div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
} else {
|
||||||
|
const result = t.reduce(
|
||||||
|
(result, item) => {
|
||||||
|
if (
|
||||||
|
Object.prototype.hasOwnProperty.call(
|
||||||
|
result,
|
||||||
|
item.create_time
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
result[item.create_time].push(item);
|
||||||
|
} else {
|
||||||
|
result[item.create_time] = [item];
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
let html = ``;
|
||||||
|
for (let key in result) {
|
||||||
|
html += `<div class="db--date">${key}</div><div class="db--dateList">`;
|
||||||
|
html += result[key]
|
||||||
|
.map((movie) => {
|
||||||
|
return `<div class="db--card__list">
|
||||||
|
<img referrerpolicy="no-referrer" src="${
|
||||||
|
movie.poster
|
||||||
|
}">
|
||||||
|
<div>
|
||||||
|
<div class="title"><a href="${
|
||||||
|
movie.link
|
||||||
|
}" class="cute" target="_blank" rel="external nofollow">${
|
||||||
|
movie.name
|
||||||
|
}</a></div>
|
||||||
|
<div class="rating"><span class="allstardark"><span class="allstarlight" style="width:75%"></span></span><span class="rating_nums">${
|
||||||
|
movie.douban_score
|
||||||
|
}</span></div>
|
||||||
|
${movie.remark || movie.card_subtitle}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
html += `</div>`;
|
||||||
|
}
|
||||||
|
item.innerHTML = html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -27,7 +27,7 @@ function themeConfig($form) {
|
||||||
$form->addInput($cnavatar);
|
$form->addInput($cnavatar);
|
||||||
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'), _t('不填写则不显示'));
|
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'), _t('不填写则不显示'));
|
||||||
$form->addInput($donate);
|
$form->addInput($donate);
|
||||||
$doubanID = new Typecho_Widget_Helper_Form_Element_Text('doubanID', NULL, '322dba2a3a27524b97c06d941d9631d153fc', _t('豆瓣页面必需Token'), _t('从<a href="https://node.wpista.com/" target="_blank">https://node.wpista.com/</a>获得token'));
|
$doubanID = new Typecho_Widget_Helper_Form_Element_Text('doubanID', NULL, 'https://db.imsun.org/', _t('豆瓣页面必需API,包含"/"'), _t(' '));
|
||||||
$form->addInput($doubanID);
|
$form->addInput($doubanID);
|
||||||
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'), _t('不填写则不显示'));
|
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'), _t('不填写则不显示'));
|
||||||
$form->addInput($twikoo);
|
$form->addInput($twikoo);
|
||||||
|
|
325
page-douban.php
325
page-douban.php
|
@ -6,333 +6,20 @@
|
||||||
*/
|
*/
|
||||||
if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
||||||
<?php $this->need('header.php'); ?>
|
<?php $this->need('header.php'); ?>
|
||||||
|
<script src="<?php $this->options->themeUrl('/dist/js/db.js'); ?>"></script>
|
||||||
<section class="site--main">
|
<section class="site--main">
|
||||||
<header class="archive--header">
|
<header class="archive--header">
|
||||||
<h1 class="post--single__title"><?php $this->title() ?></h1>
|
<h1 class="post--single__title"><?php $this->title() ?></h1>
|
||||||
<h2 class="post--single__subtitle">数据来源于豆瓣</h2>
|
<h2 class="post--single__subtitle">数据来源于豆瓣</h2>
|
||||||
</header>
|
</header>
|
||||||
<div class="site--main">
|
<div class="site--main">
|
||||||
<div class="db--container" data-token="<?php $this->options->doubanID() ?>">
|
<div class="db--container"></div>
|
||||||
<nav class="db--nav">
|
|
||||||
<div class="db--navItem JiEun current" data-type="movie">Movie</div>
|
|
||||||
<div class="db--navItem JiEun" data-type="book">Book</div>
|
|
||||||
<div class="db--navItem JiEun" data-type="music">Music</div>
|
|
||||||
</nav>
|
|
||||||
<div class="db--genres">
|
|
||||||
</div>
|
|
||||||
<div class="db--list db--list__card">
|
|
||||||
</div>
|
|
||||||
<div class="block-more block-more__centered">
|
|
||||||
<div class="lds-ripple">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
<script>
|
||||||
class APIHandler {
|
new Douban({
|
||||||
constructor(token) {
|
baseAPI: '<?php $this->options->doubanID() ?>', // api
|
||||||
this.ver = "1.0.1";
|
container: ".db--container", // 容器名
|
||||||
this.type = "movie";
|
|
||||||
this.finished = false;
|
|
||||||
this.paged = 1;
|
|
||||||
this.genre_list = [];
|
|
||||||
this.genre = [];
|
|
||||||
this.subjects = [];
|
|
||||||
this.baseAPI = "https://cors.ow3.cn/https://node.wpista.com/v1/outer/";
|
|
||||||
this.token = token;
|
|
||||||
this._create();
|
|
||||||
}
|
|
||||||
on(event, selector, handler) {
|
|
||||||
const elements = document.querySelectorAll(selector);
|
|
||||||
elements.forEach(element => {
|
|
||||||
element.addEventListener(event, handler);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_fetchGenres() {
|
|
||||||
document.querySelector(".db--genres").innerHTML = "";
|
|
||||||
fetch(`${this.baseAPI}genres?token=${this.token}&type=${this.type}`)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.data.length) {
|
|
||||||
this.genre_list = data.data;
|
|
||||||
this._renderGenre();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_handleGenreClick() {
|
|
||||||
this.on("click", ".db--genreItem", event => {
|
|
||||||
const target = event.currentTarget;
|
|
||||||
if (target.classList.contains("is-active")) {
|
|
||||||
const index = this.genre.indexOf(target.innerText);
|
|
||||||
target.classList.remove("is-active");
|
|
||||||
this.genre.splice(index, 1);
|
|
||||||
this.paged = 1;
|
|
||||||
this.finished = false;
|
|
||||||
this.subjects = [];
|
|
||||||
this._fetchData();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
document.querySelector(".db--list").innerHTML = "";
|
|
||||||
document.querySelector(".lds-ripple").classList.remove("u-hide");
|
|
||||||
target.classList.add("is-active");
|
|
||||||
this.genre.push(target.innerText);
|
|
||||||
this.paged = 1;
|
|
||||||
this.finished = false;
|
|
||||||
this.subjects = [];
|
|
||||||
this._fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_renderGenre() {
|
|
||||||
document.querySelector(".db--genres").innerHTML = this.genre_list.map(genre =>
|
|
||||||
`<span class="db--genreItem${this.genre.includes(genre.name) ? " is-active" : ""}">${genre.name}</span>`
|
|
||||||
).join("");
|
|
||||||
this._handleGenreClick();
|
|
||||||
}
|
|
||||||
_fetchData() {
|
|
||||||
fetch(`${this.baseAPI}faves?token=${this.token}&type=${this.type}&paged=${this.paged}&genre=${JSON.stringify(this.genre)}`)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.data.length) {
|
|
||||||
if (document.querySelector(".db--list").classList.contains("db--list__card"))
|
|
||||||
{
|
|
||||||
this.subjects = [...this.subjects, ...data.data];
|
|
||||||
this._randerDateTemplate();
|
|
||||||
} else {
|
|
||||||
this.subjects = [...this.subjects, ...data.data];
|
|
||||||
this._randerListTemplate();
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelector(".lds-ripple").classList.add("u-hide");
|
|
||||||
} else {
|
|
||||||
this.finished = true;
|
|
||||||
document.querySelector(".lds-ripple").classList.add("u-hide");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_randerDateTemplate() {
|
|
||||||
const result = this.subjects.reduce((result, item) => {
|
|
||||||
const date = new Date(item.create_time);
|
|
||||||
const year = date.getFullYear();
|
|
||||||
const month = date.getMonth() + 1;
|
|
||||||
const key = `${year}-${month.toString().padStart(2, "0")}`;
|
|
||||||
if (Object.prototype.hasOwnProperty.call(result, key)) {
|
|
||||||
result[key].push(item);
|
|
||||||
} else {
|
|
||||||
result[key] = [item];
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}, {});
|
|
||||||
let html = ``;
|
|
||||||
for (let key in result) {
|
|
||||||
const date = key.split("-");
|
|
||||||
html += `<div class="db--listBydate"><div class="db--titleDate "><div class="db--titleDate__day">${date[1]}</div><div class="db--titleDate__month">${date[0]}</div></div><div class="db--dateList__card">`;
|
|
||||||
html += result[key]
|
|
||||||
.map(subject => {
|
|
||||||
return `<div class="db--item">${
|
|
||||||
subject.is_top250
|
|
||||||
? '<span class="top250">Top 250</span>'
|
|
||||||
: ""
|
|
||||||
}<img src="${
|
|
||||||
subject.poster
|
|
||||||
}" referrerpolicy="no-referrer" class="db--image"><div class="db--score ">${
|
|
||||||
subject.douban_score > 0
|
|
||||||
? '<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" ><path d="M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z"></path></svg>' +
|
|
||||||
subject.douban_score
|
|
||||||
: ""
|
|
||||||
}${
|
|
||||||
subject.year > 0 ? " · " + subject.year : ""
|
|
||||||
}</div><div class="db--title"><a href="${
|
|
||||||
subject.link
|
|
||||||
}" target="_blank">${subject.name}</a></div></div>`;
|
|
||||||
})
|
|
||||||
.join("");
|
|
||||||
html += `</div></div>`;
|
|
||||||
}
|
|
||||||
document.querySelector(".db--list").innerHTML = html;
|
|
||||||
}
|
|
||||||
_renderListTemplate() {
|
|
||||||
document.querySelector(".db--list").innerHTML = this.subjects.map(subject =>
|
|
||||||
`<div class="db--item">
|
|
||||||
${subject.is_top250 ? '<span class="top250">Top 250</span>' : ""}
|
|
||||||
<img src="${subject.poster}" referrerpolicy="no-referrer" class="db--image">
|
|
||||||
<div class="ipc-signpost">${subject.create_time}</div>
|
|
||||||
<div class="db--score">${subject.douban_score > 0 ?
|
|
||||||
`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<path d="M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z"></path>
|
|
||||||
</svg>` + subject.douban_score : ""}
|
|
||||||
${subject.year > 0 ? " · " + subject.year : ""}
|
|
||||||
</div>
|
|
||||||
<div class="db--title"><a href="${subject.link}" target="_blank">${subject.name}</a></div>
|
|
||||||
</div>`
|
|
||||||
).join("");
|
|
||||||
}
|
|
||||||
_handleScroll() {
|
|
||||||
window.addEventListener("scroll", () => {
|
|
||||||
const scrollY = window.scrollY || window.pageYOffset;
|
|
||||||
const blockMoreOffsetTop = document.querySelector(".block-more").offsetTop;
|
|
||||||
if (blockMoreOffsetTop - window.innerHeight < scrollY && document.querySelector(".lds-ripple").classList.contains("u-hide") && !this.finished) {
|
|
||||||
document.querySelector(".lds-ripple").classList.remove("u-hide");
|
|
||||||
this.paged++;
|
|
||||||
this._fetchData();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_handleNavClick() {
|
|
||||||
this.on("click", ".db--navItem", event => {
|
|
||||||
if (event.currentTarget.classList.contains("current")) return;
|
|
||||||
this.genre = [];
|
|
||||||
this.type = event.currentTarget.dataset.type;
|
|
||||||
if (this.type != "book") {
|
|
||||||
this._fetchGenres();
|
|
||||||
document.querySelector(".db--genres").classList.remove("u-hide");
|
|
||||||
} else {
|
|
||||||
document.querySelector(".db--genres").classList.add("u-hide");
|
|
||||||
}
|
|
||||||
document.querySelector(".db--list").innerHTML = "";
|
|
||||||
document.querySelector(".lds-ripple").classList.remove("u-hide");
|
|
||||||
document.querySelector(".db--navItem.current").classList.remove("current");
|
|
||||||
event.target.classList.add("current");
|
|
||||||
this.paged = 1;
|
|
||||||
this.finished = false;
|
|
||||||
this.subjects = [];
|
|
||||||
this._fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_create() {
|
|
||||||
if (document.querySelector(".db--container")) {
|
|
||||||
const container = document.querySelector(".db--container");
|
|
||||||
if (container.dataset.token) {
|
|
||||||
this.token = container.dataset.token;
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const currentNavItem = document.querySelector(".db--navItem.current");
|
|
||||||
if (currentNavItem instanceof HTMLElement) {
|
|
||||||
this.type = currentNavItem.dataset.type;
|
|
||||||
}
|
|
||||||
const list = document.querySelector(".db--list");
|
|
||||||
if (list.dataset.type) {
|
|
||||||
this.type = list.dataset.type;
|
|
||||||
}
|
|
||||||
if (this.type == "movie") {
|
|
||||||
document.querySelector(".db--genres").classList.remove("u-hide");
|
|
||||||
}
|
|
||||||
this._fetchGenres();
|
|
||||||
this._fetchData();
|
|
||||||
this._handleScroll();
|
|
||||||
this._handleNavClick();
|
|
||||||
}
|
|
||||||
if (document.querySelector(".js-db")) {
|
|
||||||
document.querySelectorAll(".js-db").forEach(element => {
|
|
||||||
const id = element.dataset.id;
|
|
||||||
const type = element.dataset.type;
|
|
||||||
const parentNode = element.parentNode;
|
|
||||||
fetch(`${this.baseAPI}${type}/${id}?token=${this.token}`)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.data) {
|
|
||||||
const itemData = data.data;
|
|
||||||
const div = document.createElement("div");
|
|
||||||
div.classList.add("doulist-item");
|
|
||||||
div.innerHTML = `
|
|
||||||
<div class="doulist-subject">
|
|
||||||
<div class="doulist-post">
|
|
||||||
<img decoding="async" referrerpolicy="no-referrer" src="${itemData.poster}">
|
|
||||||
</div>
|
|
||||||
<div class="doulist-content">
|
|
||||||
<div class="doulist-title">
|
|
||||||
<a href="${itemData.link}" class="cute" target="_blank" rel="external nofollow">${itemData.name}</a>
|
|
||||||
</div>
|
|
||||||
<div class="rating">
|
|
||||||
<span class="allstardark">
|
|
||||||
<span class="allstarlight" style="width:55%"></span>
|
|
||||||
</span>
|
|
||||||
<span class="rating_nums"> ${itemData.douban_score} </span>
|
|
||||||
</div>
|
|
||||||
<div class="abstract">${itemData.card_subtitle}</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
parentNode.replaceWith(div);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (document.querySelector(".db--collection")) {
|
|
||||||
document.querySelectorAll(".db--collection").forEach(collection => {
|
|
||||||
this._fetchCollection(collection);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
_fetchCollection(collection) {
|
|
||||||
const style = collection.dataset.style ? collection.dataset.style : "card";
|
|
||||||
fetch(`${this.baseAPI}v1/movies?type=${collection.dataset.type}&paged=1&genre=&start_time=${collection.dataset.start}&end_time=${collection.dataset.end}`)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.length) {
|
|
||||||
if (style === "card") {
|
|
||||||
collection.innerHTML += data.map(item => `
|
|
||||||
<div class="doulist-item">
|
|
||||||
<div class="doulist-subject">
|
|
||||||
<div class="db--viewTime">Marked ${item.create_time}</div>
|
|
||||||
<div class="doulist-post">
|
|
||||||
<img referrerpolicy="no-referrer" src="${item.poster}">
|
|
||||||
</div>
|
|
||||||
<div class="doulist-content">
|
|
||||||
<div class="doulist-title">
|
|
||||||
<a href="${item.link}" class="cute" target="_blank" rel="external nofollow">${item.name}</a>
|
|
||||||
</div>
|
|
||||||
<div class="rating">
|
|
||||||
<span class="allstardark">
|
|
||||||
<span class="allstarlight" style="width:75%"></span>
|
|
||||||
</span>
|
|
||||||
<span class="rating_nums">${item.douban_score}</span>
|
|
||||||
</div>
|
|
||||||
<div class="abstract">${item.remark || item.card_subtitle}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`).join("");
|
|
||||||
} else {
|
|
||||||
const groupedData = data.reduce((acc, item) => {
|
|
||||||
if (acc[item.create_time]) {
|
|
||||||
acc[item.create_time].push(item);
|
|
||||||
} else {
|
|
||||||
acc[item.create_time] = [item];
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
let html = "";
|
|
||||||
for (const date in groupedData) {
|
|
||||||
html += `<div class="db--date">${date}</div><div class="db--dateList">`;
|
|
||||||
html += groupedData[date].map(item => `
|
|
||||||
<div class="db--card__list">
|
|
||||||
<img referrerpolicy="no-referrer" src="${item.poster}">
|
|
||||||
<div>
|
|
||||||
<div class="title">
|
|
||||||
<a href="${item.link}" class="cute" target="_blank" rel="external nofollow">${item.name}</a>
|
|
||||||
</div>
|
|
||||||
<div class="rating">
|
|
||||||
<span class="allstardark">
|
|
||||||
<span class="allstarlight" style="width:75%"></span>
|
|
||||||
</span>
|
|
||||||
<span class="rating_nums">${item.douban_score}</span>
|
|
||||||
</div>
|
|
||||||
${item.remark || item.card_subtitle}
|
|
||||||
</div>
|
|
||||||
</div>`).join("");
|
|
||||||
html += "</div>";
|
|
||||||
}
|
|
||||||
collection.innerHTML = html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 在页面加载完成后实例化APIHandler类
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const token = "<?php $this->options->doubanID() ?>"; // 替换为你的API令牌
|
|
||||||
new APIHandler(token);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<?php $this->need('footer.php'); ?>
|
<?php $this->need('footer.php'); ?>
|
Loading…
Reference in New Issue