本文记录使用Thyuu/星度主题之后的一些小小的修改，本文的主要内容为添加豆瓣页面的Banner并实现计数，以及添加首页分类。

👇在之前，我已经记录了又见梅林首页最新文章封面图添加以及手机端适配

👇以及为又见梅林新增小年限定主题，为什么是小年限定呢？因为从我记事起我家大部分都是在小年过年，所以我希望增加一个小年限定。

豆瓣Banner

本网站使用了困困鱼为Halo开发的，重构于WP-Douban插件的豆瓣管理插件, 支持在 Console 进行管理以及为主题端提供 /douban 页面路由。提供从豆瓣爬取到的数据并内置模板。原始的模板大概长下面这样，这里使用了Thyuu的豆瓣页面展示效果。

完全是突发奇想想做一个banner。在了解这个插件和页面的大概原理之后，我希望在顶部添加一个可以展示一些例如统计计数、图文等信息的banner，而该页面包含了电影、书籍、音乐等内容，所以我做了一个可以轮播的展示区，具体效果如下：

链接：

您可以在顶部导航菜单点击 豆瓣 进入

效果图

HTML展示：

又见梅林的电影之旅 已经见证了

超过 次荧幕

记得那年我们曾一起
• 想象着漫威和DC宇宙的神秘
• 通过《辛德勒的名单》感受战争与和平
• 从多元化题材讨论本土的女性主义与酷儿影像
• 见证中国科幻电影从《流浪地球》开始改变

又见梅林的阅读之旅 已经修炼了

超过 本典籍

记得那年我们曾一起
• 讨论本雅明对艺术的复制和惊颤体验的思索
• 从客观环境的信息化聊到信息环境的环境化
• 考虑亚文化中的疏离抵抗、仪式、狂欢与收编
• 审视全景监狱中人机关系、数字劳动与自我规训

❮ ❯

👇 统计计数功能根据API提取所在分类的Total总数并输出展示在HTML中

代码实现：

在顶部head插入 <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4814788_onluaeyyg7h.css" /> 实现图标显示；

将下方代码插入在 douban.html 中 <section class="db--container"> 之后

<div class="douban-carousel">
    <div class="douban-slide active">
        <img src="http://img.ryanzm.cn/2025/01/20/678dc63acb38e.jpg" alt="Image 1">
        <div class="douban-text">
            <p><span class="iconfont icon-maisui" style="font-size: 1.3em;"></span>又见梅林的电影之旅<span class="iconfont icon-maisui1" style="font-size: 1.3em;"></span> 已经见证了
            </p>
            <h2>超过 <span id="movie-total"></span> 次荧幕</h2>
            <p>记得那年我们曾一起<br>• 想象着漫威和DC宇宙的神秘<br>• 通过《辛德勒的名单》感受战争与和平<br>• 从多元化题材讨论本土的女性主义与酷儿影像<br>• 见证中国科幻电影从《流浪地球》开始改变</p>
        </div>
    </div>
    <div class="douban-slide">
        <img src="http://img.ryanzm.cn/2025/01/20/678dc6375ba4a.jpg" alt="Image 2">
        <div class="douban-text">
            <p><span class="iconfont icon-maisui" style="font-size: 1.3em;"></span>又见梅林的阅读之旅<span class="iconfont icon-maisui1" style="font-size: 1.3em;"></span> 已经修炼了
            </p>
            <h2>超过 <span id="book-total"></span> 本典籍</h2>
            <p>记得那年我们曾一起<br>• 讨论本雅明对艺术的复制和惊颤体验的思索<br>• 从客观环境的信息化聊到信息环境的环境化<br>• 考虑亚文化中的疏离抵抗、仪式、狂欢与收编<br>• 审视全景监狱中人机关系、数字劳动与自我规训</p>
        </div>
    </div>
    <button class="carousel-button prev" onclick="prevSlide()">&#10094;</button>
    <button class="carousel-button next" onclick="nextSlide()">&#10095;</button>
</div>

