[{"data":1,"prerenderedAt":763},["ShallowReactive",2],{"notes-immersive-reading-design":3},{"id":4,"title":5,"body":6,"category":751,"date":752,"description":753,"extension":754,"meta":755,"navigation":756,"order":751,"path":757,"seo":758,"seoDescription":753,"seoTitle":759,"slug":760,"stem":761,"__hash__":762},"notes\u002Fnotes\u002F2026-05-08-immersive-reading-design.md","沉浸式阅读网站设计实践",{"type":7,"value":8,"toc":735},"minimark",[9,16,20,23,27,30,34,118,121,127,153,158,178,181,184,319,322,325,371,374,377,380,436,477,480,483,585,589,611,672,676,679,698,701,704,731],[10,11,12],"blockquote",{},[13,14,15],"p",{},"记录时间：2026-05-08",[17,18,19],"h2",{"id":19},"问题",[13,21,22],{},"为一个基于 Nuxt 3 + Vue 3 的中文内容网站（多元思维模型）设计沉浸式阅读体验。网站以 Markdown 长文为主要内容，需要在排版、配色、交互上全面优化阅读舒适度。",[17,24,26],{"id":25},"设计方向墨韵ink-charm","设计方向：墨韵（Ink Charm）",[13,28,29],{},"整体走温润的书卷气路线，不是冰冷的科技感，而是像翻开一本好书的感觉。",[31,32,33],"h3",{"id":33},"核心排版规范",[35,36,37,50],"table",{},[38,39,40],"thead",{},[41,42,43,47],"tr",{},[44,45,46],"th",{},"项目",[44,48,49],{},"规范",[51,52,53,62,70,78,86,94,102,110],"tbody",{},[41,54,55,59],{},[56,57,58],"td",{},"中文字体",[56,60,61],{},"霞鹜文楷（LXGW WenKai TC）—— 温润不刺眼",[41,63,64,67],{},[56,65,66],{},"英文\u002F数字",[56,68,69],{},"Inter",[41,71,72,75],{},[56,73,74],{},"正文字重",[56,76,77],{},"400（常规），拒绝粗黑生硬",[41,79,80,83],{},[56,81,82],{},"PC 正文字号",[56,84,85],{},"17-18px",[41,87,88,91],{},[56,89,90],{},"移动端正文字号",[56,92,93],{},"16px",[41,95,96,99],{},[56,97,98],{},"行高",[56,100,101],{},"1.7-1.8（长文不累眼）",[41,103,104,107],{},[56,105,106],{},"段间距",[56,108,109],{},"上下 1em，留白透气",[41,111,112,115],{},[56,113,114],{},"首行缩进",[56,116,117],{},"全局禁止（网文阅读更舒服）",[31,119,120],{"id":120},"配色方案",[13,122,123],{},[124,125,126],"strong",{},"浅色模式：",[128,129,130,139,146],"ul",{},[131,132,133,134,138],"li",{},"文字 ",[135,136,137],"code",{},"#2c2c2c","（非纯黑，护眼）",[131,140,141,142,145],{},"背景 ",[135,143,144],{},"#fafafa","（低饱和灰白）",[131,147,148,149,152],{},"链接 ",[135,150,151],{},"#4a7cad","（低饱和蓝，不浮夸）",[13,154,155],{},[124,156,157],{},"深色模式：",[128,159,160,165,171],{},[131,161,133,162],{},[135,163,164],{},"#e5e5e5",[131,166,141,167,170],{},[135,168,169],{},"#1a1a1a","（低饱和灰，不刺眼）",[131,172,173,174,177],{},"代码块 ",[135,175,176],{},"#282c34"," 柔和暗色背景",[31,179,180],{"id":180},"标题层级设计",[13,182,183],{},"h1 → h6 逐级缩小，不超大加粗，font-weight 统一用 600：",[185,186,191],"pre",{"className":187,"code":188,"language":189,"meta":190,"style":190},"language-css shiki shiki-themes github-light github-dark",".prose h1 { font-size: 24px; }\n.prose h2 { font-size: 20px; }\n.prose h3 { font-size: 17px; }\n.prose h4 { font-size: 15px; }\n.prose h5, .prose h6 { font-size: 14px; }\n","css","",[135,192,193,227,248,269,290],{"__ignoreMap":190},[194,195,198,202,206,210,214,217,220,224],"span",{"class":196,"line":197},"line",1,[194,199,201],{"class":200},"sScJk",".prose",[194,203,205],{"class":204},"s9eBZ"," h1",[194,207,209],{"class":208},"sVt8B"," { ",[194,211,213],{"class":212},"sj4cs","font-size",[194,215,216],{"class":208},": ",[194,218,219],{"class":212},"24",[194,221,223],{"class":222},"szBVR","px",[194,225,226],{"class":208},"; }\n",[194,228,230,232,235,237,239,241,244,246],{"class":196,"line":229},2,[194,231,201],{"class":200},[194,233,234],{"class":204}," h2",[194,236,209],{"class":208},[194,238,213],{"class":212},[194,240,216],{"class":208},[194,242,243],{"class":212},"20",[194,245,223],{"class":222},[194,247,226],{"class":208},[194,249,251,253,256,258,260,262,265,267],{"class":196,"line":250},3,[194,252,201],{"class":200},[194,254,255],{"class":204}," h3",[194,257,209],{"class":208},[194,259,213],{"class":212},[194,261,216],{"class":208},[194,263,264],{"class":212},"17",[194,266,223],{"class":222},[194,268,226],{"class":208},[194,270,272,274,277,279,281,283,286,288],{"class":196,"line":271},4,[194,273,201],{"class":200},[194,275,276],{"class":204}," h4",[194,278,209],{"class":208},[194,280,213],{"class":212},[194,282,216],{"class":208},[194,284,285],{"class":212},"15",[194,287,223],{"class":222},[194,289,226],{"class":208},[194,291,293,295,298,301,303,306,308,310,312,315,317],{"class":196,"line":292},5,[194,294,201],{"class":200},[194,296,297],{"class":204}," h5",[194,299,300],{"class":208},", ",[194,302,201],{"class":200},[194,304,305],{"class":204}," h6",[194,307,209],{"class":208},[194,309,213],{"class":212},[194,311,216],{"class":208},[194,313,314],{"class":212},"14",[194,316,223],{"class":222},[194,318,226],{"class":208},[13,320,321],{},"标题和正文之间间距拉开，层级清晰。",[31,323,324],{"id":324},"细节处理",[128,326,327,341,351,365],{},[131,328,329,332,333,336,337,340],{},[124,330,331],{},"图片","：",[135,334,335],{},"width: 100%"," 自适应 + ",[135,338,339],{},"border-radius: 6px"," 圆角",[131,342,343,346,347,350],{},[124,344,345],{},"引用块","：浅底色 ",[135,348,349],{},"var(--surface)"," + 左边 3px 细线，不抢视觉",[131,352,353,356,357,360,361,364],{},[124,354,355],{},"代码块","：柔和暗色背景，",[135,358,359],{},"white-space: pre-wrap"," 自动换行 + ",[135,362,363],{},"overflow-x: auto"," 横向滚动",[131,366,367,370],{},[124,368,369],{},"表格\u002F列表","：紧凑但不拥挤",[17,372,373],{"id":373},"交互增强",[31,375,376],{"id":376},"阅读进度条",[13,378,379],{},"页面顶部 2px 细条，accent 色，跟随滚动进度缩放：",[185,381,385],{"className":382,"code":383,"language":384,"meta":190,"style":190},"language-typescript shiki shiki-themes github-light github-dark","const readingProgress = ref(0)\n\u002F\u002F 在 scroll 事件中\nreadingProgress.value = scrollY \u002F (docHeight) \u002F\u002F 0~1\n","typescript",[135,386,387,410,416],{"__ignoreMap":190},[194,388,389,392,395,398,401,404,407],{"class":196,"line":197},[194,390,391],{"class":222},"const",[194,393,394],{"class":212}," readingProgress",[194,396,397],{"class":222}," =",[194,399,400],{"class":200}," ref",[194,402,403],{"class":208},"(",[194,405,406],{"class":212},"0",[194,408,409],{"class":208},")\n",[194,411,412],{"class":196,"line":229},[194,413,415],{"class":414},"sJ8bj","\u002F\u002F 在 scroll 事件中\n",[194,417,418,421,424,427,430,433],{"class":196,"line":250},[194,419,420],{"class":208},"readingProgress.value ",[194,422,423],{"class":222},"=",[194,425,426],{"class":208}," scrollY ",[194,428,429],{"class":222},"\u002F",[194,431,432],{"class":208}," (docHeight) ",[194,434,435],{"class":414},"\u002F\u002F 0~1\n",[185,437,441],{"className":438,"code":439,"language":440,"meta":190,"style":190},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"reading-progress-bar\"\n  :style=\"{ transform: `scaleX(${readingProgress})` }\" \u002F>\n","html",[135,442,443,460],{"__ignoreMap":190},[194,444,445,448,451,454,456],{"class":196,"line":197},[194,446,447],{"class":208},"\u003C",[194,449,450],{"class":204},"div",[194,452,453],{"class":200}," class",[194,455,423],{"class":208},[194,457,459],{"class":458},"sZZnC","\"reading-progress-bar\"\n",[194,461,462,465,467,470,474],{"class":196,"line":229},[194,463,464],{"class":200},"  :style",[194,466,423],{"class":208},[194,468,469],{"class":458},"\"{ transform: `scaleX(${readingProgress})` }\"",[194,471,473],{"class":472},"s7hpK"," \u002F",[194,475,476],{"class":208},">\n",[31,478,479],{"id":479},"自动隐藏导航栏",[13,481,482],{},"向下滚动超过 200px 后隐藏 header，向上滚动立即恢复。配合毛玻璃效果：",[185,484,486],{"className":187,"code":485,"language":189,"meta":190,"style":190},".header {\n  backdrop-filter: blur(12px) saturate(1.2);\n  transition: transform 0.35s ease;\n}\n.header--hidden {\n  transform: translateY(-100%);\n}\n",[135,487,488,496,527,547,552,559,580],{"__ignoreMap":190},[194,489,490,493],{"class":196,"line":197},[194,491,492],{"class":200},".header",[194,494,495],{"class":208}," {\n",[194,497,498,501,503,506,508,511,513,516,519,521,524],{"class":196,"line":229},[194,499,500],{"class":212},"  backdrop-filter",[194,502,216],{"class":208},[194,504,505],{"class":212},"blur",[194,507,403],{"class":208},[194,509,510],{"class":212},"12",[194,512,223],{"class":222},[194,514,515],{"class":208},") ",[194,517,518],{"class":212},"saturate",[194,520,403],{"class":208},[194,522,523],{"class":212},"1.2",[194,525,526],{"class":208},");\n",[194,528,529,532,535,538,541,544],{"class":196,"line":250},[194,530,531],{"class":212},"  transition",[194,533,534],{"class":208},": transform ",[194,536,537],{"class":212},"0.35",[194,539,540],{"class":222},"s",[194,542,543],{"class":212}," ease",[194,545,546],{"class":208},";\n",[194,548,549],{"class":196,"line":271},[194,550,551],{"class":208},"}\n",[194,553,554,557],{"class":196,"line":292},[194,555,556],{"class":200},".header--hidden",[194,558,495],{"class":208},[194,560,562,565,567,570,572,575,578],{"class":196,"line":561},6,[194,563,564],{"class":212},"  transform",[194,566,216],{"class":208},[194,568,569],{"class":212},"translateY",[194,571,403],{"class":208},[194,573,574],{"class":212},"-100",[194,576,577],{"class":222},"%",[194,579,526],{"class":208},[194,581,583],{"class":196,"line":582},7,[194,584,551],{"class":208},[31,586,588],{"id":587},"亮色暗色切换","亮色\u002F暗色切换",[128,590,591,602,605,608],{},[131,592,593,594,597,598,601],{},"使用 ",[135,595,596],{},"html.dark"," class 控制，替代 ",[135,599,600],{},"prefers-color-scheme"," media query",[131,603,604],{},"localStorage 持久化用户偏好",[131,606,607],{},"nuxt.config 注入内联脚本防止页面闪烁（FOUC）",[131,609,610],{},"按钮放在导航栏右侧，日\u002F月图标带旋转过渡动画",[185,612,614],{"className":382,"code":613,"language":384,"meta":190,"style":190},"\u002F\u002F composables\u002FuseTheme.ts\nfunction applyTheme(t: Theme) {\n  document.documentElement.classList.toggle('dark', t === 'dark')\n}\n",[135,615,616,621,644,668],{"__ignoreMap":190},[194,617,618],{"class":196,"line":197},[194,619,620],{"class":414},"\u002F\u002F composables\u002FuseTheme.ts\n",[194,622,623,626,629,631,635,638,641],{"class":196,"line":229},[194,624,625],{"class":222},"function",[194,627,628],{"class":200}," applyTheme",[194,630,403],{"class":208},[194,632,634],{"class":633},"s4XuR","t",[194,636,637],{"class":222},":",[194,639,640],{"class":200}," Theme",[194,642,643],{"class":208},") {\n",[194,645,646,649,652,654,657,660,663,666],{"class":196,"line":250},[194,647,648],{"class":208},"  document.documentElement.classList.",[194,650,651],{"class":200},"toggle",[194,653,403],{"class":208},[194,655,656],{"class":458},"'dark'",[194,658,659],{"class":208},", t ",[194,661,662],{"class":222},"===",[194,664,665],{"class":458}," 'dark'",[194,667,409],{"class":208},[194,669,670],{"class":196,"line":271},[194,671,551],{"class":208},[31,673,675],{"id":674},"文章目录toc布局","文章目录（TOC）布局",[13,677,678],{},"TOC 放在文章右侧比左侧更合理：",[128,680,681,684,687],{},[131,682,683],{},"主内容左对齐符合阅读视线起点",[131,685,686],{},"目录作为辅助导航放右侧不干扰阅读流",[131,688,689,690,693,694,697],{},"hover 时右边线高亮（",[135,691,692],{},"border-right"," 而非 ",[135,695,696],{},"border-left","）",[17,699,700],{"id":700},"小结",[13,702,703],{},"沉浸式阅读的核心不是花哨的动效，而是让读者忘记界面的存在。关键原则：",[705,706,707,713,719,725],"ol",{},[131,708,709,712],{},[124,710,711],{},"字体温润","：霞鹜文楷给中文长文最舒适的阅读感",[131,714,715,718],{},[124,716,717],{},"配色克制","：非纯黑文字、低饱和背景、低调链接色",[131,720,721,724],{},[124,722,723],{},"间距透气","：1em 段间距、1.8 行高，长文不累",[131,726,727,730],{},[124,728,729],{},"交互隐身","：导航自动隐藏、进度条极细、主题切换不突兀",[732,733,734],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":190,"searchDepth":229,"depth":229,"links":736},[737,738,744,750],{"id":19,"depth":229,"text":19},{"id":25,"depth":229,"text":26,"children":739},[740,741,742,743],{"id":33,"depth":250,"text":33},{"id":120,"depth":250,"text":120},{"id":180,"depth":250,"text":180},{"id":324,"depth":250,"text":324},{"id":373,"depth":229,"text":373,"children":745},[746,747,748,749],{"id":376,"depth":250,"text":376},{"id":479,"depth":250,"text":479},{"id":587,"depth":250,"text":588},{"id":674,"depth":250,"text":675},{"id":700,"depth":229,"text":700},null,"2026-05-08 00:00:00 CST","为思维模型网站设计沉浸式阅读体验，涵盖排版规范、主题切换、自动隐藏导航栏等完整方案。","md",{},true,"\u002Fnotes\u002F2026-05-08-immersive-reading-design",{"title":5,"description":753},"沉浸式阅读网站设计实践｜个人笔记","immersive-reading-design","notes\u002F2026-05-08-immersive-reading-design","ZwFFq1v_Cuo_nPMc9S0wzR1KNBqGARx0kOD4-i_oNA4",1778254613880]