简介这份源码包对应“诗意千年—唐朝诗人群像的数字展现”项目是计算机设计大赛的完整参赛作品适合数字媒体、可视化开发方向的参赛者和文化数字化爱好者参考。项目以唐朝诗人及其作品为分析对象结合诗人传记、诗歌文本与历史文献形成多维数据来源并通过可视化页面与交互设计呈现诗人群像。压缩包共109个文件大小44.68MB其中包含81个PNG图片素材、6个HTML页面、9个JavaScript脚本、4个CSS样式表以及JSON数据文件等结构上覆盖页面、样式、逻辑与数据分离的典型前端工程布局。目前已有160人学习下载可作为数字文化展示类作品从选题到落地的完整范例。获取后不仅得到可直接运行的源码还能配合作者的项目剖析文章理解数据采集、清洗与可视化设计思路便于二次开发或赛前速成参考。1. 诗意千年一个用前端拼出来的唐朝诗人数据可视化这个项目表面上挂着“计算机设计大赛作品”的名头拆开 zip 之后会发现它真正的技术底座是一套纯静态的 HTML CSS JavaScript 多页面站点而不是摘要里提到的虚拟现实或增强现实。index.html、1.html、2.html、3.html 按叙事顺序组织配合 navigation.css 做页面间流转page2_poem_test.html 和词云图 test.html 承担了最核心的数据可视化工作。对准备参加设计类竞赛的人来说这套源码的价值在于它示范了“文化题材 前端可视化”的完整落地路径不依赖后端不需要部署服务器浏览器打开即用。适合想快速理解数据可视化叙事结构、又不想从零搭架构的人参考。2. 源码结构与页面职责先读懂这根目录树拿到压缩包先别急着双击 index.html。这个项目的文件命名带着明显的开发痕迹——page1.css、page2.css、page3.css 是按页面拆分的样式表navigation.css 是公共导航而 1.html、2.html、3.html 与 index.html 构成了四个独立页面。这种组织方式虽然不算工程化但胜在直观哪一屏出了问题直接定位到对应文件就行。2.1 页面划分index、1、2、3 各自承担什么打开每个 HTML 的title和正文结构能还原出作者的叙事逻辑。常见做法是 index.html 作开场总览展示全唐诗的整体概貌1.html 进入诗人群体画像做生平分布2.html 聚焦代表诗人与作品3.html 做主题深化比如诗词意象分类。词云图 test.html 实际是 2.html 或 3.html 的内嵌组件只是开发时单独抽出来调试最后通过iframe或直接合并脚本引进去。这种多页面结构在展示类项目中很实用原因在于单页应用需要自己管理视图切换和状态同步而多页面天然隔离。比赛答辩时切换浏览器标签页比在同一页里点按钮切视图更稳不容易出现动画卡顿或脚本报错打断讲解。2.2 CSS 分文件与导航的衔接方式项目按页面拆分 CSS而不是按 reset / layout / theme 拆分说明作者是“页面优先”的思路。navigation.css 里定义的是公共头部或侧边导航控制各页面之间的按钮样式、hover 态和激活态。如果想让整体换主题色不需要动三份 page CSS直接在 navigation.css 的:root或公共变量上改更快。文件定位常见实现职责index.html开场引导页主题题字、背景动画、进入按钮1.html时代背景与诗人群像总览时间轴、诗人数量统计、分区展示2.html代表诗人作品展示诗人卡片、诗词列表、词云图容器3.html意象与数字深化高频词可视化、数据图表page2_poem_test.html2.html 的作品子页单篇诗词展示、注释翻页多页面之间跳转用a标签即可不需要引入路由库。常见做法是底部放“上一章 / 下一章”导航按钮用 CSS 的position: fixed固定在视口两侧配合z-index保持在内容之上。注意z-index值不要滥用 9999三个层级足够背景层、内容层、导航层。3. 词云图与诗人数据的可视化实现“数字展现”这个词看着抽象落到源码里其实就是两类东西诗人的生平数据表、诗词文本的词频统计。词云图 test.html 是这套源码里技术含量最高的文件值得单独拆开讲。3.1 词云图是怎么生成和渲染的词云图最常用的方案是 ECharts 的 wordcloud 扩展它基于 canvas 绘制对浏览器性能要求不高字体和排布可控。源码里引入的脚本顺序大致是先引 echarts.min.js再引 echarts-wordcloud.min.js然后创建一个div#wordCloud容器最后用echarts.init()初始化并传入 option。// 词云图核心配置基于 ECharts wordcloud 扩展 var chartDom document.getElementById(wordCloud); var myChart echarts.init(chartDom); // data 数组每项包含 name 和 valuevalue 对应词频 var wordData [ { name: 月, value: 286 }, { name: 酒, value: 223 }, { name: 风, value: 198 } ]; var option { tooltip: {}, series: [{ type: wordCloud, shape: circle, // 词云形状circle 圆型 / star 星型可选 left: center, top: center, width: 90%, height: 90%, gridSize: 8, // 网格间距值越小词越密8 是平衡值 sizeRange: [14, 60], // 字号范围值越大对比越强烈 rotationRange: [0, 0], // 旋转范围[0, 0] 表示全部横排 textStyle: { color: function () { // 随机取色保证视觉丰富且不单调 return rgb( [ Math.round(Math.random() * 160 60), Math.round(Math.random() * 160 60), Math.round(Math.random() * 160 60) ].join(,) ); } }, data: wordData }] }; myChart.setOption(option);这段代码的关键参数有三个。gridSize控制词与词之间的疏密调小到 4 以下会出现大量重叠调大到 16 以上词云会显得松散sizeRange决定词频差异的视觉表现最大字号与最小字号差距不宜超过 4 倍否则低频词几乎不可见。rotationRange在唐诗场景里建议设成[0, 0]因为竖排或旋转的词汇在宽屏展示中会降低阅读流畅度。3.2 词频数据从哪来文本清洗的预处理逻辑词云的效果取决于词频数据而不是绘图本身。做唐诗词云时第一步是把原诗文本中的“之、乎、者、也、兮”这类虚词去掉还需要排除“唐、诗、人”等主题词本身否则词云中心会被这些高误导性词占据。常见做法是维护一个停用词表在统计前过滤。// 统计诗词中出现的高频实词示意逻辑 function computeWordFreq(poemLines) { const stopWords new Set([之, 乎, 者, 也, 兮, 唐, 诗]); const freqMap {}; poemLines.forEach(line { // 去掉标点后按单字切分 const chars line.replace(/[。、\s]/g, ).split(); chars.forEach(ch { if (stopWords.has(ch)) return; freqMap[ch] (freqMap[ch] || 0) 1; }); }); // 转成词云需要的数组格式按频率倒序取前 100 个 return Object.entries(freqMap) .map(([name, value]) ({ name, value })) .sort((a, b) b.value - a.value) .slice(0, 100); }这段预处理逻辑值得细看replace正则负责剥离标点stopWords负责过滤虚词最后按频次排序截断。其中“按单字切分”适合唐诗因为古诗以单字表意为主如果是宋词或元曲建议改成双向最大匹配的分词算法否则“明月”会被拆成“明”和“月”两个字分别计数。切分策略直接决定词云内容是否符合语义。3.3 page2_poem_test.html 的诗词展示交互page2_poem_test.html 处理的是“点击诗人后展示哪几首诗”的逻辑。源码里的实现思路一般是提前把所有诗人的信息塞进一个 JavaScript 数组每个元素包含姓名、字号、生卒年、代表作品列表然后通过监听点击事件切换展示区内容。这种写法数据量不大时性能没问题但所有诗都挂在全局变量里初始加载就会解析完整个数组如果后续要扩展到几千首诗建议改为按需动态加载。!-- 诗词展示容器页面加载后由 JS 动态填充 -- div idpoemPanel h3 idpoetName李白/h3 p idpoemLines classpoem-text 床前明月光br 疑是地上霜 /p /div做竞赛展示时这个页面最关键的是字号与行距不能按桌面端习惯设置。答辩通常用投影或大屏默认 16px 字号在 1080p 投影下后排观众根本看不清。建议.poem-text的font-size设在 28px 到 36px 之间line-height至少 1.8 倍这样既保持古诗的节奏感又保证远距离可读。4. 动画、交互与数字展演的叙事节奏可视化项目的落地效果七分靠数据三分靠“怎么把数据演出来”。这一章讲源码里动画与交互的组织方式以及如何调整参数让整套页面在答辩氛围下更连贯。4.1 CSS3 动画与场景切换的节奏设计index.html 和 1.html 之间的转场源码中大概率用了 CSS 的fadeIn或opacity transition组合。这种淡入淡出是最稳妥的转场方式不依赖 JavaScript 定时器也不容易卡帧。想做得更有“数字展演”的味道可以加一层缓慢的缩放模拟镜头推进感。/* 场景切入动画透明度与缩放同步变化 */ .scene-enter { opacity: 0; transform: scale(1.02); animation: sceneFadeIn 1.2s ease-out forwards; } keyframes sceneFadeIn { 0% { opacity: 0; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }动画时长是叙事节奏的关键。1.2 秒的入场在答辩场景里刚好够观众扫一眼内容又不觉得拖沓如果页面内还有滚动加载的元素滚动触发动画建议控制在 0.6 到 0.8 秒太长会让人感觉页面迟钝。ease-out比linear更适合文化类题材因为先快后慢的减速曲线模拟了人眼聚拢焦点的过程视觉上更柔和。4.2 导航设计与章节逻辑的绑定navigation.css 里实现的导航本质是把四个页面串成一条叙事线。常见做法是“第一章、第二章”式的文字按钮当前页按钮高亮并禁用点击避免重复触发跳转。另一个容易被忽略的细节是页面切换时的滚动位置多页面跳转后浏览器默认从顶部加载如果 2.html 内容较长答辩演示时要从头滚到尾非常打断节奏。解决办法是在跳转链接上带锚点参数或者让每个页面都做成满屏一屏一屏翻而不是长滚动页。!-- 带面板定位的导航跳转防止新页面加载后停留在中间位置 -- a href2.html#poemPanel classnav-btn代表诗人/a满屏翻页方案对内容规划要求更高每一屏的素材量必须控制在 90% 视口高度以内否则内容溢出后还是需要滚动。从源码文件数量推算这个项目走的是“长页 锚点定位”的折中路线——词云图和诗人卡片密集的区域单独成页面背景概览性的内容用长页承载。4.3 数据来源与准确性对展示效果的约束诗人的生卒年、籍贯、代表作这些字段属于考据型数据做可视化前需要有意识地标识来源。源码里很可能把数据硬编码在 JavaScript 数组或 HTML 中这种方式维护成本高但比赛场景下胜在直观。需要警惕的是不同文献对生卒年的记载存在差异比如李白生年就有 701 年和 700 年两种说法。如果在大屏轮播中暴露这类争议数据答辩被评委追问会很被动统一口径非常重要可以优先采用《唐诗鉴赏辞典》或中华书局版本的标注并在备注字段里写明数据版本。5. 大屏布展与答辩演示的细节打磨这一章从“怎么把这个项目从能打开变成能拿奖”的角度整理几个实操层面的细节。项目到了最后阶段技术栈和页面结构基本定型真正拉开差距的是展示环节的表现力。5.1 上屏适配从笔记本到大屏投影比赛现场通常提供投影或大屏介入方式各异但最常见的还是 HDMI 直连。此时页面分辨率不会刚好匹配字体和布局会出现两个典型问题文字过小、背景图拉伸变形。先按 1920×1080 的常见输出分辨率设计页面基准然后加一组针对投影场景的基础样式兜底。/* 大屏展示模式字号整体上浮限制内容最大宽度 */ media screen and (min-width: 1600px) { html { font-size: 20px; /* 桌面端基准一般设 16px大屏提到 20px */ } .container { max-width: 1600px; /* 防止超宽屏内容被拉得过散 */ margin: 0 auto; } }字号上浮看起来简单但需要确认所有长度单位都用rem或em而不是px。如果源码里写死了font-size: 16px这里的基准调整不会生效。遇到这种情况可以在根元素上做一次全局覆盖将p、h1、h2、h3、li的font-size按比例放大优先调整视觉权重最高的标题和正文次要装饰性文字可以不动。5.2 答辩时的演示路径从词云切入还是从诗人切入答辩环节最怕的是照着页面顺序念稿评委看完第一屏就失去兴趣。这个项目的数据资产集中在词云图 test.html 和 page2_poem_test.html 上建议演示时先打开 2.html 的诗人卡片点击两三位代表诗人再切到词云图让观众先建立“这些诗人都写过什么”的感知再展示“哪些意象出现频率最高”最后用 3.html 的图表收尾形成“个体 → 群体 → 规律”的递进。这套路径背后对应的是认知负荷原理先看具体作品再理解统计数据比反过来更容易记住内容。5.3 隐藏调试痕迹dev 残留与布局兜底确认布展前全局搜索源码中是否存在debugger语句、console.log调试输出和未完成的test命名体比如“词云图test.html”。文件命名里的 test 字样在答辩时容易暴露开发痕迹建议正式展演前复制一份把文件名清洁化比如改为 cloud.html并同步修改引用关系。另外浏览器窗口尺寸变化时词云图如果固定了像素宽高小窗口会出现横向滚动条解决办法是监听window.resize事件重新设置图表宽高或者用echarts.init的自动 resize 逻辑配合容器百分比宽高这样无论现场接什么设备页面都不会破相。本文还有配套的精品资源点击获取