适用于via和雨见的浏览器主页 - 一杯清风不加糖的blog

logo html：

1
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
2
<div id="widget_wrapper">
3
    <div id="poem_container" style="display: none;">
4
        <div id="poem_sentence"></div>
5
        <div id="poem_info"></div>
6
    </div>
7
    <div class="clock-container" id="clock_container" style="display: none;">
8
        <div class="unit-group" id="hours">
9
            <div class="flip-card">0</div><div class="flip-card">0</div>
10
        </div>
11
        <div class="separator">:</div>
12
        <div class="unit-group" id="minutes">
13
            <div class="flip-card">0</div><div class="flip-card">0</div>
14
        </div>
15
        <div class="separator">:</div>
16
        <div class="unit-group" id="seconds">
17
            <div class="flip-card">0</div><div class="flip-card">0</div>
18
        </div>
19
    </div>
20
</div>
21
<script>
22
(() => {
23
    'use strict';
24
    // ==========================================
25
    // 【配置区】在这里修改您的设置
26
    // ==========================================
27
    const VIA_CONFIG = {
28
        // 挂件类型：1 = 随机一言，2 = 今日诗词，3 = 翻页钟
29
        widgetType: 3,
30
        // 文字类挂件是否自动刷新（翻页钟无效）
31
        autoRefresh: true,
32
        // 刷新间隔（毫秒）
33
        refreshInterval: 10000
34
    };
35
    const safeStorage = (() => {
36
        try {
37
            const testKey = '__via_test__';
38
            localStorage.setItem(testKey, '1');
39
            localStorage.removeItem(testKey);
40
            return localStorage;
41
        } catch (e) {
42
            return {
43
                getItem() { return null; },
44
                setItem() {},
45
                removeItem() {}
46
            };
47
        }
48
    })();
49
    const $ = (sel, root = document) => root.querySelector(sel);
50
    const $$ = (sel, root = document) => root.querySelectorAll(sel);
51

52
    document.addEventListener('DOMContentLoaded', () => {
53
        const poemBox = $('#poem_container');
54
        const clockBox = $('#clock_container');
55
        const sentenceEl = $('#poem_sentence');
56
        const infoEl = $('#poem_info');
57
        // ==========================================
58
        // 1. 挂件渲染逻辑
59
        // ==========================================
60
        if (VIA_CONFIG.widgetType === 1 || VIA_CONFIG.widgetType === 2) {
61
            if (poemBox) poemBox.style.display = 'block';
62
            const loadSentence = async () => {
63
                try {
64
                    if (VIA_CONFIG.widgetType === 1) {
65
                        if (typeof fetch !== 'function') return;
66
                        const response = await fetch('https://v1.hitokoto.cn', { cache: 'no-store' });
67
                        if (!response.ok) return;
68
                        const data = await response.json();
69
                        if (sentenceEl) sentenceEl.innerHTML = data.hitokoto || '';
70
                        const author = data.from_who ? data.from_who + ' ' : '';
71
                        const source = data.from ? `《${data.from}》` : '';
72
                        if (infoEl) infoEl.innerHTML = (author || source) ? `—— ${author}${source}` : '';
73
                    } else {
74
                        if (typeof jinrishici === 'undefined' || !jinrishici.load) return;
75
                        jinrishici.load(result => {
76
                            try {
77
                                const data = result && result.data ? result.data : {};
78
                                const content = data.content || '';
79
                                const origin = data.origin || {};
80
                                if (sentenceEl) sentenceEl.innerHTML = content;
81
                                if (infoEl) {
82
                                    infoEl.innerHTML = origin.title
83
                                        ? `—— [${origin.dynasty || ''}] · ${origin.author || ''}《${origin.title}》`
84
                                        : '';
85
                                }
86
                            } catch (e) {
87
                                console.error('今日诗词解析失败', e);
88
                            }
89
                        });
90
                    }
91
                } catch (e) {
92
                    console.error('获取失败', e);
93
                }
94
            };
95
            loadSentence();
96
            if (VIA_CONFIG.autoRefresh) {
97
                setInterval(loadSentence, Math.max(3000, VIA_CONFIG.refreshInterval || 10000));
98
            }
99
        } else if (VIA_CONFIG.widgetType === 3) {
100
            // ==========================================
101
            // 3. 翻页钟挂件
102
            // ==========================================
103
            if (clockBox) clockBox.style.display = 'inline-flex';
104
            const unitCache = {
105
                hours: $$('#hours .flip-card'),
106
                minutes: $$('#minutes .flip-card'),
107
                seconds: $$('#seconds .flip-card')
108
            };
109
            const lastValues = {
110
                hours: '',
111
                minutes: '',
112
                seconds: ''
113
            };
114
            const updateUnit = (unitId, value) => {
115
                const cards = unitCache[unitId];
116
                if (!cards || cards.length < 2) return;
117
                const strValue = String(value).padStart(2, '0');
118
                if (lastValues[unitId] === strValue) return;
119
                lastValues[unitId] = strValue;
120
                for (let i = 0; i < 2; i++) {
121
                    const card = cards[i];
122
                    const num = strValue[i];
123
                    if (!card) continue;
124
                    if (card.innerText !== num) {
125
                        card.classList.remove('animate');
126
                        void card.offsetWidth;
127
                        card.innerText = num;
128
                        card.classList.add('animate');
129
                    }
130
                }
131
            };
132
            const updateClock = () => {
133
                const now = new Date();
134
                updateUnit('hours', now.getHours());
135
                updateUnit('minutes', now.getMinutes());
136
                updateUnit('seconds', now.getSeconds());
137
            };
138
            updateClock();
139
            setInterval(updateClock, 1000);
140
        }
141
        // ==========================================
142
        // 2. 搜索框左侧切换搜索引擎逻辑
143
        // ==========================================
144
        const search_submit = $('#search_submit');
145
        const search_input = $('#search_input');
146
        if (!search_submit || !search_input) return;
147
        const engines = {
148
            i: { name: '默认', url: '' },
149
            bd: { name: '百度', url: 'https://m.baidu.com/s?word=' },
150
            gg: { name: '谷歌', url: 'https://www.google.com/search?q=' },
151
            by: { name: '必应', url: 'https://cn.bing.com/search?q=' },
152
            dd: { name: 'DuckGo', url: 'https://duckduckgo.com/?q=' },
153

154
            // AI 类搜索
155
            mt: { name: '秘塔', url: 'https://metaso.cn/?q=' },
156
            km: { name: 'Kimi', url: 'https://kimi.moonshot.cn/' },
157
            ai: { name: '文心一言', url: 'https://yiyan.baidu.com/' },
158

159
            // 国内主流
160
            gk: { name: '夸克', url: 'https://quark.sm.cn/s?q=' },
161
            sg: { name: '搜狗', url: 'https://m.sogou.com/web/searchList.jsp?keyword=' },
162
            hs: { name: '360', url: 'https://m.so.com/s?q=' },
163
            sm: { name: '神马', url: 'https://yz.m.sm.cn/s?q=' },
164

165
            // 垂直搜索
166
            bb: { name: 'B站', url: 'https://m.bilibili.com/search?keyword=' },
167
            bgm: { name: 'Bangumi', url: 'https://bangumi.tv/subject_search/' },
168
            wb: { name: '微博', url: 'https://s.weibo.com/weibo/' },
169
            tt: { name: '头条', url: 'https://so.toutiao.com/search?keyword=' },
170
            zht: { name: '知乎', url: 'https://www.zhihu.com/search?type=content&q=' },
171
            tb: { name: '贴吧', url: 'https://tieba.baidu.com/mo/q/hybrid/search?keyword=' },
172

173
            // 国际/隐私向
174
            yd: { name: 'Yandex', url: 'https://yandex.com/search/?text=' },
175
            oh: { name: 'OceanHero', url: 'https://oceanhero.today/web?q=' }
176
        };
177
        let select = safeStorage.getItem('se') || 'i';
178
        if (!engines[select]) select = 'i';
179
        const switch_btn = document.createElement('button');
180
        switch_btn.id = 'switch_btn';
181
        switch_btn.type = 'button';
182
        switch_btn.classList.add('url');
183
        switch_btn.textContent = engines[select].name;
184
        search_submit.parentElement.insertBefore(switch_btn, search_submit);
185
        const switch_window = document.createElement('div');
186
        switch_window.id = 'switch_window';
187
        document.body.appendChild(switch_window);
188

189
        const renderEngines = () => {
190
            switch_window.innerHTML = Object.keys(engines).map(key => {
191
                const isHidden = (key === 'm' && (!safeStorage.getItem('c') || select !== 'c')) ? 'style="display:none;"' : '';
192
                return `<div class="url switch_engine ${key === select ? 'active' : ''}" data-key="${key}" ${isHidden}>${engines[key].name}</div>`;
193
            }).join('');
194
        };
195
        renderEngines();
196

197
        let layoutCache = null;
198
        let barCache = null;
199
        let rootCache = null;
200
        let updateLayoutTimer = null;
201

202
        const use_bar = () => {
203
            const search_bar = barCache || $('.search_bar');
204
            if (!search_bar) return;
205
            barCache = search_bar;
206
            const barStyle = window.getComputedStyle(search_bar);
207
            const barRadius = barStyle.getPropertyValue('border-radius') || '15px';
208
            const topRadius = Math.max(parseFloat(barRadius.split(' ')[0]) || 0, 5);
209
            switch_btn.style.borderRadius = (topRadius - 2) + 'px';
210

211
            const now = Date.now();
212
            if (!layoutCache || now - layoutCache.timestamp > 100) {
213
                const root = rootCache || getComputedStyle(document.documentElement);
214
                rootCache = root;
215
                const barRect = search_bar.getBoundingClientRect();
216
                const btnRect = switch_btn.getBoundingClientRect();
217
                layoutCache = {
218
                    timestamp: now,
219
                    engine_num: parseInt(root.getPropertyValue('--engine_num').trim() || '6', 10),
220
                    bar_width: search_bar.offsetWidth,
221
                    bar_left: barRect.left + window.scrollX,
222
                    bar_top: barRect.top + window.scrollY,
223
                    bar_height: barRect.height,
224
                    btn_left: btnRect.left + window.scrollX
225
                };
226
            }
227

228
            const top_position = (layoutCache.bar_top + layoutCache.bar_height + 5) + 'px';
229

230
            if (layoutCache.engine_num > 4) {
231
                Object.assign(switch_window.style, {
232
                    width: layoutCache.bar_width + 'px',
233
                    left: layoutCache.bar_left + 'px',
234
                    transform: 'none',
235
                    top: top_position
236
                });
237
            } else {
238
                Object.assign(switch_window.style, {
239
                    left: (layoutCache.btn_left - 6) + 'px',
240
                    transform: 'none',
241
                    width: 'auto',
242
                    top: top_position
243
                });
244
            }
245
        };
246

247
        use_bar();
248

249
        window.addEventListener('resize', () => {
250
            clearTimeout(updateLayoutTimer);
251
            updateLayoutTimer = setTimeout(use_bar, 200);
252
        }, { passive: true });
253

254
        switch_btn.addEventListener('click', e => {
255
            e.stopPropagation();
256
            e.preventDefault();
257
            const isActive = switch_btn.classList.contains('active');
258
            switch_btn.classList.toggle('active', !isActive);
259
            switch_window.classList.toggle('active', !isActive);
260
            use_bar();
261
        });
262

263
        switch_window.addEventListener('click', e => {
264
            const target = e.target;
265
            if (!target.classList.contains('switch_engine')) return;
266
            let new_key = target.dataset.key;
267
            if (new_key === 'c' || new_key === 'm') {
268
                let customUrl = prompt('请修改自定义地址\n注：取消可能会清空(′⊙ω⊙`)', safeStorage.getItem('c') || '');
269
                customUrl = (customUrl || '').trim();
270
                if (!customUrl) {
271
                    new_key = 'i';
272
                } else {
273
                    safeStorage.setItem('c', customUrl);
274
                    engines.c.url = customUrl;
275
                    new_key = 'c';
276
                }
277
                select = new_key;
278
                renderEngines();
279
            }
280
            safeStorage.setItem('se', new_key);
281
            select = new_key;
282
            switch_btn.textContent = engines[new_key].name;
283
            $$('.switch_engine', switch_window).forEach(el => {
284
                el.classList.toggle('active', el.dataset.key === new_key);
285
            });
286
            [switch_btn, switch_window].forEach(el => el.classList.remove('active'));
287
        });
288

289
        document.addEventListener('click', e => {
290
            if (!switch_btn.contains(e.target) && !switch_window.contains(e.target)) {
291
                [switch_btn, switch_window].forEach(el => el.classList.remove('active'));
292
            }
293
        }, { passive: true });
294

295
        // ==========================================
296
        // 3. 修复后的搜索逻辑
297
        //    兼容 VIA 原搜索按钮/表单提交机制
298
        // ==========================================
299
        const originalSearch = (typeof window.search === 'function') ? window.search.bind(window) : null;
300
        const buildSearchValue = (engineUrl, inputVal) => {
301
            if (!engineUrl) return inputVal;
302
            return /%[sS@]/.test(engineUrl)
303
                ? engineUrl.replace(/%[sS@]/g, inputVal)
304
                : engineUrl + inputVal;
305
        };
306

307
        window.search = () => {
308
            const input_val = search_input.value.trim();
309
            if (!input_val) return false;
310
            const current = safeStorage.getItem('se') || 'i';
311
            const engine_url = current === 'c' ? (safeStorage.getItem('c') || '') : (engines[current]?.url || '');
312
            let finalValue = input_val;
313

314
            if (current !== 'i' && engine_url) {
315
                finalValue = buildSearchValue(engine_url, input_val);
316
            } else if (engine_url) {
317
                finalValue = engine_url + input_val;
318
            }
319

320
            search_input.value = finalValue;
321

322
            if (originalSearch) {
323
                try {
324
                    return originalSearch();
325
                } catch (e) {
326
                    console.warn('原搜索函数调用失败，尝试表单提交', e);
327
                }
328
            }
329

330
            const form = search_input.form;
331
            if (form) {
332
                if (typeof form.requestSubmit === 'function') {
333
                    form.requestSubmit();
334
                } else {
335
                    form.submit();
336
                }
337
            }
338
            return false;
339
        };
340
    });
341
})();
342
</script>

