diff --git a/website/README.md b/website/README.md index 31e07b74..b8ca9dd4 100644 --- a/website/README.md +++ b/website/README.md @@ -45,6 +45,8 @@ verify_updates.py 在临时副本中修改文章、替换配图、新增文章 学习站(定级、每日计划、间隔复习)的代码不在本仓库,网站工作流从私有仓库检出到 learn/;learn/ 存在时,build.py 调用 learn/build.py 生成到 dist/learn/,随网站一起发布,并在首页、侧边栏和三条学习路线的文章开头加入口,学习站中有题的笔记在文章末尾提示“读完练一练”(search-paths.js 中的 CS_NOTES_LEARN_TOPICS 记录每篇笔记的题号);已经在学的读者,入口和首页横幅读取同一网站下的学习记录(localStorage 的 cs-learn-v1,不上传),写出练过几道、今天有几道到期;有题的小节标题下列出这一节的面试题(CS_NOTES_LEARN_SECTIONS:笔记 → 锚点 → 题号、题目、热度),点进去只练这一节;不存在时只构建笔记,没有入口。 +首页学习站横幅下面是“今日面试题”:每天按日期从面试最常问的题中换一道,链接到这道题在学习站中的页面。 + 构建时在根目录写入 robots.txt,指向学习站的站点地图(learn/sitemap.xml,列出每道题的静态页面)。 ## 自动更新与发布 diff --git a/website/templates/site.css b/website/templates/site.css index a9ffe476..03de5bee 100644 --- a/website/templates/site.css +++ b/website/templates/site.css @@ -53,6 +53,8 @@ body { color: #34495e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI .learn-q-label { flex: none; padding: 1px 7px; border-radius: 5px; background: #e3f2ea; color: var(--theme-color); font-size: 12px; font-weight: 600; } .learn-q-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34495e; } .learn-q-go { flex: none; color: var(--theme-color); font-weight: 600; } +.learn-daily { margin: -8px 0 18px; } +.learn-daily .learn-q-text { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .learn-q.due .learn-q-go { color: #c2410c; } @media (min-width: 769px) { .content { padding-top: 12px; } .article-toc { display: none; } } .page-toc-block { margin: 0 0 18px; padding: 0 0 14px 18px; border-bottom: 1px solid #e2e3dc; } diff --git a/website/templates/site.js b/website/templates/site.js index 1f884f22..ddddfa16 100644 --- a/website/templates/site.js +++ b/website/templates/site.js @@ -225,6 +225,32 @@ banner.querySelector('.learn-banner-text span').textContent = (due ? '今天有 ' + due + ' 道题到了该复习的时候,' : '') + '已经学完 ' + done + ' 天' + (due ? '' : ',接着学下一天'); banner.querySelector('.learn-banner-go').textContent = '继续'; } + // 首页的“今日面试题”:每天按日期换一道面试最常问的题(同一天所有读者看到的一样),链接到这道题的页面,先想再看要点 + function dailyQuestion(section) { + var banner = section && section.querySelector('.learn-banner'), sections = window.CS_NOTES_LEARN_SECTIONS; + if (!banner || !sections || section.querySelector('.learn-daily')) return; + var seen = {}, hot = []; + Object.keys(sections).forEach(function (note) { + Object.keys(sections[note]).forEach(function (anchor) { + sections[note][anchor].forEach(function (q) { if (q[2] > 1 && !seen[q[0]]) { seen[q[0]] = true; hot.push(q); } }); + }); + }); + if (!hot.length) return; + hot.sort(function (a, b) { return a[0] < b[0] ? -1 : 1; }); + var p = localDay().split('-').map(Number), q = hot[Math.floor(Date.UTC(p[0], p[1] - 1, p[2]) / 864e5) % hot.length]; + var record = learnRecord(), done = record && record.cards[q[0]] && record.cards[q[0]].last === localDay(); + var link = document.createElement('a'), label = document.createElement('span'), text = document.createElement('span'), go = document.createElement('span'); + link.className = 'learn-q learn-daily'; + link.href = '/learn/q/' + q[0] + '.html'; + label.className = 'learn-q-label'; + label.textContent = '今日面试题'; + text.className = 'learn-q-text'; + text.textContent = q[1]; + go.className = 'learn-q-go'; + go.textContent = done ? '今天练过了' : '想一想'; + link.appendChild(label); link.appendChild(text); link.appendChild(go); + banner.insertAdjacentElement('afterend', link); + } // 小节标题下列出这一节的面试题(显示第一道的题目和题数),点进去只练这一节;练过的显示已练或到期 function sectionQuestions(vm, section) { var match = decode(vm.route.path).match(/^\/notes\/(.+)$/), note = match && match[1]; @@ -304,6 +330,7 @@ practiceCallout(vm, document.querySelector('.markdown-section')); sectionQuestions(vm, document.querySelector('.markdown-section')); learnBanner(document.querySelector('.markdown-section')); + dailyQuestion(document.querySelector('.markdown-section')); document.querySelectorAll('.article-toc').forEach(function (toc) { toc.open = window.matchMedia('(min-width: 769px)').matches; });