[{"data":1,"prerenderedAt":544},["ShallowReactive",2],{"/posts/70c0223":3,"surround-/posts/70c0223":533},{"id":4,"title":5,"body":6,"categories":509,"date":511,"description":512,"draft":513,"extension":514,"image":515,"meta":516,"navigation":518,"path":519,"permalink":519,"published":520,"readingTime":521,"recommend":520,"references":520,"seo":526,"sitemap":527,"stem":528,"tags":529,"type":531,"updated":511,"__hash__":532},"content/posts/2026/recordTerminal.md","终端操作的录制与回放以及为技术博客添加动态终端演示",{"type":7,"value":8,"toc":479},"minimark",[9,12,19,31,39,42,56,70,73,76,171,187,195,210,212,260,263,272,279,285,306,309,317,322,329,332,344,347,353,356,362,369,377,380,387,390,396,399,405,411,415,418,421,424,427,433,439,442,445,462,470,473,476],[10,11,5],"h1",{"id":5},[13,14,16],"h2",{"id":15},"引言",[17,18,15],"strong",{},[20,21,22,23,26,27,30],"p",{},"写博客过程中发现每次到",[17,24,25],{},"展示终端操作","的时候，要么截图，要么直接在代码块输入，个人认为，前者不够美观，后者不够清晰。想到了之前在某些Github项目的主页见过的",[17,28,29],{},"终端操作录制后回放","。于是打算学习一下。",[13,32,34,35],{"id":33},"初探终端录制老牌神器-script","初探终端录制：老牌神器 ",[36,37,38],"code",{"code":38},"script",[20,40,41],{},"script是经典的记录终端会话的所有操作的命令，用来记录用户的所有操作和命令的输出信息。",[43,44,45],"blockquote",{},[20,46,47,48,51,52,55],{},"在",[17,49,50],{},"Mac系统下的script命令","和",[17,53,54],{},"Linux下的script命令","的用法是不一样的。",[57,58,60],"h3",{"id":59},"linux-script-与-scriptreplay-的基本用法",[17,61,62,63,65,66,69],{},"Linux： ",[36,64,38],{"code":38}," 与 ",[36,67,68],{"code":68},"scriptreplay"," 的基本用法",[20,71,72],{},"script负责录制，scriptreplay负责播放。",[74,75,38],"h4",{"id":38},[77,78,79,109,136,149],"ul",{},[80,81,82,85,86,88,89,92,93,96,97,100,101,104,105,108],"li",{},[17,83,84],{},"基本使用","：默认情况下，直接在终端输入 ",[36,87,38],{"code":38}," 并回车，它会开始记录并将内容保存到当前目录下名为 ",[36,90,91],{"code":91},"typescript"," 的文件中，使用 ",[36,94,95],{"code":95},"exit"," 命令或 ",[36,98,99],{"code":99},"Ctrl-D"," 即可结束录制。通常可以指定输出文件，如",[36,102,103],{"code":103},"script my_session.log","，将会话保存到",[36,106,107],{"code":107},"my_session.log","中。",[80,110,111,114,115,117,118,121,122,125,126,51,129,132,133,135],{},[17,112,113],{},"为回放做准备","：为了能够被",[36,116,68],{"code":68},"播放，同时需要生成时间戳文件，使用",[36,119,120],{"code":120},"-t","参数：",[36,123,124],{"code":124},"script --timing=time.txt session.log","。此时，会生成两个文件",[36,127,128],{"code":128},"time.txt",[36,130,131],{"code":131},"session.log","。这两个文件作为",[36,134,68],{"code":68},"的参数启动。",[80,137,138,141,142,145,146],{},[17,139,140],{},"运行单条命令","：使用 ",[36,143,144],{"code":144},"-c"," 选项可以直接录制并退出，例如 ",[36,147,148],{"code":148},"script -c 'ls -l' output.log",[80,150,151,154,155,158,159,162,163,166,167,170],{},[17,152,153],{},"强制无缓冲输出","：当你需要让其他人（或另一个进程）实时地、同步地看到你的终端操作时，可使用",[36,156,157],{"code":157},"-f","参数。你",[36,160,161],{"code":161},"script -f live","，另一个人执行",[36,164,165],{"code":165},"tail -f live","。可以",[17,168,169],{},"实时在另一个人那里显示你的操作内容","。",[172,173,175,182],"folding",{":close":174},"true",[176,177,179],"template",{"v-slot:title":178},"",[20,180,181],{},"强制无缓冲输出实践效果",[183,184],"video-embed",{"id":185,"type":186},"https://img.sky233.top/img/2026/04/0a8eaf331676fa0b27781865121d2f863b9afa5b5abd15aff8e11395d0cd6d79.mov","raw",[43,188,189],{},[20,190,191,192],{},"查看更多用法执行",[36,193,194],{"code":194},"man script",[43,196,197],{},[20,198,199,200,203,204,206,207],{},"⚠️ ",[17,201,202],{},"安全提示","：",[36,205,38],{"code":38}," 命令会",[17,208,209],{},"记录下你输入的所有内容，包括密码等敏感信息",[74,211,68],{"id":68},[77,213,214,229,246],{},[80,215,216,219,220,222,223,225,226],{},[17,217,218],{},"基本用法","：回放需要两个文件：时间戳文件（由 ",[36,221,38],{"code":38}," 的 ",[36,224,120],{"code":120}," 选项生成）和会话数据文件。例如 ",[36,227,228],{"code":228},"scriptreplay time.txt session.log",[80,230,231,141,234,237,238,241,242,245],{},[17,232,233],{},"调整播放速度",[36,235,236],{"code":236},"-d"," 参数可以调整回放速度。例如 ",[36,239,240],{"code":240},"-d 2"," 表示以两倍速播放，而 ",[36,243,244],{"code":244},"-d 0.5"," 则表示以半速播放",[80,247,248,251,252,255,256,259],{},[17,249,250],{},"设置最大延迟","：如果原始会话中两次操作之间的间隔时间过长（比如等待了5分钟），可以使用 ",[36,253,254],{"code":254},"-m"," 参数设置一个最大延迟时间。例如 ",[36,257,258],{"code":258},"-m 2"," 会强制将任何超过2秒的等待时间缩短为2秒，让回放更流畅",[74,261,262],{"id":262},"操作流程",[264,265,270],"pre",{"className":266,"code":268,"language":269,"meta":178},[267],"language-bash","# 1.开始录制\nscript --timing=my_time.txt my_session.log\n# 2.一系列操作\npwd\nls\n...\n# 3.结束录制\nexit\n# 4.回放\nscriptreplay my_time.txt my_session.log\n","bash",[36,271,268],{"__ignoreMap":178},[57,273,275,276,278],{"id":274},"macscript的基本用法","Mac：",[36,277,38],{"code":38},"的基本用法",[20,280,281,282,284],{},"在 macOS 上，",[36,283,38],{"code":38}," 命令的用法和 Linux（GNU 版本）有很大不同：",[286,287,288,300],"ol",{},[80,289,290,296,297,299],{},[17,291,292,293,295],{},"不需要单独的 ",[36,294,68],{"code":68}," 工具","：macOS 的 ",[36,298,38],{"code":38}," 直接内置了播放功能。",[80,301,302,305],{},[17,303,304],{},"不需要分成两个文件（时间+内容）","：macOS 只需要一个文件，它会将时间戳和终端输出打包记录在一起。",[74,307,262],{"id":308},"操作流程-1",[264,310,315],{"className":311,"code":313,"language":314,"meta":178},[312],"language-zsh","# 1.开始录制 -r(record)\nscript -r session.log\n# 2.操作命令\nls\npwd\n...\n# 3.退出录制\nexit\n# 4.回放录制 -p(playback)\nscript -p session.log\n","zsh",[36,316,313],{"__ignoreMap":178},[43,318,319],{},[20,320,321],{},"不过script不适合在网页预览，在网页中还需要用更现代的方案。",[13,323,325,326],{"id":324},"拥抱-asciinema","拥抱 ",[36,327,328],{"code":328},"asciinema",[20,330,331],{},"asciinema是一个更加现代化的跨平台工具 。",[43,333,334],{},[20,335,336,337],{},"以下内容来自官方文档：",[338,339,343],"a",{"href":340,"rel":341},"https://docs.asciinema.org/getting-started/#sharing",[342],"nofollow","Getting started - asciinema docs",[57,345,346],{"id":346},"安装",[264,348,351],{"className":349,"code":350,"language":314,"meta":178},[312],"# download a pre-built, static binary of the latest version from the releases page.\n# https://github.com/asciinema/asciinema/releases\n\n# Debian,Ubuntu\nsudo apt install asciinema\n\n# Arch,Manjaro\nsudo pacman -S asciinema\n\n# macOS\nbrew install asciinema\n\n# pipx (asciinema 2.4 only)\npipx install asciinema\n",[36,352,350],{"__ignoreMap":178},[57,354,355],{"id":355},"本地录播快速上手",[264,357,360],{"className":358,"code":359,"language":314,"meta":178},[312],"# 录制到demo.cast\nasciinema rec demo.cast\n\n# 播放demo.cast\nasciinema play demo.cast\n\n# 上传你的录制到asciinema.org，下载后会有七天的有效期，\nasciinema upload demo.cast\n",[36,361,359],{"__ignoreMap":178},[20,363,364],{},[365,366],"img",{"alt":367,"src":368},"image-20260414223220394","https://img.sky233.top/img/2026/04/b39c36ede1e7ad8f4aa26249ca10cc3e9c4a0a2d542556a0d0b50f4102e26acb.png",[20,370,371,372],{},"除了上传到官方，还可以用docker自己部署。参考以下链接：",[338,373,376],{"href":374,"rel":375},"https://docs.asciinema.org/getting-started/#self-hosting-the-server",[342],"Self-hosting the server",[57,378,379],{"id":379},"agg命令从录像转为gif",[20,381,382],{},[338,383,386],{"href":384,"rel":385},"https://docs.asciinema.org/manual/agg/installation/",[342],"Installation - asciinema docs",[20,388,389],{},"这个需要先去下载可执行文件，放到相关bin目录，或者直接执行。",[20,391,392],{},[365,393],{"alt":394,"src":395},"image-20260414224251689","https://img.sky233.top/img/2026/04/b71180561dd7704abad95854bacf3c7c3b4cf0b468a0a80556a04561fa3e6753.png",[20,397,398],{},"直接到GitHubRelease下载",[264,400,403],{"className":401,"code":402,"language":314,"meta":178},[312],"cd ~/Downloads\n# 前提~/.local/bin/agg在环境变量里\nmv agg-aarch64-apple-darwin ~/.local/bin/agg\nchmod +x ~/.local/bin/agg\n\n# 把hello.cast转为hello.gif\n➜  ~ agg hello.cast hello.gif\n16 / 16 [===========================================] 100.00 % 33.55/s\n",[36,404,402],{"__ignoreMap":178},[20,406,407],{},[365,408],{"alt":409,"src":410},"hello","https://img.sky233.top/img/2026/04/8211dedfaea4e570f9ee312a51dabc585ef3e31a2bd1b590246b8ffc77357ddd.gif",[57,412,414],{"id":413},"在-web-页面播放","在 Web 页面播放",[74,416,417],{"id":417},"嵌入已经上传的录制",[20,419,420],{},"默认upload是没有链接到任何账户的，在七天后会被删除，需要注册账户来保持。",[20,422,423],{},"或者自己部署一个上传站点。",[20,425,426],{},"当上传到网站之后，点击Share，",[20,428,429],{},[365,430],{"alt":431,"src":432},"image-20260414225338444","https://img.sky233.top/img/2026/04/c37e1144fa1f4a63d2be150b0b5d571fd079d1ec1ac941a2064adb8c732cae98.png",[20,434,435],{},[365,436],{"alt":437,"src":438},"image-20260414225517537","https://img.sky233.top/img/2026/04/974bf09abde88be4ad301deff1713f100c72142eb2fd798b494dd3be8895e29e.png",[20,440,441],{},"直接嵌入播放器到网站中。或用上面的Markdown和HTML的link跳转到播放站点。",[74,443,444],{"id":444},"直接在网页中播放文件",[20,446,447,448,51,451,454,455,458,459,170],{},"引入",[36,449,450],{"code":450},"asciinema-player.css",[36,452,453],{"code":453},"asciinema-player.min.js","，然后载入",[36,456,457],{"code":457},"cast","文件，挂载到",[36,460,461],{"code":461},"\u003Cdiv id=\"demo\">",[264,463,468],{"className":464,"code":466,"language":467,"meta":178},[465],"language-html","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  ...\n  \u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"/asciinema-player.css\" />\n  ...\n\u003C/head>\n\u003Cbody>\n  ...\n  \u003Cdiv id=\"demo\">\u003C/div>\n  ...\n  \u003Cscript src=\"/asciinema-player.min.js\">\u003C/script>\n  \u003Cscript>\n    AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'));\n  \u003C/script>\n\u003C/body>\n\u003C/html>\n","html",[36,469,466],{"__ignoreMap":178},[74,471,472],{"id":472},"其他",[20,474,475],{},"我这个博客框架需要在目录引入npm包，然后写个小组件嵌入，直接渲染js不安全。",[328,477],{"url":478},"https://img.sky233.top/img/2026/04/adacb940215128bde08b72a5a7a866df06724e5a307db2db2fe153e4eac2ec73.cast",{"title":178,"searchDepth":480,"depth":480,"links":481},4,[482,484,498],{"id":15,"depth":483,"text":15},2,{"id":33,"depth":483,"text":485,"children":486},"初探终端录制：老牌神器 script",[487,494],{"id":59,"depth":488,"text":489,"children":490},3,"Linux： script 与 scriptreplay 的基本用法",[491,492,493],{"id":38,"depth":480,"text":38},{"id":68,"depth":480,"text":68},{"id":262,"depth":480,"text":262},{"id":274,"depth":488,"text":495,"children":496},"Mac：script的基本用法",[497],{"id":308,"depth":480,"text":262},{"id":324,"depth":483,"text":499,"children":500},"拥抱 asciinema",[501,502,503,504],{"id":346,"depth":488,"text":346},{"id":355,"depth":488,"text":355},{"id":379,"depth":488,"text":379},{"id":413,"depth":488,"text":414,"children":505},[506,507,508],{"id":417,"depth":480,"text":417},{"id":444,"depth":480,"text":444},{"id":472,"depth":480,"text":472},[510],"Linux","2026-04-14 23:07:05","学习使用script命令和asciinema",false,"md","https://img.sky233.top/img/2026/04/e5e782126f39a710aa6e65b77352d06fc66c9247c6c7afba94ca83a910202e1f.png",{"slots":517},{},true,"/posts/70c0223",null,{"text":522,"minutes":523,"time":524,"words":525},"6 min read",5.94,356400,1188,{"title":5,"description":512},{"loc":519},"posts/2026/recordTerminal",[510,530],"博客扩展","tech","HZbOKviZlXi8JI0tjhTurnK3xxxJ4EsltzdFDBlZDJc",[534,539],{"title":535,"path":536,"stem":537,"date":538,"type":531,"children":-1},"复盘周刊#5 | end","/posts/1762688012","posts/2025/复盘周刊5","2025-11-09T19:33:32+08:00",{"title":540,"path":541,"stem":542,"date":543,"type":531,"children":-1},"🚲旧博客内容恢复","/2024","posts/2024/旧博客内容恢复","2024-05-12",1776189401468]