前提#

之前博客里面一直都有电子木鱼，但是之前是塞了一个单独的网页界面，文件都是分散开的，加载也很慢，主要的还是影响博客的加载速度，于是我使用豆包AI基于52JS大佬的项目大改了一下，目前不需要文件，只需要将代码嵌入到界面的index.md文件里面即可搞定电子木鱼界面。
Demo#

本站已经内嵌此项目，可以去康康哦~
{% link 电子木鱼,酥米的小站,https://www.sumi233.top/fish/ %}
优势#

不需要引用文件
尽量修复第一次点进去无法正常使用的问题（还是有概率出现用不了的问题，不过刷新一下就好了）
适配anzhiyu深色亮色模式，会跟着一起切换
总代码少，便于博客加载
创建界面#

可以先使用指令单独创建一个电子木鱼的页面
hexo new pages "页面名称"
然后使用工具编辑“页面名称”/index.md
代码#

代码如下：
1
<!-- 隔离容器 - 确保样式不冲突 -->
2
<div id="fish-container" style="all: initial; display: block; margin: 20px auto; max-width: 600px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
3
  <div class="centerContent">
4
    <div id="top">
5
      <div class="score">
6
        <div class="count">0</div>
7
        <div class="subtitle">功德</div>
8
      </div>
9
    </div>
10
    <div id="center">
11
      <svg class="myFish" width="157pt" height="126pt" viewbox="0 0 247 197" version="1.1" xmlns="http://www.w3.org/2000/svg">
12
        <g id="fish-svg">
13
          <path class="fish-path" d=" M 109.12 6.53 C 124.09 4.27 139.37 2.82 154.47 4.79 C 173.07 7.14 191.38 14.02 206.02 25.89 C 217.01 34.77 225.17 46.63 231.55 59.13 C 237.81 72.25 241.16 86.53 243.92 100.74 C 225.49 104.75 206.58 105.76 187.77 106.20 C 186.21 100.02 183.12 93.94 177.74 90.25 C 172.00 85.96 163.98 84.19 157.26 87.18 C 145.99 91.69 139.62 105.22 142.63 116.85 C 145.12 127.39 154.97 136.11 166.05 135.69 C 176.18 134.97 184.61 126.81 187.19 117.22 C 192.74 116.73 198.32 116.63 203.89 116.32 C 217.57 115.26 231.14 113.14 244.82 111.98 C 245.52 121.28 246.13 130.75 244.11 139.94 C 242.32 149.02 239.23 158.07 233.39 165.39 C 224.88 176.55 212.15 183.64 199.01 187.98 C 187.42 191.86 175.20 193.41 163.05 194.29 C 140.40 195.87 117.64 195.62 94.99 194.19 C 74.79 192.81 54.55 190.78 34.79 186.17 C 27.91 184.54 21.07 182.47 14.77 179.21 C 8.58 175.93 4.23 169.71 2.72 162.92 C -0.48 151.41 3.00 139.09 9.20 129.21 C 14.61 119.75 27.61 116.88 30.81 105.83 C 35.50 90.01 37.28 73.40 42.87 57.82 C 47.56 45.36 54.34 33.26 64.82 24.75 C 77.25 14.19 93.24 9.04 109.12 6.53 Z"></path>
14
        </g>
15
      </svg>
16
    </div>
17
    <div id="bottom">
18
      <div class="keyTips">
19
        <key>点击</key>积攒功德
20
        <span id="autoClick" class="autoClick">自动点击</span>
21
      </div>
22
      <div class="leftRight">
23
        <div class="left">敲电子木鱼，见机甲佛祖，修赛博真经。</div>
24
        <div class="right">
25
          <a href="https://github.com/52js" class="textButton">
26
            <div class="text">@52js & Supermini233</div>
27
          </a>
28
        </div>
29
      </div>
30
    </div>
31
  </div>
32

33
  <style>
34
    /* 基础样式 - 确保优先级 */
35
    #fish-container {
36
      --text-color: #eee;
37
      --bg-color: #111;
38
      --sub-color: #aaa;
39
      --fish-color: #eee;
40
      --key-bg: #444;
41
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
42
      background: var(--bg-color) !important;
43
      color: var(--text-color) !important;
44
      padding: 20px !important;
45
      transition: background-color 0.3s ease, color 0.3s ease !important;
46
    }
