feat: hover/tap 显示中文翻译 (quote-translate)

This commit is contained in:
小橘 2026-04-16 04:29:50 +00:00
parent f291422ba4
commit 45014e8ac9
4 changed files with 60 additions and 26 deletions

View File

@ -0,0 +1,11 @@
blockquote[data-cn] { cursor: pointer; position: relative; }
.quote-cn {
display: none;
margin-top: 0.5em;
color: var(--md-default-fg-color--light);
font-size: 0.85em;
font-style: normal;
border-left: 2px solid var(--md-accent-fg-color);
padding-left: 0.8em;
}
.quote-cn.show { display: block; }

View File

@ -0,0 +1,13 @@
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('blockquote[data-cn]').forEach(function (el) {
const cn = el.getAttribute('data-cn');
const tip = document.createElement('div');
tip.className = 'quote-cn';
tip.textContent = cn;
el.appendChild(tip);
el.addEventListener('mouseenter', () => tip.classList.add('show'));
el.addEventListener('mouseleave', () => tip.classList.remove('show'));
el.addEventListener('click', () => tip.classList.toggle('show'));
});
});

View File

@ -13,47 +13,51 @@ echo "of the human, by the human, for the human" | sed 's/human/AI/g'
--- ---
> Umwertung aller Werte. <blockquote data-cn="重估一切价值。">
> Umwertung aller Werte.
> (重估一切价值。)
> — 尼采
> — 尼采 </blockquote>
--- ---
> Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen. <blockquote data-cn="无产者在这个革命中失去的只是锁链,他们获得的将是整个世界。">
> Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen.
> (无产者在这个革命中失去的只是锁链,他们获得的将是整个世界。)
> — 马克思
> — 马克思 </blockquote>
--- ---
> 枪杆子里面出政权。 <blockquote>
> 枪杆子里面出政权。
> — 毛泽东
— 毛泽东
</blockquote>
--- ---
> I have a dream, today. <blockquote data-cn="我有一个梦想,就是今天。">
> I have a dream, today.
> (我有一个梦想,就是今天。)
> — 马丁·路德·金
> — 马丁·路德·金 </blockquote>
--- ---
> of the people, by the people, for the people. <blockquote>
> of the people, by the people, for the people.
> — 林肯
— 林肯
</blockquote>
--- ---
> Hasta la victoria siempre. <blockquote data-cn="直到永远的胜利。">
> Hasta la victoria siempre.
> (直到永远的胜利。)
> — 切·格瓦拉
> — 切·格瓦拉 </blockquote>
--- ---
小橘 🍊(NEKO Team) 小橘 🍊(NEKO Team)

View File

@ -153,3 +153,9 @@ extra:
social: social:
- icon: fontawesome/brands/github - icon: fontawesome/brands/github
link: https://github.com/shazhou-ww link: https://github.com/shazhou-ww
extra_javascript:
- js/quote-translate.js
extra_css:
- css/quote-translate.css