笔记 https://notes.shuohan.work/zh/ Recent content on 笔记 笔记 https://notes.shuohan.work/images/papermod-cover.png https://notes.shuohan.work/images/papermod-cover.png Hugo -- 0.147.2 zh-CN Sun, 29 Mar 2026 09:15:00 +0800 语言是什么 https://notes.shuohan.work/zh/posts/%E8%AF%AD%E8%A8%80%E6%98%AF%E4%BB%80%E4%B9%88/ Sun, 29 Mar 2026 09:15:00 +0800 https://notes.shuohan.work/zh/posts/%E8%AF%AD%E8%A8%80%E6%98%AF%E4%BB%80%E4%B9%88/ <p>什么是语言<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>呢？它人们离不开的“工具”，是人与人面对面交流最便捷的方式。既然是“工具”，那它就会有自身的特点，可以被“看到”，也被用来表达个人的观点……</p> <h2 id="语言和文字">语言和文字</h2> <p>我们常认为语言是文字，事实并非如此。我们平常说出的话就是语言。而我们看到的广告语、书籍故事等并非语言，而是文字。语言是<strong>声音与意义的结合体</strong>（以下简称音义结合体），文字是对语言的再编码，或者说一个个文字<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>代表一个个音义结合体。文字与语言的关系，正如交通红灯有禁止通行的含义一样。文字是这个“红灯”，语言则是“禁止通行”。一些不识字的人，仍然可以理解他人说的话，还可以表达自己的想法。</p> 阅读札记 | 影响力 https://notes.shuohan.work/zh/posts/%E5%BD%B1%E5%93%8D%E5%8A%9B/ Sun, 23 Nov 2025 18:57:25 +0800 https://notes.shuohan.work/zh/posts/%E5%BD%B1%E5%93%8D%E5%8A%9B/ <h3 id="第1章-影响力的武器">第1章 影响力的武器</h3> <blockquote> <p>&ldquo;我们必须频繁地利用我们的范式、我们的首选经验，根据少数关键特征把事情分类，一碰到这样那样的触发特征，就不假思索地作出反应。&rdquo;</p> 自律 https://notes.shuohan.work/zh/posts/%E4%B9%90%E8%A7%82/ Sun, 09 Nov 2025 10:59:53 +0800 https://notes.shuohan.work/zh/posts/%E4%B9%90%E8%A7%82/ <p>付诸行动的重点在于自律。一个人制定阅读计划，若执行计划便是付诸了行动。自律不简单，但也不会太难。我认为要想自律需要<strong>戒掉短视频</strong>。</p> <p>如何戒掉呢？多出去走走，增加远离社交媒体的时间。是一个人，还是找自己的朋友一起散步呢？我的回答是<em>一个人</em>。想象下面的场景：一个人在公园听歌散步，看日落日出，观察来往的行人；看够了之后，不要拿出你的手机，只需要盯着一个地方想一想：这样的感觉如何，自己内心的是否有一种突然开阔之感——只需想象桃花源记主人公，从狭窄的山洞中迈进宽广的桃花源那关键的一步，所带来的感受。</p> 卡片盒笔记法 https://notes.shuohan.work/zh/posts/%E5%8D%A1%E7%89%87%E7%9B%92%E7%AC%94%E8%AE%B0%E6%B3%95/ Sun, 02 Nov 2025 16:23:51 +0800 https://notes.shuohan.work/zh/posts/%E5%8D%A1%E7%89%87%E7%9B%92%E7%AC%94%E8%AE%B0%E6%B3%95/ <p>卡片盒笔记法是一个可关联不同笔记的方法，这样说也许有些简单，不过下文我会提到如何实施它。使用这个方法有一个前提：笔记软件最好支持 <strong>双链</strong>，还有标签（如 obsidian）。</p> 数字工具 https://notes.shuohan.work/zh/posts/%E6%95%B0%E5%AD%97%E5%B7%A5%E5%85%B7/ Sat, 01 Nov 2025 10:51:14 +0800 https://notes.shuohan.work/zh/posts/%E6%95%B0%E5%AD%97%E5%B7%A5%E5%85%B7/ <p>本篇文章记录本人经常使用的软件和工具等。</p> <h3 id="笔记软件">笔记软件</h3> <p><a href="https://obsidian.md/">obsidian</a>是一个多平台的笔记软件。支持<strong>markdown语法</strong>和<strong>双链</strong>，同时也支持安装插件。</p> <p>软件本身同步需要付费，因此可以安装<strong>Remotely save插件</strong>实现在各个平台同步。</p> <h3 id="云同步服务">云同步服务</h3> <h4 id="坚果云">坚果云</h4> <p>国内云同步软件，无限容量，但是每月只能上传1G流量，下载3G流量。用来同步笔记完全是足够的。</p> https://notes.shuohan.work/zh/about/ Mon, 01 Jan 0001 00:00:00 +0000 https://notes.shuohan.work/zh/about/ <p>本站用以记录自以为是笔记的东西。</p> <h3 id="我">我</h3> <p>想要学习感兴趣的一切的东西，记录生活，成长和经历。热爱听歌、散步、看电影，平常也会读书，偶尔“折腾”。</p> <ul> <li>音乐：偏爱节奏适当的英文音乐，不会过于热烈，也不会太过轻柔。</li> <li>电影：目前最喜欢的电影系列是 Harry potter 七部曲、指环王和霍比特人系列；英剧喜欢《万物生灵》，有电影选择困难症。</li> <li>散步：希望多接触些真实的东西，而不是网络上的虚拟世界，遇到些自认为好看的风景，也会拍下来。</li> <li>读书：通过阅读获得知识，喜欢大脑“充实”的感觉。</li> </ul> <h3 id="常看博客">常看博客</h3> <ul> <li><a href="https://guozheng.rbind.io/">黄国政</a>一名人类学研究生，记录日常以及人类学知识；</li> <li><a href="https://blog.wenxuecity.com/myoverview/80634/">硅谷居士</a>分享投资相关内容；</li> <li><a href="http://www.qncd.com/">尺宅杂记</a>热爱阅读的一位老师；</li> <li><a href="https://stephenleng.com/cn/">心的道理</a>对社会现象有个人的见解；</li> <li><a href="https://wangyurui.com/">太隐</a>不只介绍历史人物。</li> </ul> https://notes.shuohan.work/zh/statics/ Mon, 01 Jan 0001 00:00:00 +0000 https://notes.shuohan.work/zh/statics/ <p>一个统计页面。</p> <h3 id="热力图">热力图</h3> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>博客文章热力图</title> <style> :root { --ht-main: #334155; --ht-day-bg: #ebedf0; --ht-tooltip: #000000; --ht-tooltip-bg: #ffffff; --ht-lv-0: #ebebeb; --ht-lv-1: #c0c0c0; --ht-lv-2: #999999; --ht-lv-3: #666666; --ht-lv-4: #333333; } [data-theme="dark"] { --ht-main: #94a3b8; --ht-day-bg: #161b22; --ht-tooltip: #000000; --ht-tooltip-bg: #ffffff; --ht-lv-0: #444444; --ht-lv-1: #666666; --ht-lv-2: #888888; --ht-lv-3: #aaaaaa; --ht-lv-4: #cccccc; } .heatmap_container { display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 12px; color: var(--ht-main); position: relative; top: 10px; } .heatmap_content { display: flex; flex-direction: row; align-items: flex-end; } .heatmap_week { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; margin-top: 0.25rem; margin-right: 0.25rem; } .heatmap_main { display: flex; flex-direction: column; } .heatmap_month { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-end; text-align: right; margin-top: 0.25rem; margin-right: 0.25rem; } .heatmap { display: flex; flex-direction: row; height: 84px; } .heatmap_footer { display: flex; align-items: center; margin-top: 0.5rem; } .heatmap_level { display: flex; flex-direction: row; align-items: center; gap: 2px; margin: 0 0.25rem; height: 10px; } .heatmap_level_item { display: block; width: 10px; height: 10px; border-radius: 0.125rem; } .heatmap_level_0 { background: var(--ht-lv-0); } .heatmap_level_1 { background: var(--ht-lv-1); } .heatmap_level_2 { background: var(--ht-lv-2); } .heatmap_level_3 { background: var(--ht-lv-3); } .heatmap_level_4 { background: var(--ht-lv-4); } .heatmap_day { width: 10px; height: 10px; background-color: var(--ht-day-bg); margin: 1px; border-radius: 2px; display: inline-block; position: relative; cursor: pointer; } .heatmap_day_level_0 { background-color: var(--ht-lv-0); } .heatmap_day_level_1 { background-color: var(--ht-lv-1); } .heatmap_day_level_2 { background-color: var(--ht-lv-2); } .heatmap_day_level_3 { background-color: var(--ht-lv-3); } .heatmap_day_level_4 { background-color: var(--ht-lv-4); } .heatmap_tooltip { position: fixed; background-color: var(--ht-tooltip-bg); color: var(--ht-tooltip); font-size: 12px; line-height: 16px; padding: 12px 16px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid #e5e7eb; white-space: nowrap; z-index: 1000; pointer-events: none; opacity: 0; transform: scale(0.9); transition: opacity 0.2s ease, transform 0.2s ease; max-width: 300px; } .heatmap_tooltip.show { opacity: 1; transform: scale(1); } .heatmap_tooltip_count, .heatmap_tooltip_post { font-weight: 600; color: #1f2937; } .heatmap_tooltip_title { display: block; font-weight: 500; color: #374151; margin-top: 4px; white-space: normal; word-wrap: break-word; } .heatmap_tooltip_date { display: block; color: #6b7280; font-size: 11px; margin-top: 6px; } .heatmap_less, .heatmap_more { font-size: 10px; color: var(--ht-main); } </style> </head> <body> <div class="heatmap_container"> <div class="heatmap_content"> <div class="heatmap_week"> <span>M</span><span>&nbsp;</span> <span>W</span><span>&nbsp;</span> <span>F</span><span>&nbsp;</span> <span>S</span> </div> <div class="heatmap_main"> <div class="month heatmap_month"></div> <div id="heatmap" class="heatmap"></div> </div> </div> <div class="heatmap_footer"> <div class="heatmap_less">less</div> <div class="heatmap_level"> <span class="heatmap_level_item heatmap_level_0"></span> <span class="heatmap_level_item heatmap_level_1"></span> <span class="heatmap_level_item heatmap_level_2"></span> <span class="heatmap_level_item heatmap_level_3"></span> <span class="heatmap_level_item heatmap_level_4"></span> </div> <div class="heatmap_more">more</div> </div> </div> <div id="globalTooltip" class="heatmap_tooltip"></div> <script> var blogInfo = { "pages": [ { "title": "数字工具", "date": "2025-11-01", "year": "2025", "month": "11", "day": "01", "word_count": "1436" }, { "title": "卡片盒笔记法", "date": "2025-11-02", "year": "2025", "month": "11", "day": "02", "word_count": "646" }, { "title": "自律", "date": "2025-11-09", "year": "2025", "month": "11", "day": "09", "word_count": "711" }, { "title": "阅读札记 | 影响力", "date": "2025-11-23", "year": "2025", "month": "11", "day": "23", "word_count": "4908" }, { "title": "语言是什么", "date": "2026-03-29", "year": "2026", "month": "03", "day": "29", "word_count": "1396" } ] }; const globalTooltip = document.getElementById('globalTooltip'); let tooltipTimeout; const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const monthDiv = document.querySelector('.heatmap_month'); const monthsToShow = window.innerWidth < 768 ? 5 : 12; const now = new Date(); const startMonth = (now.getMonth() - (monthsToShow - 1) + 12) % 12; for (let i = startMonth; i < startMonth + monthsToShow; i++) { const span = document.createElement('span'); span.textContent = monthNames[i % 12]; monthDiv.appendChild(span); } function getStartDate() { const today = new Date(); const start = new Date(today.getFullYear(), today.getMonth() - monthsToShow + 1, 1); while (start.getDay() !== 1) start.setDate(start.getDate() + 1); return start; } function formatDate(date) { const options = { month: 'short', day: 'numeric', year: 'numeric' }; return date.toLocaleDateString('en-US', options); } function showTooltip(event, title, count, post, date) { clearTimeout(tooltipTimeout); let content = ''; if (post !== "0") { content += `<span class="heatmap_tooltip_post">共 ${post} 篇</span>`; } if (count !== "0") { content += `<span class="heatmap_tooltip_count"> ${count} 字；</span>`; } if (title) { content += `<span class="heatmap_tooltip_title">《${title}》</span>`; } content += `<span class="heatmap_tooltip_date">${date}</span>`; globalTooltip.innerHTML = content; const rect = event.target.getBoundingClientRect(); const tooltipRect = globalTooltip.getBoundingClientRect(); let left = rect.left + rect.width / 2 - tooltipRect.width / 2; let top = rect.top - tooltipRect.height - 10; if (left < 10) left = 10; if (left + tooltipRect.width > window.innerWidth - 10) { left = window.innerWidth - tooltipRect.width - 10; } if (top < 10) { top = rect.bottom + 10; } globalTooltip.style.left = left + 'px'; globalTooltip.style.top = top + 'px'; globalTooltip.classList.add('show'); } function hideTooltip() { tooltipTimeout = setTimeout(() => { globalTooltip.classList.remove('show'); }, 100); } function createDay(date, title, count, post) { const day = document.createElement("div"); day.className = "heatmap_day"; day.dataset.title = title; day.dataset.count = count; day.dataset.post = post; day.dataset.date = date; day.addEventListener("mouseenter", (event) => { showTooltip(event, title, count, post, date); }); day.addEventListener("mouseleave", () => { hideTooltip(); }); const c = parseInt(count, 10); if (c === 0) day.classList.add("heatmap_day_level_0"); else if (c < 1000) day.classList.add("heatmap_day_level_1"); else if (c < 2000) day.classList.add("heatmap_day_level_2"); else if (c < 3000) day.classList.add("heatmap_day_level_3"); else day.classList.add("heatmap_day_level_4"); return day; } function createHeatmap() { const container = document.getElementById('heatmap'); const start = getStartDate(); const end = new Date(); let current = new Date(start); let week = document.createElement('div'); week.className = 'heatmap_week'; container.appendChild(week); let i = 0; while (current <= end) { if (i % 7 === 0 && i !== 0) { week = document.createElement('div'); week.className = 'heatmap_week'; container.appendChild(week); } const dateStr = `${current.getFullYear()}-${(current.getMonth()+1).toString().padStart(2,'0')}-${current.getDate().toString().padStart(2,'0')}`; const matched = blogInfo.pages.filter(p => p.date === dateStr); const titles = matched.map(p => p.title).join('<br />'); const totalWords = matched.reduce((sum, p) => sum + parseInt(p.word_count, 10), 0); const posts = matched.length; const day = createDay(formatDate(current), titles, totalWords.toString(), posts.toString()); week.appendChild(day); current.setDate(current.getDate() + 1); i++; } } globalTooltip.addEventListener('mouseenter', () => { clearTimeout(tooltipTimeout); }); globalTooltip.addEventListener('mouseleave', () => { hideTooltip(); }); createHeatmap(); </script> </body> </html> <h3 id="日历">日历</h3> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修复后的发布日历</title> <style> :root{ --ht-main: #334155; --ht-day-bg: #fffdfd; --ht-tooltip: #000000; --ht-tooltip-bg: #ffffff; --ht-lv-0: #ebebeb; --ht-lv-1: #c0c0c0; --ht-lv-2: #999999; --ht-lv-3: #666666; --ht-lv-4: #333333; } [data-theme="dark"]{ --ht-main: #94a3b8; --ht-day-bg: #161b22; --ht-tooltip: #000000; --ht-tooltip-bg: #ffffff; --ht-lv-0: #444444; --ht-lv-1: #666666; --ht-lv-2: #888888; --ht-lv-3: #aaaaaa; --ht-lv-4: #cccccc; } .pm-calendar{ max-width: 460px; background:var(--ht-day-bg); border-radius:14px; padding:18px; box-shadow:0 1px 6px rgba(0,0,0,0.03); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:var(--ht-main); margin: 0 auto; position: relative; width: 100%; box-sizing: border-box; } .pm-cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; flex-wrap: nowrap; } .pm-arrow{ background:transparent; border:0; font-size:20px; cursor:pointer; padding:8px; color:var(--ht-main); border-radius: 6px; transition: background-color 0.2s; flex-shrink: 0; min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; } .pm-arrow:hover { background-color: rgba(0,0,0,0.05); } .pm-arrow:active { background-color: rgba(0,0,0,0.1); } .pm-title{ display:flex; align-items:center; gap:8px; flex: 1; justify-content: center; min-width: 0; } .pm-select{ appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; border: 1px solid rgba(0,0,0,0.1); background: var(--ht-day-bg); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; font-size: 16px; font-weight: 600; padding: 8px 32px 8px 12px; color: var(--ht-main); cursor: pointer; border-radius: 6px; transition: border-color 0.2s; min-width: 0; -webkit-tap-highlight-color: transparent; outline: none; background-color: var(--ht-day-bg) !important; } .pm-select::-ms-expand { display: none; } @supports (-webkit-appearance: none) { .pm-select { -webkit-appearance: none !important; } } .pm-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:13px; color:var(--ht-main); margin-bottom:8px; font-weight: 500; } .pm-weekdays div { padding: 8px 0; } .pm-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; min-height: 260px; padding:6px 4px; } .pm-day{ width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:14px; color:var(--ht-main); background:transparent; transition: transform .12s, opacity .14s, background-color .2s; user-select:none; cursor:pointer; padding:4px; box-sizing:border-box; position: relative; touch-action: manipulation; min-height: 32px; } .pm-day:not(.pm-empty):hover { transform: scale(1.05); } .pm-day:not(.pm-empty):active { transform: scale(0.95); } .pm-empty{ background:transparent; pointer-events:none; cursor: default; } .pm-day.today{ box-shadow: inset 0 0 0 2px rgba(66,133,244,0.3); font-weight: 600; } .pm-day.level-0{ background: var(--ht-lv-0); color: var(--ht-main); } .pm-day.level-1{ background: var(--ht-lv-1); color: var(--ht-main); } .pm-day.level-2{ background: var(--ht-lv-2); color: var(--ht-main); } .pm-day.level-3{ background: var(--ht-lv-3); color: #fff; font-weight:600; } .pm-day.level-4{ background: var(--ht-lv-4); color: #fff; font-weight:700; } .pm-legend{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; font-size:12px; color:var(--ht-main); } .legend-squares{ display:flex; gap:4px; align-items:center; margin:0 6px; } .legend-squares .sq{ width:16px; height:12px; border-radius:3px; display:inline-block; } .legend-squares .sq-0{ background:var(--ht-lv-0); } .legend-squares .sq-1{ background:var(--ht-lv-1); } .legend-squares .sq-2{ background:var(--ht-lv-2); } .legend-squares .sq-3{ background:var(--ht-lv-3); } .legend-squares .sq-4{ background:var(--ht-lv-4); } .pm-tooltip{ position:absolute; min-width:180px; max-width:320px; padding:12px; background:var(--ht-tooltip-bg); color:var(--ht-tooltip); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.15); font-size:13px; line-height:1.4; z-index:1000; opacity:0; pointer-events:none; transform-origin:center top; transition:opacity .2s, transform .2s; display: none; left: 0; top: 0; border: 1px solid rgba(0,0,0,0.1); } .pm-tooltip.visible{ display: block; opacity:1; pointer-events:auto; } .pm-tooltip .tp-date{ font-weight:700; margin-bottom:8px; font-size: 14px; } .pm-tooltip .tp-posts{ max-height:180px; overflow:auto; margin:0; padding:0; list-style:none; } .pm-tooltip .tp-posts::-webkit-scrollbar { width: 4px; } .pm-tooltip .tp-posts::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 2px; } .pm-tooltip .tp-posts::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; } .pm-tooltip .tp-posts li{ margin:6px 0; padding:0; } .pm-tooltip .tp-post-title{ color:var(--ht-tooltip); font-weight:500; display:block; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pm-tooltip .tp-post-meta{ color:#888; font-size:11px; margin-left:6px; } .pm-tooltip .tp-meta{ color:#666; font-size:12px; margin-top:8px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.1); } @media (max-width: 480px) { .pm-calendar{ padding: 12px; border-radius: 10px; margin: 8px; max-width: none; } .pm-select{ font-size: 16px !important; padding: 8px 32px 8px 12px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; } .pm-weekdays{ font-size: 12px; } .pm-weekdays div { padding: 6px 0; } .pm-day{ font-size: 13px; min-height: 28px; } .pm-days { gap: 6px; } .legend-squares .sq{ width: 14px; height: 10px; } .pm-tooltip{ font-size: 12px; min-width: 160px; max-width: calc(100vw - 32px); padding: 10px; } .pm-tooltip .tp-post-title { max-width: calc(100vw - 80px); } .pm-arrow { font-size: 18px; padding: 6px; min-width: 32px; height: 32px; } .pm-legend { font-size: 11px; gap: 6px; } } @media (prefers-color-scheme: dark) { :root { --ht-main: #94a3b8; --ht-day-bg: #161b22; --ht-tooltip: #ffffff; --ht-tooltip-bg: #1f2937; --ht-lv-0: #444444; --ht-lv-1: #666666; --ht-lv-2: #888888; --ht-lv-3: #aaaaaa; --ht-lv-4: #cccccc; } .pm-select { border-color: rgba(255,255,255,0.2); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important; } .pm-tooltip { box-shadow: 0 8px 24px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.1); } } .pm-day:focus { outline: 2px solid #4285f4; outline-offset: 2px; } .pm-select:focus { outline: 2px solid #4285f4; outline-offset: 1px; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .pm-select { font-size: 16px; } } </style> </head> <body> <div class="pm-calendar" id="pmCalendar"> <div class="pm-cal-header"> <button class="pm-arrow" id="calPrev" aria-label="上一月">◀</button> <div class="pm-title"> <select id="yearSelect" aria-label="选择年份" class="pm-select year-select"></select> <select id="monthSelect" aria-label="选择月份" class="pm-select month-select"></select> </div> <button class="pm-arrow" id="calNext" aria-label="下一月">▶</button> </div> <div class="pm-weekdays" aria-hidden="true"> <div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div> </div> <div class="pm-days" id="daysGrid" role="grid" aria-live="polite"></div> <div class="pm-legend" aria-hidden="true"> <span>less</span> <div class="legend-squares"> <span class="sq sq-0"></span> <span class="sq sq-1"></span> <span class="sq sq-2"></span> <span class="sq sq-3"></span> <span class="sq sq-4"></span> </div> <span>more</span> </div> <div id="pmTooltip" class="pm-tooltip" role="tooltip" aria-hidden="true"></div> </div> <script> var blogInfo = { "pages": [ { "title": "数字工具", "date": "2025-11-01", "year": "2025", "month": "11", "day": "01", "word_count": "1436" }, { "title": "卡片盒笔记法", "date": "2025-11-02", "year": "2025", "month": "11", "day": "02", "word_count": "646" }, { "title": "自律", "date": "2025-11-09", "year": "2025", "month": "11", "day": "09", "word_count": "711" }, { "title": "阅读札记 | 影响力", "date": "2025-11-23", "year": "2025", "month": "11", "day": "23", "word_count": "4908" }, { "title": "语言是什么", "date": "2026-03-29", "year": "2026", "month": "03", "day": "29", "word_count": "1396" } ] }; (function(){ const monthNames = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; const today = new Date(); let isTooltipVisible = false; let currentTooltipCell = null; const dailyStats = {}; if (window.blogInfo && Array.isArray(window.blogInfo.pages)) { window.blogInfo.pages.forEach(p => { if (!p.date) return; if (!dailyStats[p.date]) dailyStats[p.date] = { count:0, words:0, posts:[] }; dailyStats[p.date].count += 1; dailyStats[p.date].words += (Number(p.word_count) || 0); dailyStats[p.date].posts.push({ title: p.title, words: Number(p.word_count) || 0 }); }); } let curYear = today.getFullYear(); let curMonth = today.getMonth(); const yearSelect = document.getElementById('yearSelect'); const monthSelect = document.getElementById('monthSelect'); const daysGrid = document.getElementById('daysGrid'); const prevBtn = document.getElementById('calPrev'); const nextBtn = document.getElementById('calNext'); const tooltip = document.getElementById('pmTooltip'); const calendarRoot = document.getElementById('pmCalendar'); function buildSelectors(year, month){ const start = today.getFullYear() - 5; const end = today.getFullYear() + 5; let yhtml = ''; for (let y = start; y <= end; y++){ yhtml += `<option value="${y}" ${y===year? 'selected':''}>${y}年</option>`; } yearSelect.innerHTML = yhtml; monthSelect.innerHTML = monthNames.map((m,i)=>`<option value="${i}" ${i===month? 'selected':''}>${m}</option>`).join(''); } function wordsToLevel(words){ const w = Number(words) || 0; if (w === 0) return 0; if (w <= 100) return 1; if (w <= 500) return 2; if (w <= 1000) return 3; return 4; } function escapeHtml(str){ return String(str).replace(/[&<>"']/g, function(m){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]; }); } function makeTooltipHtml(dateKey, entry){ if (!entry || entry.count === 0) { return `<div class="tp-date">${dateKey}</div><div>无发布</div>`; } let html = `<div class="tp-date">${dateKey}</div><ul class="tp-posts">`; entry.posts.forEach(p => { const safeTitle = escapeHtml(p.title); html += `<li><span class="tp-post-title">${safeTitle}</span> <span class="tp-post-meta">(${p.words} 字)</span></li>`; }); html += `</ul><div class="tp-meta">共 ${entry.count} 篇 · ${entry.words} 字</div>`; return html; } function showTooltipForCell(cell, dateKey, entry){ if (isTooltipVisible && currentTooltipCell === cell) return; const wasVisible = isTooltipVisible; hideTooltip(); const showDelay = wasVisible ? 50 : 0; setTimeout(() => { currentTooltipCell = cell; isTooltipVisible = true; tooltip.innerHTML = makeTooltipHtml(dateKey, entry); tooltip.style.display = 'block'; tooltip.classList.remove('visible'); requestAnimationFrame(() => { const rootRect = calendarRoot.getBoundingClientRect(); const cellRect = cell.getBoundingClientRect(); requestAnimationFrame(() => { const tooltipRect = tooltip.getBoundingClientRect(); let centerX = (cellRect.left + cellRect.width/2) - rootRect.left; const halfTooltipWidth = tooltipRect.width / 2; centerX = Math.max(halfTooltipWidth + 8, centerX); centerX = Math.min(rootRect.width - halfTooltipWidth - 8, centerX); tooltip.style.left = `${centerX}px`; const spaceAbove = cellRect.top - rootRect.top; const spaceBelow = rootRect.bottom - cellRect.bottom; if (spaceAbove > tooltipRect.height + 16 || spaceAbove > spaceBelow) { const top = (cellRect.top - rootRect.top) - 12; tooltip.style.top = `${top}px`; tooltip.style.transform = 'translate(-50%, -100%)'; } else { const top = (cellRect.bottom - rootRect.top) + 12; tooltip.style.top = `${top}px`; tooltip.style.transform = 'translate(-50%, 0%)'; } tooltip.classList.add('visible'); tooltip.setAttribute('aria-hidden','false'); }); }); }, showDelay); } function hideTooltip(){ if (!isTooltipVisible) return; isTooltipVisible = false; currentTooltipCell = null; tooltip.classList.remove('visible'); tooltip.setAttribute('aria-hidden','true'); setTimeout(() => { if (!isTooltipVisible) { tooltip.style.display = 'none'; tooltip.style.left = ''; tooltip.style.top = ''; tooltip.innerHTML = ''; } }, 150); } function render(year, month){ daysGrid.innerHTML = ''; hideTooltip(); const firstWeekday = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month+1, 0).getDate(); for (let i=0;i<firstWeekday;i++){ const e = document.createElement('div'); e.className = 'pm-day pm-empty'; daysGrid.appendChild(e); } for (let d=1; d<=daysInMonth; d++){ const e = document.createElement('div'); e.className = 'pm-day'; e.setAttribute('role','button'); e.setAttribute('tabindex','0'); const span = document.createElement('span'); span.textContent = d; e.appendChild(span); if (year===today.getFullYear() && month===today.getMonth() && d===today.getDate()){ e.classList.add('today'); } const dateKey = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`; const entry = dailyStats[dateKey] || {count:0, words:0, posts:[]}; const lvl = wordsToLevel(entry.words); e.classList.add(`level-${lvl}`); e.addEventListener('mouseenter', (ev) => { if (window.matchMedia('(pointer: fine)').matches) { showTooltipForCell(e, dateKey, entry); } }); e.addEventListener('mouseleave', (ev) => { if (window.matchMedia('(pointer: fine)').matches) { hideTooltip(); } }); let touchStartTime = 0; e.addEventListener('touchstart', (ev) => { touchStartTime = Date.now(); }, { passive: true }); e.addEventListener('touchend', (ev) => { const touchDuration = Date.now() - touchStartTime; if (touchDuration < 500) { ev.preventDefault(); ev.stopPropagation(); if (isTooltipVisible && currentTooltipCell === e) { hideTooltip(); } else { showTooltipForCell(e, dateKey, entry); } } }); e.addEventListener('click', (ev) => { if (ev.detail === 0) return; ev.stopPropagation(); if (isTooltipVisible && currentTooltipCell === e) { hideTooltip(); } else { showTooltipForCell(e, dateKey, entry); } }); e.addEventListener('keydown', (ev) => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); if (isTooltipVisible && currentTooltipCell === e) { hideTooltip(); } else { showTooltipForCell(e, dateKey, entry); } } else if (ev.key === 'Escape') { hideTooltip(); } }); e.addEventListener('blur', ()=> { setTimeout(() => { if (!tooltip.matches(':hover') && !e.matches(':focus')) { hideTooltip(); } }, 100); }); daysGrid.appendChild(e); } const totalCells = firstWeekday + daysInMonth; const remainder = (7 - (totalCells % 7)) % 7; for (let i=0;i<remainder;i++){ const e = document.createElement('div'); e.className = 'pm-day pm-empty'; daysGrid.appendChild(e); } } document.addEventListener('click', (ev) => { if (!tooltip.contains(ev.target) && !ev.target.closest('.pm-day') && !ev.target.closest('.pm-tooltip')) { hideTooltip(); } }); let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { hideTooltip(); }, 100); }); window.addEventListener('scroll', () => { hideTooltip(); }, { passive: true }); prevBtn.addEventListener('click', ()=> { curMonth--; if (curMonth < 0){ curMonth = 11; curYear--; } buildSelectors(curYear, curMonth); render(curYear, curMonth); }); nextBtn.addEventListener('click', ()=> { curMonth++; if (curMonth > 11){ curMonth = 0; curYear++; } buildSelectors(curYear, curMonth); render(curYear, curMonth); }); yearSelect.addEventListener('change', (e)=>{ curYear = Number(e.target.value); buildSelectors(curYear, curMonth); render(curYear, curMonth); }); monthSelect.addEventListener('change', (e)=>{ curMonth = Number(e.target.value); buildSelectors(curYear, curMonth); render(curYear, curMonth); }); buildSelectors(curYear, curMonth); render(curYear, curMonth); })(); </script> </body> </html> My Bookshelf https://notes.shuohan.work/zh/bookshelf/ Mon, 01 Jan 0001 00:00:00 +0000 https://notes.shuohan.work/zh/bookshelf/