给博客增加一个观影页面

前言

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

项目

所使用的的项目地址
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;
   }

   如此即可大功告成了