前端后端【免费下载链接】TiddlyWiki5A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.项目地址https://gitcode.com/gh_mirrors/ti/TiddlyWiki5点击查看免费下载本篇技术指南围绕 TiddlyWiki5 仓库中tiddlywiki-surveys这一 Edition 的自带迁移工具链展开讲解如何把一份保存在旧式静态 HTML 页面里的历史访谈项目The Great TiddlyWiki Interview Project 2010整体抽取、转换为 TiddlyWiki 的 tiddler 数据再导入 Edition 并构建为单文件 Wiki。读者将掌握浏览器开发者控制台脚本、Node.js 命令行--load/--savewikifolder流程、Shell 组装命令以及--build index构建的完整实战链路并理解每一环节背后的源码机制。背景Edition 里的数据迁移脚本在 editions/tiddlywiki-surveys/scripts/readme.md 中官方维护者保留了一套utility scripts这些脚本不是 TiddlyWiki 的运行时模块而是一次性数据迁移工具用途是从原始 HTML 文件中抽取 tiddlers。该目录下实际包含三个文件extract-text-tiddlers-via-console.js浏览器开发者控制台脚本负责解析旧 HTML 页面并生成 JSONimport-great-interview-project-json.shShell 脚本负责把 JSON 经 TiddlyWiki Node.js 命令加载并落盘为.tid文件readme.md完整的操作步骤说明。被迁移的对象是 2010 年的Great TiddlyWiki Interview Project——一份以 HTML 形式保存的社区访谈档案。迁移产物现在已存在于 editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project 目录下包含text/约 180 个.tid文本 tiddler与images/20 个受访者头像 jpg 及对应的.meta文件是验证这套工具链真实可用的现成样本。阅读前请注意readme 明确说明All pathnames in these instructions are relative to the root of this repository所有路径均相对于仓库根目录下述命令默认在仓库根目录执行并假设 Node.js 环境可用TiddlyWiki5 的入口为仓库根目录的 tiddlywiki.js。第一步在浏览器控制台执行抽取脚本打开原始 HTML用浏览器打开原始档案文件./editions/tiddlywiki-surveys/great-interview-project-2010/The great TiddlyWiki interview project.htm注意该 HTML 文件当前不在仓库中readme 的步骤假定你手上拥有这份旧档案例如从历史归档中取得脚本的运行并不依赖它常驻仓库。注入并运行控制台脚本打开浏览器开发者控制台DevTools把 extract-text-tiddlers-via-console.js 的完整内容粘贴进去执行。脚本会在页面上下文中解析 DOM产出两份关键结果通过copy(...)调用把 tiddlers 的 JSON 表示复制到剪贴板通过console.log(...)在控制台输出一条由mkdir -p、cp、echo命令用拼接而成的大命令。脚本末尾的两段核心逻辑分别对应这两个输出copy(JSON.stringify(tiddlers,null,4)); const commands [ mkdir -p ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images/ ]; for(const username in siteIconByUsername) { commands.push(cp ./editions/tiddlywiki-surveys/great-interview-project-2010/The great TiddlyWiki interview project_files/${siteIconByUsername[username]} ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images/${username}.jpg); const metafile title: $:/avatars/${username} type: image/jpeg tags: $:/tags/Avatar modifier: ${username} ; commands.push(echo ${metafile} ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images/${username}.jpg.meta); } console.log(commands.join( ));抽取脚本的数据建模从源码结构看该脚本将访谈组织为三级 tiddler 层次题目级 tiddler标题形如2010 - question例如2010 - What was it about TiddlyWiki that captured your interest?字段tags: [[2010 - Interview Question]]并通过list字段按时间倒序childTitles.reverse()挂接所有回答回答级 tiddler标题形如2010 - question - username - ISO 日期正文为回答的 HTMLanswer.querySelector(blockquote).innerHTML带icon: $:/avatars/username、modifier: username、modified等字段tags同时包含所属题目与2010 - Interview Answer总索引 tiddler标题2010 - Interview Question其list字段按题目顺序串联全部 18 个问题。脚本针对个别特殊问题做了分支处理对名为What do you think of the name TiddlyWiki and the term tiddler?的问题使用div.content div.viewer div.resultsArea ul li选择器其余问题统一使用div.resultsArea ul li——这说明原始 HTML 的 DOM 结构并不完全一致迁移脚本不得不针对特定页面结构做适配这是此类一次性脚本的常见现实。关键字段生成逻辑值得展开stringifyList()负责把数组序列化为 TiddlyWiki 的 WikiText 列表语法普通条目直接以空格连接含空白字符的条目自动包上[[...]]双层方括号正则/[\S\xA0]/mg匹配空白与不间断空格避免含空格的标题在list字段中被误切分回答日期来自answer.innerText.split(\n\n)[0]中 on 之后的文本经new Date()解析后格式化为 ISO 字符串头像文件名取自回答中.siteIcon img的src的最后一段路径modified字段被写成answerDate.toISOString().slice(0, 10).replace(/-/g, ) 000000000即YYYYMMDD加上 9 个零与 TiddlyWiki 内部约定的 17 位时间戳格式一致。这些细节可以从仓库中已生成的产物交叉验证例如 2010 - What was it about TiddlyWiki that captured your interest? - frankfurtkid - 2010-11-16T00_00_00.000Z.tid 的字段icon: $:/avatars/frankfurtkid、modified: 20101116000000000、tags: [[2010 - What was it about TiddlyWiki that captured your interest?]] [[2010 - Interview Answer]]与脚本生成逻辑完全吻合。保存 JSON 到 tmp 目录readme 第 3 步把剪贴板中的 JSON 粘贴保存到仓库根目录./tmp文件夹下的2010-great-interview-project.json。注意tmp是脚本约定的中转目录不属于任何 Edition 的 tiddlers 目录事后可清理。第二步用 Node.js 命令加载 JSON 并导出 Wiki 文件夹在仓库根目录的终端执行./editions/tiddlywiki-surveys/scripts/import-great-interview-project-json.sh该脚本内部依次完成两个动作为便于理解下面同时给出等价的逐条命令rm -rf ./tmp/2010-great-interview-project node ./tiddlywiki.js --load ./tmp/2010-great-interview-project.json --savewikifolder ./tmp/2010-great-interview-project rm -rf ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project mkdir ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project mkdir ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/text mkdir ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images cp ./tmp/2010-great-interview-project/tiddlers/2010* ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/text--load与--savewikifolder命令解读--load是 TiddlyWiki5 Node.js 端的标准加载命令声明于 core-server/commands/load.js可将.json、.tid等文件内容并入当前 Wiki 实例--savewikifolder命令定义于 core-server/commands/savewikifolder.js其职责是把当前 Wiki 保存为一个 wiki 文件夹。从 savewikifolder.js 的execute()实现可以看到两个实用细节可选的filter参数tiddlerFilter namedParames.filter || [all[tiddlers]]默认导出全部 tiddlers也可以传入过滤表达式只导出子集explodePlugins选项options.explodePlugins namedParames.explodePlugins || yes默认值为yes即把插件展开为其组成 shadow tiddlers 后一并保存对本次迁移无影响因为 JSON 里只有普通内容 tiddlers但了解该默认值有助于理解--savewikifolder的通用行为。两条命令通过链式执行的效果是先加载 JSON再把其中的每个 tiddler 以独立.tid文件形式写进./tmp/2010-great-interview-project/tiddlers/。将结果复制进 Edition 的 tiddlers 目录脚本随后在editions/tiddlywiki-surveys/tiddlers/下重建2010-great-interview-project目录结构text/与images/两个子目录并把tmp中标题以2010开头的.tid文件复制进text/。readme 第 67 步特别提醒从控制台复制那串大命令要小心——它是一个包含换行的大文本块最稳妥的做法是滚动到以mkdir -p开头的行向下选中直到末尾再粘贴到终端执行。第三步执行头像文件迁移命令将上一步从控制台复制的大命令粘贴到终端执行。它由三部分构成逐条理解如下创建图片目录mkdir -p ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images/复制头像图片对每个受访者把原始 HTML 资源目录..._files/文件夹中对应的头像文件复制为以用户名命名.jpg后缀的文件cp ./editions/tiddlywiki-surveys/great-interview-project-2010/The great TiddlyWiki interview project_files/siteIconByUsername[username] ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images/username.jpg生成头像元数据为每张图片写一个同名的.jpg.meta文件内容是标准的 TiddlyWiki 元数据头echo title: $:/avatars/username type: image/jpeg tags: $:/tags/Avatar modifier: username ./editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/images/username.jpg.meta.meta文件是 TiddlyWiki 文件夹式存储中文本内容与元数据分离的体现图片二进制本身放在.jpg其标题、类型、标签等元数据则写在同名.meta文件里。注意这里给每张图片指定的标题是$:/avatars/username与回答 tiddler 中的icon: $:/avatars/username字段一一对应从而让 Wiki 渲染回答时能正确显示对应头像。这一步可以直接对照仓库中的现成产物验证images/ 下的每个username.jpg都配有同名.jpg.meta例如 frankfurtkid.jpg.meta 内容为title: $:/avatars/frankfurtkid、type: image/jpeg、tags: $:/tags/Avatar、modifier: frankfurtkid。第四步构建 Wiki数据全部就位后在仓库根目录执行node ./tiddlywiki.js ./editions/tiddlywiki-surveys --build index--build index会读取 Edition 的 tiddlywiki.info 配置。该文件声明了构建目标index对应的命令build: { index: [ --render,$:/core/save/all,surveys.html,text/plain] }即以核心模板$:/core/save/all渲染整个 Wiki输出文件名为surveys.html类型为text/plain。构建产物将位于./editions/tiddlywiki-surveys/output/index.html说明readme 中的路径output/index.html是构建输出的描述性表述tiddlywiki.info中的--render参数指定的实际输出文件名是surveys.html二者均位于output/目录以实际运行结果为准。同一tiddlywiki.info还列出了该 Edition 依赖的插件tiddlywiki/jszip、tiddlywiki/xlsx-utils、tiddlywiki/filesystem与主题tiddlywiki/snowwhite、tiddlywiki/vanilla这些会在构建时自动装载。从 Edition 的 tiddlers 目录看xlsx-utils插件的引入与 2025 社区调查2025-community-survey 中的大量.json/.tid答卷相关可见该 Edition 是 TiddlyWiki 官方社区调研数据的长期存放地——2010 访谈与 2025 调查并存于同一个 Wiki 中。关键命令速查表步骤命令作用1浏览器打开great-interview-project-2010/The great TiddlyWiki interview project.htm加载旧 HTML 档案2DevTools 粘贴并运行 extract-text-tiddlers-via-console.js生成 tiddlers JSON复制到剪贴板 输出头像迁移命令3将 JSON 保存为./tmp/2010-great-interview-project.json准备中转数据4运行 import-great-interview-project-json.sh--load--savewikifolder把 JSON 转成.tid文件并复制进 Edition5粘贴控制台输出的mkdir -p ... cp ... echo ...大命令复制头像图片并生成.jpg.meta元数据6node ./tiddlywiki.js ./editions/tiddlywiki-surveys --build index构建单文件 Wiki 到output/迁移产物与数据模型验证整套工具链的最终形态可以直接在仓库中检验打开 editions/tiddlywiki-surveys/tiddlers/2010-great-interview-project/text/2010%20-%20Interview%20Question.tid可以看到总索引 tiddler 的list字段按顺序排列了全部 18 个问题而每个回答 tiddler如 frankfurtkid 的回答同时携带题目、回答者、日期、头像引用和标签构成了一个自洽的问题—回答树形数据结构。这套控制台脚本抽取 JSON 中转 Node.js 命令落盘 Shell 复制 构建的模式是 TiddlyWiki 处理旧式非结构化 HTML 档案的标准迁移路径之一其核心思想在于浏览器脚本负责最难办的 DOM 解析Node.js 端命令负责格式转换Shell 负责文件搬运三者各司其职、无需手写任何$tw运行时扩展即可完成整套数据入库。若你手头有类似的静态 HTML 访谈、论坛导出或旧 Wiki 快照完全可以参照这套流程把抽取脚本中的 DOM 选择器与字段映射替换成自己的页面结构复用到你自己的历史数据迁移项目中。赞分享前端后端【免费下载链接】TiddlyWiki5A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.项目地址https://gitcode.com/gh_mirrors/ti/TiddlyWiki5点击查看免费下载相关推荐Atuin 历史导入完全指南用 atuin import 将旧 Shell 历史无缝迁移进统一历史库Atuin 历史导入完全指南用 atuin import 将旧 Shell 历史无缝迁移进统一历史库 Atuin 通过 Shell 插件捕获新产生的命令历史CLI后端数据库SonarQube历史数据迁移全指南轻松实现旧版本数据导入新系统SonarQube历史数据迁移全指南轻松实现旧版本数据导入新系统 SonarQube作为业界领先的 持续代码质量检测平台 在企业软件开发过程中发挥着至关重要后端代码质量静态分析质量保障开发工具GitDiagram数据导入批量处理与历史数据迁移GitDiagram数据导入批量处理与历史数据迁移 痛点如何高效处理大量仓库的可视化需求 作为开发团队负责人你可能会遇到这样的场景公司有上百个GitHAI 应用开发者工具前端后端数据可视化上一篇Hatchet VS Code 扩展本地测试指南从 F5 调试、跨文件 LSP 验证到 vitest 自动化测试下一篇终极指南YuukiPS Launcher-PC多游戏启动工具完整使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考