47

48
    /* 适配Anzhiyu亮色模式 */
49
    html[data-theme="light"] #fish-container,
50
    body.light #fish-container {
51
      --text-color: #333;
52
      --bg-color: #f5f5f5;
53
      --sub-color: #666;
54
      --fish-color: #333;
55
      --key-bg: #ddd;
56
    }
57

58
    /* 核心样式 */
59
    #fish-container .centerContent {
60
      width: 100% !important;
61
      min-height: 300px !important;
62
      display: flex !important;
63
      flex-direction: column !important;
64
      justify-content: space-between !important;
65
      padding: 1rem 1rem !important;
66
    }
67

68
    #fish-container .score {
69
      font-family: "Helvetica Neue", sans-serif !important;
70
      text-align: center !important;
71
      width: 100% !important;
72
      margin: 20px 0 !important;
73
    }
74

75
    #fish-container .count {
76
      text-align: center !important;
77
      font-size: 6rem !important;
78
      line-height: 1 !important;
79
      transition: transform 0.1s ease !important;
80
      color: var(--text-color) !important;
81
    }
82

83
    #fish-container .subtitle {
84
      font-size: 1.5rem !important;
85
      color: var(--sub-color) !important;
86
      margin-top: 10px !important;
87
    }
88

89
    #fish-container #center {
90
      display: flex !important;
91
      justify-content: center !important;
92
      align-items: center !important;
93
      margin: 20px 0 !important;
94
      position: relative !important;
95
    }
96

97
    #fish-container .myFish {
98
      cursor: pointer !important;
99
      margin: 0 auto !important;
100
      pointer-events: auto !important;
101
      transition: transform 0.1s ease !important;
102
    }
103

104
    #fish-container .fish-path {
105
      fill: var(--fish-color) !important;
106
      opacity: 1.00 !important;
107
      transition: fill 0.3s ease !important;
108
    }
109

110
    #fish-container #bottom {
111
      color: var(--sub-color) !important;
112
      font-size: 0.9rem !important;
113
      padding: 0 5px !important;
114
      text-align: center !important;
115
    }
116

117
    #fish-container .keyTips {
118
      display: flex !important;
119
      justify-content: center !important;
120
      align-items: center !important;
121
      margin-bottom: 15px !important;
122
    }
123

124
    #fish-container .keyTips key {
125
      color: var(--text-color) !important;
126
      background-color: var(--key-bg) !important;
127
      margin: 0.3rem 0.45rem !important;
128
      border-radius: 0.3rem !important;
129
      padding: 0.2rem 0.5rem !important;
130
      font-size: 0.7rem !important;
131
    }
132

133
    #fish-container .leftRight {
134
      display: flex !important;
135
      justify-content: space-between !important;
136
      align-items: center !important;
137
    }
138

139
    #fish-container .left {
140
      font-size: 12px !important;
141
    }
142

143
    #fish-container .textButton {
144
      color: var(--sub-color) !important;
145
      text-decoration: none !important;
146
      transition: color 0.2s ease !important;
147
    }
148

149
    #fish-container .textButton:hover {
150
      color: var(--text-color) !important;
151
    }
152

153
    #fish-container #autoClick {
154
      cursor: pointer !important;
155
      margin-left: 10px !important;
156
      transition: all 0.2s ease !important;
157
    }
158

159
    #fish-container #autoClick.confirm {
160
      color: var(--text-color) !important;
161
      text-decoration: underline !important;
162
    }
163

164
    #fish-container .subtitleCountTip {
165
      position: absolute !important;
166
      color: var(--text-color) !important;
167
      animation: float 1s forwards !important;
168
      opacity: 0 !important;
169
      font-size: 16px !important;
170
    }
171

172
    @keyframes float {
173
      from { transform: translateY(0); opacity: 1; }
174
      to { transform: translateY(-30px); opacity: 0; }
175
    }
176

177
    /* 响应式调整 */
178
    @media (max-width: 480px) {
179
      #fish-container .count {
180
        font-size: 4rem !important;
181
      }
182
    }
183
  </style>
184

185
  <script src="https://cdn.sumi233.top/npm/howler@2.2.3/dist/howler.min.js"></script>
186
  <script>
187
    // 主题变化时更新样式