自定义css：

1
:root {
2
  /* 每行搜索引擎数量 */
3
  --engine_num: 6;
4
  /* 窗口最大高度 */
5
  --max_height: 38vh;
6
}
7
body {
8
  background-position: top center;
9
  background-size: 100% auto;
10
}
11
/* ============================ */
12
/* 全局挂件容器样式             */
13
/* ============================ */
14
#widget_wrapper {
15
  text-align: center;
16
  margin: 0 auto 15px auto;
17
  width: 85%;
18
  max-width: 400px;
19
}
20
/* 挂件通用动画 */
21
@keyframes poem-fade-in {
22
  0% { opacity: 0; transform: translateY(-10px); }
23
  100% { opacity: 1; transform: translateY(0); }
24
}
25
/* ============================ */
26
/* 形态 1/2: 诗词一言 UI 样式   */
27
/* ============================ */
28
#poem_container {
29
  color: #ffffff;
30
  font-family: "PingFang SC Round", "Yuanti SC", "YouYuan", "Microsoft YaHei UI Rounded", sans-serif;
31
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
32
  animation: poem-fade-in 1s ease-out;
33
}
34
#poem_sentence {
35
  font-size: 20px;
36
  font-weight: 560;
37
  letter-spacing: 1px;
38
  margin-bottom: 6px;