<script>
    const slides = document.querySelectorAll('.douban-slide');
    let currentSlide = 0;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index);
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
    }

    setInterval(nextSlide, 8000); // 切换幻灯片时间

    // 调用API中的total总数
    fetch('/apis/api.douban.moony.la/v1alpha1/doubanmovies?type=movie&status=done')
        .then(response => response.json())
        .then(data => {
            const total = data.total;
            document.getElementById('movie-total').textContent = `${total}`;
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });

    fetch('/apis/api.douban.moony.la/v1alpha1/doubanmovies?type=book&status=done')
        .then(response => response.json())
        .then(data => {
            const total = data.total;
            document.getElementById('book-total').textContent = `${total}`;
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
</script>

添加CSS样式

      /* douban */
      .douban-carousel {
          position: relative;
          width: 100%;
          overflow: hidden;
          margin: auto;
          background: black;
          border-radius: 18px;
          height: 580px;
          margin: 0 0 30px 0;
      }

      .douban-slide {
          width: 100%;
          height: 100%;
          display: none;
          position: absolute;
          top: 0;
          left: 0;
      }

      .douban-slide.active {
          display: block;
      }

      .douban-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .douban-slide::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(circle, transparent 10%, rgba(0, 0, 0, 0.8) 100%);
          z-index: 1;
      }

      .douban-text {
          position: absolute;
          bottom: 4em;
          left: 4em;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
          z-index: 2;
      }

      .douban-text h2 {
          color: #D4AF37;
          font-size: 2em;
          margin: 0;
          line-height: 2.5em;
      }

      .douban-text p {
          color: white;
          font-size: 1em;
          margin: 5px 0;
          line-height: 2em;
      }

      .wheat-icon {
          width: 24px;
          height: 24px;
          vertical-align: middle;
          margin: 0 0.5em;
      }

      .carousel-button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background-color: rgba(0, 0, 0, 0.5);
          border: none;
          color: white;
          font-size: 2em;
          cursor: pointer;
          z-index: 3;
          padding: 10px;
          border-radius: 10px;
      }

      .prev {
          left: 10px;
      }

      .next {
          right: 10px;
      }

      @media (max-width: 768px) {
          .carousel-button {
              font-size: 1.2em;
          }

          .douban-carousel {
              height: 380px;
          }

          .douban-text h2 {
              font-size: 1.7em;
          }

          .douban-text p {
              font-size: 0.8em;
          }

          .douban-text {
              bottom: 3em;
              left: 3em;
          }
      }

已经对手机端进行了适配，效果如下：

一些思考

当我做完这个部分之后，我猛然发现，我潜意识里填充的小字内容是我们分手前曾经一起完成过的事情，我花了半年的时间把我最喜欢的漫威和DC宇宙一部一部分享给了你，在我通宵剪片子的时候，你陪我在夜宵的时候一起看了《辛德勒的名单》，我们讨论了本雅明的机械复制下的艺术作品，也吐槽过疏离、重构、弥合、异化、嬗变、范式、延异等等一系列传播学学者酷爱的异化性的写作风格以及理论名词“创新”。

想到这里，尽管已经是分手大半年了，但我猛地发现我正在进行的是我在一次学术会议上老师曾讲过的一个名词——数字哀悼，或者说是数字怀念、数字祭奠。悲伤是一个复杂而摇摆不定的过程。随着时间的推移，我学会独自生活。而数字哀悼正在破坏这一过程，导致人无法从持续的悲伤中解脱，并陷入长期痛苦。就个体而言，个体的数字哀悼无法上升到集体怀念，无法构建大规模的共情网络，但是这种私密的个体叙事不仅深刻揭示个体与逝去回忆之间的被遗忘的关系，使个体重新发现固有的、深层次的脆弱性；而且正在编织针对回忆和遗忘实践的文化结构，以及通过互联网的数字垃圾堆实现仅少数人能够编码和解码的情感生产。在面对这种应对回忆和遗忘的数字实践时，个体能够有机会回到对脆弱的恐惧中，并持续敦促重新定位自我。所以说，数字悼念带来的情感影响是矛盾的，一方面，它让人认识到悲伤和脆弱；另一方面，它又鼓励人在认识这些情感的基础上重新获得认清和遗忘的能力。而这些正是数字悼念和数字怀念无法替代的个体情感后勤功能。

