超简单solitude主题添加电子木鱼页面

超超超简单的电子木鱼页创建教程，使用deepseek来完成代码部分。

一、创建木鱼单页

话不多说教程直接开始，首先我们创建一个页面，终端输入hexo new page muyu

，此时会创建一个muyu文件夹，且内有index.md文件，大致目录在hexo\source\muyu。

二、修改目标文件

我们打开muyu目录下的index.md文件，在头部下方输入代码：

{% raw %}
    <style>
        #page {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        #muyu-box {
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 70vh;
            margin-top: 20px;
            overflow: hidden;
            -webkit-box-shadow: 0 8px 16px -4px rgba(44,45,48,0.047);
            box-shadow: 0 8px 16px -4px rgba(44,45,48,0.047);
            padding: 2rem 2.5rem;
            border-radius: 12px;
            border: 1px solid #e3e8f7;
            -webkit-align-self: flex-start;
            align-self: flex-start;
            -ms-flex-item-align: start;
            -webkit-animation: slide-in .6s .1s backwards;
            animation: slide-in .6s .1s backwards
        }

        #muyu-container {
            position: relative;
            cursor: pointer;
            transition: transform 0.1s;
        }

        #muyu-container:active {
            transform: scale(0.95);
        }
        .float-text {
            right: -70px;
            top: 20%;
            transform: translateY(-50%);
            position: absolute;
            font-size: 20px;
            opacity: 0;
            animation: floatUp 1s ease-out;
            pointer-events: none;
        }
        .muyu-title {
            position: absolute;
            color: #4c4948;
            font-size: 1.5rem;
            margin: 30px 0 0 30px;
            z-index: 1;
        }
        #counter {
            font-size: 24px;
            color: #4c4948;
            margin: 20px 0;
            transition: color 0.3s;
        }
        .muyu-keytip {
            margin-top: 30px;
            font-size: .7rem;
            color: #a2afb9;
        }

        .btn-group {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .control-btn {
            background: #4c4948;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .control-btn.red-btn {
            background: #ff4d4d;
        }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }

        .control-btn:active {
            transform: translateY(0);
        }

        @keyframes floatUp {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(-100px); opacity: 0; }
        }
    </style>
    <div class="article-container muyu-title">电子木鱼</div>
    <div id="muyu-box">
    
        <div id="muyu-container">
            <svg width="157" height="126" viewBox="0 0 247 197">
                <path fill="#4c4948" d="M109.12 6.53C124.09 4.27 139.37 2.82 154.47 4.79c18.6 2.35 36.91 9.23 51.55 21.1 10.99 8.88 19.15 20.74 25.53 33.24 6.26 13.12 9.61 27.4 12.37 41.61-18.43 4.01-37.34 5.02-56.15 5.46-1.56-6.18-4.65-12.26-10.03-15.95-5.74-4.29-13.76-6.06-20.48-3.07-11.27 4.51-17.64 18.04-14.63 29.67 2.49 10.54 12.34 19.26 23.42 18.84 10.13-.72 18.56-8.88 21.14-18.47 5.55-.49 11.13-.59 16.7-.9 13.68-1.06 27.25-3.18 40.93-4.34.7 9.3 1.31 18.77-.71 27.96-1.79 9.08-4.88 18.13-10.72 25.45-8.51 11.16-21.24 18.25-34.38 22.59-11.59 3.88-23.81 5.43-35.96 6.31-22.65 1.58-45.41 1.33-68.06-.1-20.2-1.38-40.44-3.41-60.2-8.02-6.88-1.63-13.72-3.7-20.02-6.96-6.19-3.28-10.54-9.5-12.05-16.29-3.2-11.51.28-23.83 6.48-33.71 5.41-9.46 18.41-12.33 21.61-23.38 5.69-15.82 7.47-32.43 13.06-48.01 4.69-12.46 11.47-24.56 21.95-33.07C77.25 14.19 93.24 9.04 109.12 6.53z"/>
            </svg>
        </div>
    <div id="counter">功德 +0</div>
    
    <div class="btn-group">
        <button id="auto-btn" class="control-btn">开始自动敲击</button>
        <button id="reset-btn" class="control-btn red-btn">功德清零</button>
    </div>
    
    <div class="muyu-keytip">按下左键积攒功德（每日上限1000），上方按钮可自动敲击哦</div>

    <audio id="sound">
        <source src="https://muyu.ikisslover.com/video/sound.mp3" type="audio/mpeg">
    </audio>
    </div>
    <script>
    // 使用立即执行函数包裹全部逻辑，避免全局变量污染
    (function() {
        const MAX_COUNT = 1000;
        let count = 0;
        let autoClicker = null;
        
        // DOM元素引用
        const container = document.getElementById('muyu-container');
        const counter = document.getElementById('counter');
        const sound = document.getElementById('sound');
        const autoBtn = document.getElementById('auto-btn');
        const resetBtn = document.getElementById('reset-btn');
    
        // 先移除旧监听器避免重复绑定（防御式编程）
        container.removeEventListener('click', handleClick);
        autoBtn.removeEventListener('click', autoHandler);
        resetBtn.removeEventListener('click', resetHandler);
    
        // 更新计数器显示
        function updateCounter() {
            counter.textContent = count >= MAX_COUNT 
                ? "✨ 今日功德已满 ✨" 
                : `功德 +${count}`;
            
            counter.style.color = count >= MAX_COUNT ? "#ff4d4d" : "#4c4948";
        }
    
        // 浮动文字创建
        function createFloatText(text, color = "#4c4948", offset = {x: 0, y: 0}) {
            const floatText = document.createElement('div');
            floatText.className = 'float-text';
            floatText.textContent = text;
            floatText.style.color = color;
            container.appendChild(floatText);
            setTimeout(() => floatText.remove(), 1000);
        }
    
        // 点击处理
        function handleClick(e) {
            if (count >= MAX_COUNT) return;
            
            count++;
            updateCounter();
            
            sound.currentTime = 0;
            sound.play();
            
            createFloatText('功德 +1');
            
            // 点击动画
            container.style.transform = 'scale(0.95)';
            setTimeout(() => container.style.transform = 'scale(1)', 100);
        }
    
        // 自动敲击处理器
        function autoHandler() {
            if (!autoClicker) {
                autoClicker = setInterval(() => {
                    if (count < MAX_COUNT) {
                        handleClick();
                    } else {
                        clearInterval(autoClicker);
                        autoClicker = null;
                        autoBtn.textContent = '开始自动敲击';
                    }
                }, 800);
                autoBtn.textContent = '停止自动敲击';
            } else {
                clearInterval(autoClicker);
                autoClicker = null;
                autoBtn.textContent = '开始自动敲击';
            }
        }
    
        // 重置处理器
        function resetHandler() {
            count = 0;
            updateCounter();
            
            createFloatText('已重置', '#ff4d4d');
            
            if (autoClicker) {
                clearInterval(autoClicker);
                autoClicker = null;
                autoBtn.textContent = '开始自动敲击';
            }
        }
    
        // 事件绑定
        container.addEventListener('click', handleClick);
        autoBtn.addEventListener('click', autoHandler);
        resetBtn.addEventListener('click', resetHandler);
    })(); // IIFE立即执行
    </script>

{% endraw %}