Skip to content

基本概念

PageFlow 將應用的路由和導航目標轉換成可探索的圖。理解以下五個概念,就能輕鬆使用其餘介面。

頁面

一個頁面代表 PageFlow 能夠渲染的具體路由。靜態路由可以立即使用;動態路由則需要提供具有代表性的參數值後才能渲染。

每個頁面可以包含標題、路由路徑、預覽、縮圖、導航連結和相關測試。查詢字串和雜湊可以保留更精確的導航位置,而不需要建立獨立的路由定義。

導航連結

連結是從一個頁面指向另一個頁面的有向關係。PageFlow 能夠探索受支援的路由連結、同源錨點、字面量程式化目標、瀏覽器歷史導航,以及 data-pageflow-to 等明確的框架提示。

計算得出的目標,可能只有在應用執行相關互動後才會被發現。

熱點

選擇頁面時,PageFlow 會醒目顯示能觸發已知導航的元素。熱點把視覺預覽和圖連接起來:不只顯示兩條路由之間的關係,也指出轉換在真實介面中的起點。

預覽與縮圖

選中的頁面使用即時同源 iframe。附近的其他頁面使用已擷取的預覽,讓畫布保持流暢。過期頁面在背景更新時,已快取的縮圖會繼續顯示。

路由群組

大型路由樹會折疊成卡組。進入卡組查看子項目,再使用麵包屑返回上層。群組能減少視覺雜訊,同時保留頁面之間的關係。

接下來

基於 MIT 授權條款發佈。