讲到这里，尽管这样的情感体验是私密的，但是，我依旧很好奇你在使用本代码的时候，小字部分会讲述什么故事。

首页分类

首页分类功能我早就想做了！Thyuu/星度给了我们一个非常美丽且实用的分类文章展示部分，但是，在移动端这一横向滑动的体验我觉得并不完美，再加上我的不玩Blog的朋友时常会通过小程序来又见梅林blog看看，但是，文章合集的入口往往隐藏在顶部的下拉菜单中，一来二去引发传播阻隔。另外，注意力有限的观众需要更直观地、带有目的性的选择性阅读。好吧我承认更多的是我的文章内容很繁杂，又有国内摄影、留学记录、有趣的思考、项目、blog修改等等，所以我急需醒目的快捷入口。

PC端效果：

移动端效果：

❗预警：因为我是十足的粉领子文科生（传播学&社会学），代码的事情我纯粹入门，代码非常非常蠢，因为我不会调用blog的分类名称、介绍和封面图片，所以只是一个纯粹的html代码，以后我学习之后再完善吧。

HTML代码

<h5 class="part-title">精选分类</h5>

<div class="index-cat-section">
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/world"><img src="https://cdn.ryanzm.cn/image/ghost/2023/09/0525-1.jpg"
                alt="Category 1" class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/world">
                <h3 class="index-cat-title">身边的见闻</h3>
            </a>
            <p class="index-cat-description">我看到的祖国和反思实践</p>
        </div>
    </div>
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/overseas"><img
                src="https://cdn.ryanzm.cn/image/ghost/2024/04/ed3bf7ba02f2a41989664910e7fb785.jpg" alt="Category 2"
                class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/overseas">
                <h3 class="index-cat-title">路过的风景</h3>
            </a>
            <p class="index-cat-description">在异国他乡的所见所想</p>
        </div>
    </div>
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/research"><img src="https://www.ryanzm.cn/upload/bg-1.jpg"
                alt="Category 3" class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/research">
                <h3 class="index-cat-title">有趣的思考</h3>
            </a>
            <p class="index-cat-description">媒介实践的发现和思索</p>
        </div>
    </div>
    <div class="index-cat-item">
        <a href="https://www.ryanzm.cn/categories/blog"><img
                src="https://www.ryanzm.cn/upload/thumbnails/2024/w800/bg-3.jpg" alt="Category 4"
                class="index-cat-img loaded"></a>
        <div class="index-cat-text">
            <a href="https://www.ryanzm.cn/categories/blog">
                <h3 class="index-cat-title">更新与设计</h3>
            </a>
            <p class="index-cat-description">节气限定与主题更新</p>
        </div>
    </div>
</div>

CSS样式

.part-title {
    line-height: 3rem;
    color: hsl(var(--font-color) / .3);
    font-size: 1.5rem;
}

.index-cat-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;    /* 分类项之间的间隔 */
    margin-bottom: 20px;
}

.index-cat-item {
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;    /* 平滑过渡效果 */
}

.index-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;    /* 过渡效果让模糊变化更平滑 */
}

.index-cat-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    z-index: 10;
}

.index-cat-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0;
}

.index-cat-description {
    font-size: .8rem;
    margin-top: 10px;
    line-height: 1.4;
}


.index-cat-item:hover .index-cat-img {
    filter: blur(5px);    /* 鼠标悬停时模糊图片 */
}

/*.index-cat-item:hover {
  transform: scale(1.05);}  可以增加轻微的放大效果 */


/* 响应式设计：在屏幕宽度小于768px时，每行显示2个分类项 */
@media (max-width: 768px) {
    .index-cat-item {
        width: 48%;
        height: 130px;
        margin-bottom: 5px
    }

    .index-cat-title {
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
    }

    .index-cat-description {
        font-size: .7rem;
        margin-top: 10px;
        line-height: 1.4;
    }

    .part-title {
        line-height: 1.5rem;
        color: hsl(var(--font-color) / .3);
        font-size: 1.2rem;
    }
}

@media (min-width: 769px) {
    .index-cat-item {
        width: 23%;        /* 在电脑端，每行显示四个分类项 */
        height: 180px;
    }
}