diff --git a/website/templates/site.css b/website/templates/site.css index 31f5fa81..c19f2ae1 100644 --- a/website/templates/site.css +++ b/website/templates/site.css @@ -117,3 +117,29 @@ body { color: #34495e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI /* 离线提示 */ .markdown-section .offline-note { margin: 0 0 18px; padding: 8px 12px; border-radius: 6px; background: #eaf3ee; color: #34495e; font-size: 14px; } + +/* 键盘操作:焦点清晰可见;第一个可聚焦的是“跳到正文”,不用先按过侧边栏的上百个链接 */ +:focus-visible { outline: 2px solid var(--theme-color); outline-offset: 2px; border-radius: 3px; } +.sidebar-toggle:focus-visible { outline: 2px solid var(--theme-color); outline-offset: -2px; } +.skip-link { position: fixed; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--theme-color); color: #fff; font: inherit; font-size: 14px; cursor: pointer; } +.skip-link:focus { top: 12px; } +@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } + +/* 打印:只保留正文,占满纸张宽度 */ +@media print { + .sidebar, .sidebar-toggle, .github-corner, .anim-bar, .docsify-copy-code-button, .site-footer, .skip-link { display: none !important; } + .content { position: static; left: 0 !important; padding: 0; } + .markdown-section { max-width: none; padding: 0; } + .markdown-section pre, .markdown-section img { break-inside: avoid; } + .article-toc { display: none; } +} + +/* 打印:去掉学习站的入口和题目提示,代码自动换行不被截断,标题不落在页尾 */ +@media print { + body, .markdown-section pre, .markdown-section code { background: #fff !important; } + .learn-q, .learn-callout, .learn-banner, .offline-note { display: none !important; } + .markdown-section pre, .markdown-section pre > code { white-space: pre-wrap !important; overflow-wrap: anywhere; } + .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4 { break-after: avoid; } + .markdown-section table { display: table; } + .markdown-section tr { break-inside: avoid; } +} diff --git a/website/templates/site.js b/website/templates/site.js index 5170ffa4..76ac6aec 100644 --- a/website/templates/site.js +++ b/website/templates/site.js @@ -51,6 +51,27 @@ if ('serviceWorker' in navigator && (location.protocol === 'https:' || location.hostname === '127.0.0.1' || location.hostname === 'localhost')) { window.addEventListener('load', function () { navigator.serviceWorker.register('/sw.js').catch(function () {}); }); } + // Docsify 生成的目录按钮和 GitHub 角标是英文名称,读屏软件读成 Menu、View source on GitHub + function nameControls() { + var toggle = document.querySelector('.sidebar-toggle'); + if (toggle) { toggle.setAttribute('aria-label', '打开或收起目录'); toggle.title = '目录'; } + var corner = document.querySelector('.github-corner'); + if (corner) corner.setAttribute('aria-label', '在 GitHub 上查看源码'); + } + function skipLink() { + if (document.querySelector('.skip-link')) return; + var skip = document.createElement('button'); + skip.type = 'button'; + skip.className = 'skip-link'; + skip.textContent = '跳到正文'; + skip.addEventListener('click', function () { + var section = document.querySelector('.markdown-section'); + if (!section) return; + section.setAttribute('tabindex', '-1'); + section.focus(); + }); + document.body.insertBefore(skip, document.body.firstChild); + } function preserveLegacyLinks() { var hash = location.hash; var legacy = (window.CS_NOTES_LEGACY_ROUTES || {})[decode(location.pathname)]; @@ -359,6 +380,8 @@ return document.body.innerHTML + ''; }); hook.doneEach(function () { + nameControls(); + skipLink(); offlineNote(document.querySelector('.markdown-section')); var heading = document.querySelector('.markdown-section h1, .markdown-section h2'); document.title = (vm.route.path === '/' || !heading ? 'CS-Notes' : heading.textContent.trim() + ' · CS-Notes') + ' · CyC2018';