188
    function updateTheme() {
189
      const container = document.getElementById('fish-container');
190
      if (!container) return;
191

192
      // 触发重绘
193
      container.style.display = 'none';
194
      setTimeout(() => {
195
        container.style.display = 'block';
196
      }, 0);
197
    }
198

199
    // 监听主题变化事件
200
    if (window.matchMedia) {
201
      const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
202
      darkModeMedia.addEventListener('change', updateTheme);
203
    }
204

205
    // 监听DOM变化（Anzhiyu主题切换时会改变data-theme属性）
206
    const observer = new MutationObserver((mutations) => {
207
      mutations.forEach(mutation => {
208
        if (mutation.attributeName === 'data-theme') {
209
          updateTheme();
210
        }
211
      });
212
    });
213

214
    observer.observe(document.documentElement, { attributes: true });
215

216
    // 初始化木鱼功能
217
    function initFish() {
218
      const maxRetries = 10;
219
      let retries = 0;
220

221
      function tryInit() {
222
        const container = document.getElementById('fish-container');
223
        const countElement = container.querySelector('.count');
224
        const myFishElement = container.querySelector('.myFish');
225
        const centerElement = container.querySelector('#center');
226
        const autoClickElement = container.querySelector('#autoClick');
227

228
        if (!countElement || !myFishElement || !centerElement || !autoClickElement) {
229
          retries++;
230
          if (retries < maxRetries) {
231
            setTimeout(tryInit, 100);
232
            return;
233
          } else {
234
            console.error('无法加载电子木鱼元素');
235
            return;
236
          }
237
        }
238

239
        let count = 0;
240
        let countFlag = false;
241
        let autoClick = false;
242
        let autoClickInterval = null;
243

244
        try {
245
          const saved = localStorage.getItem('count');
246
          count = saved ? Number(saved) : 0;
247
        } catch (e) {
248
          count = 0;
249
        }
250
        countElement.textContent = count;
251

252
        function startAnimate() {
253
          countElement.style.transform = 'scale(1.1)';
254
          myFishElement.style.transform = 'scale(0.95)';
255
          const tip = document.createElement('div');
256
          tip.className = 'subtitleCountTip';
257
          tip.textContent = '功德 + 1';
258
          centerElement.appendChild(tip);
259
          setTimeout(() => tip.remove(), 1000);
260
        }
261

262
        function initAnimate() {
263
          countElement.style.transform = 'scale(1)';
264
          myFishElement.style.transform = 'scale(1)';
265
        }
266

267
        function counter() {
268
          countFlag = true;
269
          count++;
270
          countElement.textContent = count;
271
          startAnimate();
272
          try {
273
            localStorage.setItem('count', count);
274
          } catch (e) {
275
            console.log('无法保存到本地存储');
276
          }
277
        }
278

279
        myFishElement.addEventListener('click', counter);
280
        myFishElement.addEventListener('mousedown', () => {
281
          setTimeout(initAnimate, 200);
282
        });
283

284
        document.addEventListener('keyup', (e) => {
285
          if (e.key === ' ') {
286
            e.preventDefault();
287
            if (!countFlag) counter();
288
          }
289
        });
290

291
        document.addEventListener('keydown', (e) => {
292
          if (e.key === ' ') {
293
            e.preventDefault();
294
            countFlag = false;
295
            initAnimate();
296
          }
297
        });
298

299
        autoClickElement.addEventListener('click', () => {
300
          autoClick = !autoClick;
301
          if (autoClick) {
302
            autoClickElement.classList.add('confirm');
303
            autoClickInterval = setInterval(() => {
304
              counter();
305
              setTimeout(initAnimate, 200);
306
            }, 500);
307
          } else {
308
            autoClickElement.classList.remove('confirm');
309
            clearInterval(autoClickInterval);
310
          }
311
        });
312

313
        console.log('电子木鱼初始化成功');
314
      }
315

316
      tryInit();
317
    }
318

319
    if (document.readyState === 'complete') {
320
      initFish();
321
    } else {
322
      window.addEventListener('load', initFish);
323
    }
324
  </script>
325
</div>
问题#

目前第一次打开还是会有概率无法使用（很小），刷新一次即可正常使用
前提#

Demo#

优势#

创建界面#

代码#

问题#

引用教程#

最终实现效果#

深色模式#

亮色模式#