39
  line-height: 1.4;
40
}
41
#poem_info {
42
  font-size: 13px;
43
  font-weight: 400;
44
  opacity: 0.85;
45
  letter-spacing: 0.5px;
46
}
47
/* ============================ */
48
/* 形态 3: 翻页钟 UI 样式       */
49
/* ============================ */
50
.clock-container {
51
  border-radius: 15px;
52
  align-items: center;
53
  gap: 8px;
54
  animation: poem-fade-in 1s ease-out;
55
}
56
.unit-group {
57
  display: flex;
58
  gap: 3px;
59
}
60
.flip-card {
61
  position: relative;
62
  width: 36px;
63
  height: 54px;
64
  line-height: 54px;
65
  background-color: rgba(40, 40, 40, 0.7);
66
  backdrop-filter: blur(5px);
67
  border-radius: 6px;
68
  font-size: 32px;
69
  font-weight: bold;
70
  color: #fff;
71
  text-align: center;
72
  font-family: sans-serif;
73
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
74
}
75
.flip-card::after {
76
  content: "";
77
  position: absolute;
78
  top: 50%;
79
  left: 0;
80
  width: 100%;
81
  height: 1px;
82
  background: rgba(0, 0, 0, 0.5);
83
  z-index: 5;
84
}
85
.separator {
86
  color: #fff;
87
  font-size: 24px;
88
  font-weight: bold;
89
  padding-bottom: 5px;
90
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
91
}
92
.animate {
93
  animation: flip 0.3s ease-in-out;
94
}
95
@keyframes flip {
96
  0% { transform: scaleY(1); }
97
  50% { transform: scaleY(0.4); opacity: 0.8; }
98
  100% { transform: scaleY(1); }
99
}
100
/* ============================ */
101
/* 搜索引擎切换按钮及弹窗样式   */
102
/* ============================ */
103
#switch_btn, #switch_window {
104
  outline: 0;
