豆瓣页面的获取方式
This commit is contained in:
浪子
parent
f046a282c8
commit
7f69fd518d
|
|
@ -7,7 +7,7 @@ function themeConfig($form) {
|
|||
$form->addInput($icoUrl);
|
||||
$jzyear = new Typecho_Widget_Helper_Form_Element_Text('jzyear', NULL, NULL, _t('建站年份 eg. 2006'));
|
||||
$form->addInput($jzyear);
|
||||
$instagramurl = new Typecho_Widget_Helper_Form_Element_Text('instagramurl', NULL, NULL, _t('ins'));
|
||||
$instagramurl = new Typecho_Widget_Helper_Form_Element_Text('instagramurl', NULL, NULL, _t('Instagram'));
|
||||
$form->addInput($instagramurl);
|
||||
$telegramurl = new Typecho_Widget_Helper_Form_Element_Text('telegramurl', NULL, NULL, _t('电报'));
|
||||
$form->addInput($telegramurl);
|
||||
|
|
@ -27,10 +27,10 @@ function themeConfig($form) {
|
|||
$form->addInput($memos);
|
||||
$memosID = new Typecho_Widget_Helper_Form_Element_Text('memosID', NULL, '1', _t('memosID'));
|
||||
$form->addInput($memosID);
|
||||
|
||||
$doubanID = new Typecho_Widget_Helper_Form_Element_Text('doubanID', NULL, '322dba2a3a27524b97c06d941d9631d153fc', _t('从https://node.wpista.com/获得token'));
|
||||
$form->addInput($doubanID);
|
||||
$twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'));
|
||||
$form->addInput($twikoo);
|
||||
|
||||
$addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('添加head'));
|
||||
$form->addInput($addhead);
|
||||
$tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('统计代码'));
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* 移植自HUGO主题`farallon`原作者`bigfa`
|
||||
* @package farallon
|
||||
* @author 老孙
|
||||
* @version 0.4.1
|
||||
* @version 0.5.0
|
||||
* @link https://imsun.org
|
||||
*/
|
||||
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
|||
<header class="archive--header">
|
||||
<h1 class="post--single__title"><?php $this->title() ?></h1>
|
||||
<?php Typecho_Widget::widget('Widget_Stat')->to($quantity); ?>
|
||||
<h2 class="archive--title__year">共包含 <?php $quantity->publishedPostsNum(); ?> 篇文章</h2>
|
||||
<h2 class="post--single__subtitle">共包含 <?php $quantity->publishedPostsNum(); ?> 篇文章</h2>
|
||||
<?php if ($this->options->showallwords): ?>
|
||||
<h3><?php echo allwords(); ?></h3>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
287
page-douban.php
287
page-douban.php
|
|
@ -11,8 +11,293 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
|||
<h1 class="post--single__title"><?php $this->title() ?></h1>
|
||||
<h2 class="post--single__subtitle">观影数据来源于豆瓣</h2>
|
||||
</header>
|
||||
<div class="site--main">
|
||||
<div class="db--container" data-token="<?php $this->options->doubanID() ?>">
|
||||
<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="game">Game</div>
|
||||
<div class="db--navItem JiEun" data-type="music">Music</div>
|
||||
<div class="db--navItem JiEun" data-type="drama">Drama</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>
|
||||
class APIHandler {
|
||||
constructor(token) {
|
||||
this.ver = "1.0.1";
|
||||
this.type = "movie";
|
||||
this.finished = false;
|
||||
this.paged = 1;
|
||||
this.genre_list = [];
|
||||
this.genre = [];
|
||||
this.subjects = [];
|
||||
this.baseAPI = "https://node.wpista.com/v1/outer/";
|
||||
this.token = token;
|
||||
this._create();
|
||||
}
|
||||
|
||||
<div data-status="watched" class="douban-movie-list doubanboard-list"></div>
|
||||
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) {
|
||||
this.subjects = [...this.subjects, ...data.data];
|
||||
this._renderListTemplate();
|
||||
document.querySelector(".lds-ripple").classList.add("u-hide");
|
||||
} else {
|
||||
this.finished = true;
|
||||
document.querySelector(".lds-ripple").classList.add("u-hide");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_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>
|
||||
</section>
|
||||
<?php $this->need('footer.php'); ?>
|
||||
Loading…
Reference in New Issue