Ghost 博客实现豆瓣观影清单

{{#if @custom.douban_movie}}
		<script>
		$(document).ready(function () {
			var temp = { movies : [] }
			$.getJSON('{{ @custom.douban_movie }}',function(r){
				$(r).each(function(){
					temp.movies.push({id : this.id, 
									title : this.subject.title, 
									subtitle : this.subject.card_subtitle, 
									poster: this.subject.pic.large,
									pubdate: this.subject.pubdate[0],
									url: this.subject.url,
									rating: this.subject.rating.value,
									genres: this.subject.genres.join(','),
									star: this.subject.rating.star_count,
									comment: this.comment,
									tags: this.tags.join(','),
									star_time: this.create_time
									})
				})
				$('.movies').html(tmpl('tmpl-movies', temp))
				var gtemp = [];
				var gyear = [];
				$(temp.movies).each(function(){ 
					t = this.genres.split(',');
					if(t.length > 0){
						$(t).each(function(i,d){
							if(gtemp.indexOf(d) == -1){ gtemp.push(d) }
						});
					}else{
					gtemp.push(this.genres) }

					var tyear = this.subtitle.substring(0,4);
					if(gyear.indexOf(tyear) == -1 ){
						gyear.push(tyear)
					}
				});
				$('.genres').html(tmpl('tmpl-genres', gtemp))
				$('.fyear').html(tmpl('tmpl-fyear', gyear.sort(function(a,b){ return b-a }	)))
			})
			
		});
		</script>
	{{/if}}

<!-- 样式代码 -->
<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:150px;margin:0 2% 30px;padding:0;font-size:15px}
    .dfdORB a{text-decoration:none}
    .kMthTr{margin-top:12px;line-height:1.3;max-height:2.6rem;overflow:hidden}
    .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;width: 150px;height: 230px;}
    .HPRth:hover{box-shadow:rgb(48 55 66 / 30%) 0 1rem 2.1rem}
    .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;color:#555;text-decoration:none;padding:0 5px}
    .dvtjjf.active{background:rgba(85,85,85,.1)}
    .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;color: var(--color-content-secondary);}
    .sort-by-item.active{background:rgba(85,85,85,.1)}
    .sort-by-item svg{margin-right:5px}
    .sc-hKFxyN img{max-width:100%!important;height:100%!important;display:block!important;vertical-align:middle!important;margin: 0;padding: 0;}
    .lazyload-wrapper {height: 100%;}
    @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>
<!-- 筛选功能用到的js -->
<script type="text/javascript">
    function search(e) {
        document.querySelectorAll('.dfdORB').forEach(item => item.classList.add('hide'));
        document.querySelector(`.dvtjjf.active[data-search="${e.target.dataset.search}"]`)?.classList.remove('active');
        if(e.target.dataset.value) {
            e.target.classList.add('active');
        }
        const searchItems = document.querySelectorAll('.dvtjjf.active');
        const attributes = Array.from(searchItems, searchItem => {
            const property = `data-${searchItem.dataset.search}`;
            const logic = searchItem.dataset.method === 'contain' ? '*' : '^';
            const value = searchItem.dataset.method === 'contain' ? `${searchItem.dataset.value}` : searchItem.dataset.value;
            return `[${property}${logic}='${value}']`;
        });
        const selector = `.dfdORB${attributes.join('')}`;
        document.querySelectorAll(selector).forEach(item => item.classList.remove('hide'));
    }
    window.addEventListener('click', function(e) {
        if(e.target.classList.contains('sc-gtsrHT')) {
            e.preventDefault();
            search(e);
        }
    });
    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>