105
  background: rgba(255,255,255,.15);
106
  backdrop-filter: blur(10px);
107
  user-select: none;
108
}
109
#switch_btn, .switch_engine {
110
  width: auto;
111
  white-space: nowrap;
112
  font-size: 12px;
113
}
114
#switch_btn {
115
  margin: 5px -2px 5px 6px;
116
  padding: 8px 10px;
117
  height: 36px;
118
  border: 0;
119
  align-items: center;
120
  display: flex;
121
  float: left;
122
}
123
#switch_btn::after {
124
  content: "▼";
125
  transition: .3s;
126
  font-size: 6px;
127
  margin-left: 2px;
128
}
129
#switch_btn.active::after {
130
  rotate: 180deg;
131
}
132
#switch_window {
133
  grid-template-columns: repeat(var(--engine_num), auto);
134
  border: 1px solid rgba(255,255,255,.2);
135
  position: absolute;
136
  padding: 4px;
137
  gap: 4px;
138
  opacity: 0;
139
  visibility: hidden;
140
  display: grid;
141
  z-index: 9999;
142
  border-radius: 8px;
143
  pointer-events: none;
144
  overflow-y: auto;
145
  max-height: 0;
146
  transition: .3s;
147
  box-sizing: border-box;
148
}
149
#switch_window.active {
150
  max-height: var(--max_height);
