游乐游手机版
首页/前端开发/文章详情

如何让Twine/Harlowe中点击链接保持可见并可重复触发

时间:2026-07-23 22:09
在Twine Harlowe中,`(link:`宏创建的链接点击后自动消失,仅用于一次性交互;需重复多次触发时应使用`(link-rerun:`宏,该宏执行命令后链接保留且不会消失,非常适合弹窗、计数、切换开关等轻量级交互场景,使用时需要注意区分。
在 Twine 2 与 Harlowe 中,通过 (link:) 宏生成的链接默认具有“一次性”特性——点击后执行命令的同时链接自身会消失。若希望链接能够被反复点击并持续触发(例如多次弹窗),则应改用 (link-rerun:) 宏。

在 Twine 2 + Harlowe 环境下,使用 `(link:)` 宏创建的链接,默认行为是“单次触发”——点击后,宏执行完内部命令便会自动从页面中移除。若希望链接能够像“常驻”按钮一样,反复点击而不会消失,并能持续触发交互,则需要使用 `(link-rerun:)` 宏。

许多初次接触 Harlowe 的开发者,常会对 `(link:)` 点击后自动消失的行为感到困惑。实际上,这恰是它的设计目的——用于实现单次导航或一次性的交互动作。因此,其内部机制包含两个步骤:执行括号内的命令,以及将该链接元素从页面中移除。你看到的“点击后消失”并非 bug,而是有意为之的功能特性。

那么,如何让链接在点击后依然保留?解决方案是使用 `(link-rerun:)` 宏。其语法与 `(link:)` 完全相同,但语义截然不同。它仅执行内部命令,同时保留链接元素,不会触发页面跳转,也不会重新渲染整个段落,而是像一个小型插件一样,在原地响应交互。

✅ 正确的写法示例如下:

Thing (link-rerun: "Look at")[(alert: ["It's a thing"], "Sure.")]

⚠️ 使用时有几点需要注意:

  • `(link-rerun:)` 不会刷新段落或重载变量,因此非常适合用于轻量级交互,例如弹出提示、计数、状态切换等。
  • 如果希望在点击后更新文本内容,例如显示“已查看 3 次”,可以结合 `$(count)` 变量与自增运算来实现。
  • 避免在 `(link-rerun:)` 中放置耗时操作或大量 DOM 修改,否则可能导致响应延迟。
  • 同一个交互逻辑,不要混用 `(link:)` 和 `(link-rerun:)`,以免混淆语义,增加后期维护难度。

? 再分享一个小技巧:若希望添加视觉反馈,例如点击后变色,可以结合 CSS 类与 `enchant` 宏来动态添加样式。但核心的交互逻辑,仍需依靠 `(link-rerun:)` 来确保可持续触发。

来源:https://www.php.cn/faq/2805422.html
上一篇Jinja2 if语句内双花括号禁用:正确写法与陷阱解析 下一篇掌握JavaScript异步函数中try catch处理Promise拒绝的实战技巧详解
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
JavaScript数组字面量与构造函数创建稀疏数组的差异
前端开发 · 2026-07-25

JavaScript数组字面量与构造函数创建稀疏数组的差异

数组字面量创建稠密数组,空位默认为undefined;Array()构造函数传入单个数字参数会生成稀疏数组,索引不存在且遍历方法跳过,多参数或非数字参数则行为与字面量一致。初始化稠密数组应使用Array from或fill。

如何优化Bootstrap按钮的焦点状态环CSS样式方法详解
前端开发 · 2026-07-25

如何优化Bootstrap按钮的焦点状态环CSS样式方法详解

Bootstrap按钮焦点样式优化需将内阴影改为外发光,覆盖所有焦点选择器避免原生蓝边闪烁。使用:focus-visible区分键盘与鼠标交互,同时处理按钮组圆角、父容器溢出及浏览器兼容性,确保焦点反馈清晰且符合无障碍标准。

Less中强制转换CSS单位适配不同移动端方案详解
前端开发 · 2026-07-25

Less中强制转换CSS单位适配不同移动端方案详解

Less单位转换需手动完成:用unit()剥离单位,通过变量控制基准值,再拼接目标单位。px2rem函数须区分输入类型(纯数字、带px单位等),基准值@base-font-size需全局定义且不可在媒体查询中重定义。所有运算发生在编译期,适配需提前编译多套CSS文件。

Vue 插件开发与使用完整指南
前端开发 · 2026-07-25

Vue 插件开发与使用完整指南

Vue插件通过install方法为应用注入全局属性、组件、指令、混入和provide等扩展能力,注册时机须在createApp之后、mount之前。插件支持对象或函数形式,使用app use()注册。开发时需注意命名冲突、配置默认值及错误处理,确保工程健壮性。

CSS响应式视频全屏黑边排版问题解决方案
前端开发 · 2026-07-25

CSS响应式视频全屏黑边排版问题解决方案

CSS响应式视频全屏黑边源于盒子模型、定位与加载策略缺失。需重置body边距及溢出,父容器用position:fixed与100dvh,video设为block+object-fit:cover。autoplay需加muted、playsinline。移动端用100dvh防地址栏抖动,低端机分辨率不超1倍。