Typecho Void主题美化

头图跟随鼠标移动

其实俺就是薅的b站头图代码 ，实现起来也不复杂，在VOID/includes/banner.php最后那里的<?php elseif($this->is('index')): ?>条件判断中添加一段脚本就行:

    <?php elseif($this->is('index')): ?>
        <?php 
            $title = Helper::options()->title; 
            if($setting['indexBannerTitle']!='') $title = $setting['indexBannerTitle'];
            $subtitle = Helper::options()->description;
            if($setting['indexBannerSubtitle']!='') $subtitle = $setting['indexBannerSubtitle'];
        ?>
        <div class="banner-title index<?php if(!empty($banner)) echo ' force-normal'; ?>">
            <h1 class="post-title"><span class="brand"><span><?php echo $title; ?></span></span><br><span class="subtitle"><?php echo $subtitle; ?></span></h1>
        </div>

        <!-- 脚本开始 -->
        <script>
            detect = document.querySelector(".index");
            banner_img = document.querySelector("#banner > img");
            banner_img.style.width = "110%";
            banner_img.style.left = "-5%";

            detect.addEventListener("mouseenter", function(n) {
                this.x = n.clientX, banner_img.style.transition = "none"
            });
            
            detect.addEventListener("mousemove", function(n) {
                this._x = n.clientX;
                n = 0 - (this._x - this.x) / -30;
                banner_img.style.transform = "translate(" + n + "px, 0px)"
            });
            detect.addEventListener("mouseleave", function(n) {
                banner_img.style.transition = ".3s", banner_img.style.transform = "translate(0,0)"
            });
        </script>
        <!-- 脚本结束 -->

    <?php endif; ?>
</div>

点击头图放大功能

在主题css中添加：

#scrollButton {
    position: absolute;
    left: 50%;
    bottom: 10px;
    color: white;
    transform: translateX(-50%);
}

#scrollButton:hover {
    filter: drop-shadow(2px 5px 6px white);
}

#scrollButton.rotated {
    transform: rotateX(180deg);
    /* Rotates the button 180 degrees around the X-axis */
    transition: transform 0.5s ease;
    /* Smooth transition for rotation */
}

.lazy-wrap:not(.no-banner) {
    min-height: 0vh;
    filter: brightness(1);
    transition: min-height 0.5s ease, filter 1s ease;
}

类似跟随鼠标移动效果，在banner.php的<?php elseif ($this->is('index')): ?>块中加入一段代码：

        <?php if (!Utils::isMobile()): ?>

            <div id="scrollButton" aria-label="Scroll Down">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white" height="15px"
                    width="15px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve">
                    <path id="XMLID_225_"
                        d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393  c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393  s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z" />
                </svg>
            </div>
            <script>
                document.getElementById('scrollButton').addEventListener('click', function () {
                    var lazyWrap = document.querySelector('.lazy-wrap:not(.no-banner)');
                    var button = document.getElementById('scrollButton');

                    if (lazyWrap) {
                        lazyWrap.style.minHeight = lazyWrap.style.minHeight === '100vh' ? '' : '100vh';
                        lazyWrap.style.filter = lazyWrap.style.filter === 'brightness(1.3)' ? '' : 'brightness(1.3)';
                    }

                    // Toggle the 'rotated' class on the button
                    button.classList.toggle('rotated');
                });
            </script>

        <?php endif; ?>

如果想让移动端也显示此效果，把最外层的if判断注释掉就ok啦！