feat(ui): 页脚改为「左两行备案 / 右两行一言」,一言换成用户座右铭
用户要求: ① 左侧两行 = 两个备案号;右侧两行 = 一言两句; ② 一言不用随机 API(原 hitokoto + 随机兜底,观感中二且不可控), 改为固定座右铭「不念往昔之繁华 / 无谓前路之沧桑」。 实现: - navi.js:installDailyQuote 重写为固定文案,移除 fetch(hitokoto) 与随机 FALLBACK。 - navi.css:.navi-footer 改 CSS Grid(2 列 × 2 行 + grid-auto-flow:column), 使「备案A / 备案B」落入左列两行、「quote1 / quote2」落入右列两行, 一言列右对齐;隐藏原分隔符;内容框底部预留提升到 40px 以容纳两行页脚。
This commit is contained in:
40
web/navi.css
40
web/navi.css
@ -2361,3 +2361,43 @@ html.navi-dark[data-theme] .navi-footer,
|
||||
html.navi-dark[data-theme] .navi-footer a,
|
||||
html.navi-dark[data-theme] .navi-footer .navi-footer-sep { color: #cbd5e1 !important; }
|
||||
html.navi-dark[data-theme] .navi-footer .navi-quote { color: #94a3b8 !important; }
|
||||
|
||||
/* ═══ v79:页脚改为「左两行备案 / 右两行一言」═══
|
||||
用户要求:左边两行 = 两个备案号;右边两行 = 座右铭两句
|
||||
(不念往昔之繁华 / 无谓前路之沧桑)。
|
||||
结构:.navi-footer 内为「备案A、sep、备案B、sep、quote1、quote2」,
|
||||
用 grid 两列两行重排:
|
||||
第1行:[备案A] [quote1] 第2行:[备案2] [quote2]
|
||||
grid-auto-flow: column 配合固定两行即可把「前两个 A」放左列、「后两个 quote」放右列。 */
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer,
|
||||
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer,
|
||||
html[data-theme] .navi-footer {
|
||||
display: grid !important;
|
||||
grid-template-columns: auto 1fr !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
grid-auto-flow: column !important; /* 先填满两行再换列 → 左列=备案两项,右列=一言两项 */
|
||||
align-items: center !important;
|
||||
justify-items: start !important;
|
||||
column-gap: 12px !important; row-gap: 2px !important;
|
||||
width: 100% !important; max-width: calc(100vw - 24px) !important;
|
||||
height: auto !important; max-height: none !important; min-height: 0 !important;
|
||||
padding: 0 12px !important;
|
||||
background: transparent !important; border: 0 !important; box-shadow: none !important;
|
||||
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
|
||||
overflow: visible !important; white-space: nowrap !important;
|
||||
}
|
||||
/* 右列(一言)靠右对齐;左列(备案)靠左 */
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .navi-quote,
|
||||
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer > .navi-quote,
|
||||
html[data-theme] .navi-footer > .navi-quote {
|
||||
grid-column: 2 !important; justify-self: end !important;
|
||||
margin: 0 !important; padding: 0 !important; max-width: none !important;
|
||||
color: #64748b !important; font-style: normal !important;
|
||||
}
|
||||
html[data-theme] .navi-footer > a,
|
||||
html[data-theme] .navi-footer > .navi-footer-sep { grid-column: 1 !important; justify-self: start !important; }
|
||||
/* 分隔符在网格布局下不再需要(左右列已天然分离) */
|
||||
html[data-theme] .navi-footer > .navi-footer-sep { display: none !important; }
|
||||
/* 页脚容器高度需容纳两行;给内容框留出足够空间 */
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host { height: auto !important; max-height: none !important; }
|
||||
html[data-theme] .minimal-home > .item-group-container { margin-bottom: 40px !important; }
|
||||
|
||||
30
web/navi.js
30
web/navi.js
@ -713,23 +713,21 @@ document.addEventListener('click', function (e) {
|
||||
}, true);
|
||||
|
||||
(function installDailyQuote() {
|
||||
var FALLBACK = ['保持热爱,奔赴山海。','慢慢来,比较快。','今天也要好好吃饭。','把复杂的事做简单。','不着急,一切都会好起来的。','少即是多。','做难而正确的事。'];
|
||||
function k() { var d = new Date(); return 'navi-quote-' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); }
|
||||
function fb() { return FALLBACK[Math.floor(Math.random() * FALLBACK.length)]; }
|
||||
function render(t) {
|
||||
// v79:改为固定座右铭(原实现随机取 hitokoto + 随机兜底,观感"中二"且不可控)。
|
||||
// 用户座右铭:「不念往昔之繁华,无谓前路之沧桑」—— 分作两句,分居两行右侧。
|
||||
var QUOTE = ['不念往昔之繁华', '无谓前路之沧桑'];
|
||||
function render() {
|
||||
var f = document.querySelector('.navi-footer'); if (!f) return false;
|
||||
if (f.querySelector('.navi-quote')) return true;
|
||||
var sep = document.createElement('span'); sep.className = 'navi-footer-sep'; sep.textContent = '·';
|
||||
var q = document.createElement('span'); q.className = 'navi-quote'; q.textContent = t;
|
||||
f.appendChild(sep); f.appendChild(q); return true;
|
||||
// 两行 = 两个分组行内各放右侧一言;此处仅确保元素存在与文案
|
||||
QUOTE.forEach(function (line, idx) {
|
||||
var sp = document.createElement('span');
|
||||
sp.className = 'navi-quote' + (idx === 1 ? ' navi-quote-2' : '');
|
||||
sp.textContent = line;
|
||||
f.appendChild(sp);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
function wait(t) { var n = 0; var iv = setInterval(function () { n++; if (render(t) || n > 20) clearInterval(iv); }, 500); }
|
||||
var t = null; try { t = localStorage.getItem(k()); } catch (e) {}
|
||||
if (t) { if (!render(t)) wait(t); return; }
|
||||
var done = false, ctl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
|
||||
var tm = setTimeout(function () { if (!done && ctl) { try { ctl.abort(); } catch (e) {} } }, 3000);
|
||||
fetch('https://v1.hitokoto.cn/?encode=text&charset=utf-8', ctl ? { signal: ctl.signal } : {})
|
||||
.then(function (r) { return r.ok ? r.text() : ''; })
|
||||
.then(function (x) { done = true; clearTimeout(tm); var v = (x || '').trim().slice(0, 40) || fb(); try { localStorage.setItem(k(), v); } catch (e) {} if (!render(v)) wait(v); })
|
||||
.catch(function () { done = true; clearTimeout(tm); var v = fb(); if (!render(v)) wait(v); });
|
||||
if (!render()) { var n = 0; var iv = setInterval(function () { n++; if (render() || n > 20) clearInterval(iv); }, 500); }
|
||||
})();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user