page-douban.hbs

{{!< default}} {{! Everything inside the #post tags pulls data from the post }} {{#post}} <article class="post entry">
	{{> "posts/feature"}}
	<header class="entry-header">
		<h1 class="entry-title">{{title}}</h1>
		<div class="entry-meta">
			{{> "entry-meta" }}
		</div>
	</header>
	<div class="entry-content">
		{{content}}
		{{> 'posts/btn'}}
		<style>




			.gFnzgG,
			.gFnzgG * {
				box-sizing: border-box
			}

			.fIuTG {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -2%;
				background: 0 0;
				line-height: 100%;
				justify-content: center;
			}

			.dfdORB {
				width: 160px;
				margin: 0 2% 30px;
				padding: 0;
				font-size: 15px;
				padding: 5px;
				border-radius: var(--radius);
				transition: var(--transition);
			}

			.dfdORB a {
				text-decoration: none !important;
			}

			.kMthTr {
				margin-top: 12px;
				line-height: 1.3;
				max-height: 2.6rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.eysHZq {
				display: flex;
				-webkit-box-align: center;
				align-items: center;
				margin-top: 5px;
				min-height: 16px;
				line-height: 1;
				-webkit-box-align: center;
			}

			.HPRth {
				position: relative;
				min-height: 87px;
				overflow: hidden;
				color: transparent;
				height: 200px;
				border-radius: var(--radius);
			}

			.HPRth:hover {
			}

			.jcTaHb {
				display: flex;
				-webkit-box-align: center;
				align-items: center
			}

			.lhtmRw {
				margin-right: 1px;
				width: 12px;
				height: 12px;
				color: #fccd59
			}

			.gaztka {
				margin-right: 1px;
				width: 12px;
				height: 12px;
				color: #eee
			}

			.iibjPt {
				margin-left: 5px;
				color: #555;
				font-size: 14px
			}

			.jvCTkj {
				margin-bottom: 10px
			}

			.kEoOHR {
				display: inline-block;
				margin-right: 15px;
				text-decoration: none;
				color: #157efb
			}

			.dvtjjf {
				display: inline-block;
				text-decoration: none !important;
				padding: 0 5px;
				color: var(--primary);
				border-radius: var(--radius-small);
			}

			.dvtjjf.active {
				background: var(--primary-dark);
				color: var(--button-text);
			}

			.hide {
				display: none
			}

			.sort-by {
				text-align: right;
				margin-top: -15px
			}

			.sort-by-item {
				margin-left: 10px;
				padding: 0 5px;
				line-height: 20px;
				text-decoration: none !important;
				color: var(--primary);
				border-radius: var(--radius-small);
			}

			.sort-by-item.active {
				background: var(--primary-dark);
				color: var(--button-text);
			}

			.sort-by-item svg {
				margin-right: 5px
			}

			.sc-hKFxyN img {
				display: block !important;
				vertical-align: middle !important;
				margin: 0;
				padding: 0;
				width: 150px;
				border-radius: var(--radius);
			}

			.lazyload-wrapper {
				height: 100%;
			}

			.dfdORB a::before {
				content: attr(data-cm);
				position: absolute;
				color: red;
				z-index: 11;
				right: -5px;
				top: -10px;
			}

			.dfdORB:hover{
				box-shadow: var(--box-shadow);
				border-color:var(--primary);
			}
			
			.dvtjjf:hover {
				outline: thin dotted;
			}

			@media(min-width:1024px) {
				.lg\:col-span-6 {
					grid-column: span 6/span 6 !important
				}

				.lg\:col-start-2 {
					grid-column-start: 2 !important
				}
			}

			@media (max-width:550px) {

				.jcTaHb,
				.sc-bdnxRM {
					display: none
				}
			}
		
		
		
		</style>
		<script type="text/javascript">
			function sort(e) {
				const sortBy = e.target.dataset.order;
				const style = document.createElement('style');
				style.classList.add('sort-order-style');
				document.querySelector('style.sort-order-style')?.remove();
				document.querySelector('.sort-by-item.active')?.classList.remove('active');
				e.target.classList.add('active');
				if (sortBy === 'rating') {
					const movies = Array.from(document.querySelectorAll('.dfdORB'));
					movies.sort((movieA, movieB) => {
						const ratingA = parseFloat(movieA.dataset.rating) || 0;
						const ratingB = parseFloat(movieB.dataset.rating) || 0;
						if (ratingA === ratingB) {
							return 0;
						}
						return ratingA > ratingB ? -1 : 1;
					});
					const stylesheet = movies.map((movie, idx) => `.dfdORB[data-rating="${movie.dataset.rating}"] { order: ${idx}; }`).join('\r\n');
					style.innerHTML = stylesheet;
					document.body.appendChild(style);
				}
			}
			window.addEventListener('click', function (e) {
				if (e.target.classList.contains('sort-by-item')) {
					e.preventDefault();
					sort(e);
				}
			});
		</script>
		<div class="lg:col-start-2 lg:col-span-6">
			<div class="sc-ksluID gFnzgG">
				<div class="jvCTkj sort-by">
					<a href="javascript:void 0;" class="sort-by-item active  hint--bottom" aria-label="按我的观看时间排序" data-order="time">观看时间排序</a>
					<a href="javascript:void 0;" class="sort-by-item hint--bottom" aria-label="按我的评分排序" data-order="rating">评分排序</a>
				</div>
				<div class="sc-dIsUp fIuTG movies">
				</div>
			</div>
		</div>
	</div>
	</article>

	{{/post}}

	<script type="text/x-tmpl" id="tmpl-movies">
		{% for (var i=0; i<o.douban.length; i++) { %}
		<div 
			class="sc-gKAaRy dfdORB hint--top hint--medium" 
			data-year="{%= typeof(o.douban[i].pubdate) == "undefined" ? "":o.douban[i].pubdate.substring(0,4) %}" 
			data-star="{%= o.douban[i].star %}"
			data-rating="{%= o.douban[i].rating %}"
			data-genres="{%= o.douban[i].genres %}"  
			aria-label="{%= o.douban[i].comment %}" 
			data-type="{%= o.douban[i].type %}"
		>
			<a rel="link" href="{%= o.douban[i].url %}" target="_blank" >
			<div class="sc-hKFxyN HPRth">
				<div class="lazyload-wrapper">
					{{!-- https://iph.href.lu/150x220?text=Loading&fg=666666&bg=cccccc --}}
				<img src="{%= o.douban[i].poster %}" data-src="{%= o.douban[i].poster %}" referrer-policy="no-referrer" loading="lazy" alt="{%= o.douban[i].title %}" width="150" height="220">
				</div>
			</div>
			<div class="sc-iCoGMd kMthTr">{%= o.douban[i].title %}</div>
			<div class="sc-fujyAs eysHZq">
				<span class="sc-jSFjdj jcTaHb">

					{% for (var b=0; b<5; b++) { %}
					<svg viewBox="0 0 24 24" width="24" height="24" class="sc-dlnjwi {% if (b < o.douban[i].star) { %} lhtmRw {% }else{ %} gaztka {% } %} ">
						<path fill="none" d="M0 0h24v24H0z"></path>
						<path fill="currentColor" d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"></path>
					</svg>
					{% } %}
				</span>
				<span class="sc-pNWdM iibjPt">我评：{%= o.douban[i].rating %}</span>
			</div>
			</a>
		</div>
		{% } %}

	</script>
	<script type="text/x-tmpl" id="tmpl-genres">
		<a href="javascript:void 0;" class="sc-gtsrHT kEoOHR" data-search="genres" data-method="contain" data-value="">全部</a>
		{% for (var i=0; i<o.length; i++) { %}
		<a href="javascript:void 0;" class="sc-gtsrHT dvtjjf" data-search="genres" data-method="contain" data-value="{%= o[i] %}">{%= o[i] %}</a>
		{% } %}
	</script>
	<script type="text/x-tmpl" id="tmpl-fyear">
		<a href="javascript:void 0;" class="sc-gtsrHT kEoOHR" data-search="year" data-method="equal" data-value="">全部</a>
		{% for (var i=0; i<o.length; i++) { %}
		<a href="javascript:void 0;" class="sc-gtsrHT dvtjjf" data-search="year" data-method="equal" data-value="{%= o[i] %}">{%= o[i] %}</a>
		{% } %}
	</script>


	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-JavaScript-Templates/3.20.0/js/tmpl.min.js"></script>	
	<script>
		$(document).ready(function () {
			var temp = { douban: [], books: [] }
			$.when(
				{{!-- $.getJSON('{{ @custom.douban_book }}'),
				$.getJSON('{{ @custom.douban_movie }}')--}}

			$.getJSON('https://raw.githubusercontent.com/rebron1900/doumark-action/master/data/neodb/book.json'),
			$.getJSON('https://raw.githubusercontent.com/rebron1900/doumark-action/master/data/neodb/movie.json')

		).done(function (b, m) {  // 或者也可以使用 ".done"
			$(m[0].data).each(function (i, v) {
				temp.douban.push({
					id: this.item.uuid,
					title: this.item.title,
					subtitle: this.item.display_title,
					poster: this.item.cover_image_url,
					pubdate: this.created_time,
					url: 'https://neodb.social' + this.item.url,
					rating: this.rating_grade == null ? '无':this.rating_grade/2,
					genres: this.tags.join(','),
					star: this.item.rating / 2,
					comment: this.comment_text,
					tags: this.tags.join(','),
					star_time: this.created_time,
					type: 'movie'
				})
			})
			$(b[0].data).each(function () {
				temp.douban.push({
					id: this.item.uuid,
					title: this.item.title,
					subtitle: this.item.display_title,
					poster: this.item.cover_image_url,
					pubdate: this.created_time,
					url: 'https://neodb.social' + this.item.url,
					rating: this.rating_grade == null ? '无':this.rating_grade/2,
					genres: this.tags.join(','),
					star: this.item.rating / 2,
					comment: this.comment_text,
					tags: this.tags.join(','),
					star_time: this.created_time,
					type: 'book'
				})
			})

			$('.movies').html(tmpl('tmpl-movies', temp))

			let images = document.querySelectorAll(".lazyload");
			let observer = new IntersectionObserver(entries => {
				entries.forEach(item => {
					if (item.isIntersecting) {
						item.target.src = item.target.dataset.src; // 开始加载图片,把data-src的值放到src
						observer.unobserve(item.target); // 停止监听已开始加载的图片
					}
				});
			},
				{
					rootMargin: "0px 0px 500px 0px" // 交叉过视图的100，才开始派发事件
				}
			);
			images.forEach(item => observer.observe(item));
		});			
		});
	</script>