前言#

使用插件构建的观影页面有点不那么喜欢，所以我决定自己写一个。

项目#

所使用的的项目地址 https://github.com/bigfa/douban-cf-worker

步骤#

1. 首先根据https://github.com/bigfa/douban-cf-worker 中的步骤创建接口

2. 在博客的根目录下新建一个名为 movies 的文件夹，然后在 movies 文件夹下新建一个名为 index.md 的文件，在文件中写入以下内容：

---
title: 观影
date: 2024-09-11 13:00:56
---
<link rel="stylesheet" href="/movies/movies.css">
<div class="masonry" id="movieContainer">
    <!-- 电影项目将被 JavaScript 动态添加到这里 -->
</div>
<script defer src="/movies/movies.js"></script>

3. 新建一个movies.js文件，在文件中写入以下内容：

    // 创建电影项目的HTML
    function createMovieItem(movie) {
        return `
            <div class="item">
                <div class="image-container">
                    <img src="${movie.poster}" 
                         alt="${movie.name}" 
                         onerror="this.onerror=null; this.src='placeholder.jpg';">
                </div>
                <div class="item-content">
                    <div class="item-title">
                        <a href="${movie.link}" target="_blank" rel="noopener noreferrer">${movie.name}</a>
                    </div>
                    <div class="item-info">${movie.card_subtitle}</div>
                  
                    <div class="item-score">豆瓣评分: ${movie.douban_score}</div>
                </div>
            </div>
        `;
    }

    // 从API获取数据并渲染页面
    async function fetchAndRenderMovies() {
        try {
            const response = await fetch('https://db.imsun.org/list');
            const data = await response.json();

            // 按豆瓣评分排序（降序）
            data.results.sort((a, b) => b.douban_score - a.douban_score);

            const container = document.getElementById('movieContainer');
            data.results.forEach(movie => {
                container.innerHTML += createMovieItem(movie);
            });
        } catch (error) {
            console.error('Error fetching movie data:', error);
            document.getElementById('movieContainer').innerHTML = '<p>加载电影数据时出错，请稍后再试。</p>';
        }
    }

    // 页面加载时获取并渲染电影数据
    fetchAndRenderMovies();

4. 在 movies 文件夹下新建一个名为 movies.css 的文件，在文件中写入以下内容：

 
.masonry {
    column-count: 4;
    column-gap: 20px;
}
@media (max-width: 1200px) {
    .masonry {
        column-count: 3;
    }
}
@media (max-width: 900px) {
    .masonry {
        column-count: 2;
    }
}
@media (max-width: 600px) {
    .masonry {
        column-count: 1;
    }
}
.item {
    position: relative;
    overflow: hidden;
}

.image-container {
    position: relative;
    width: 100%;
    padding-top: 150%; /* 2:3 宽高比 */
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.item-content {
    position: absolute;
    font-size: 12px;
    bottom: 0;
    left: 0;
    width: auto;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.item:hover .item-content {
    transform: translateY(0);
}

.item:hover .image-container img {
    transform: scale(1.1);
}

.item-title a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

.item-title a:hover {
    text-decoration: underline;
}

如此即可大功告成了