151
  visibility: visible;
152
  opacity: 1;
153
  pointer-events: auto;
154
  transition: .3s;
155
}
156
.switch_engine {
157
  border-radius: 6px;
158
  height: auto;
159
  transition: .2s;
160
  padding: 5px 6px;
161
}
162
.switch_engine.active {
163
  background: rgba(22,93,255,.3);
164
  color: #fff;
165
  font-weight: 500;
166
}
167
/* ============================ */
168
/* 主页搜索框及其他布局样式     */
169
/* ============================ */
170
#content {
171
  position: fixed;
172
  top: 20vh;
173
  width: 100%;
174
}
175
#content .search_part .search_bar {
176
  box-shadow: 0 0 5px rgba(70,70,40,0.255);
177
  backdrop-filter: blur(5px);
178
  background-color: rgba(255,255,255,.100);
179
  border-radius: 15px;
180
  display: table;
181
  width: 85%;
182
  height: 30px;
183
  max-width: 400px;
184
  margin: 20px auto;
185
  text-align: center;
186
  font-size: 30px;
187
  border: 1px solid transparent;
188
  outline: none;
189
  font-weight: 560;
190
  transition-duration: 0.2s;
191
  animation: search-bar 1s;
192
  box-sizing: border-box;
193
}
194
#content .search_part .search_bar span {
195
  padding: 0;
196
}
197
#content .search_part .opSug_wpr,
198
#content .search_part .bdSug_wpr {
199
  border-radius: 15px 15px 15px 15px;
200
  border: 0 none #FFFFFF !important;
201
  border-top: 10px solid transparent !important;
202
  background: rgba(255,255,255,0.2) !important;
203
  backdrop-filter: blur(5px);
204
  width: 85% !important;
205
  max-width: 400px !important;
206
  margin: 0 auto !important;
207
  left: 0 !important;
208
  right: 0 !important;
209
  transform: none !important;
210
  box-sizing: border-box;
211
  position: absolute;
212
}
213
@keyframes search-bar {
214
  0% { max-width: 100px; }
215
  100% { max-width: 400px; }
216
}

音乐

音乐

文章分享

音乐

文章目录