前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载本文是一份围绕 WordPress.com 开源前端项目 wp-calypso 中 Guided Tours 框架的完整技术指南。Guided Tours 是构建分步式产品引导的框架用于向不同经验水平的用户展示 Calypso 界面的特定区域。读完本文你将掌握 Guided Tours 的核心概念、触发机制、Tour/Step等配置元素的完整 API、目标元素定位方法、源码级架构原理以及调试技巧并能依据官方教程从零构建属于自己的引导式导览。什么是 Guided ToursGuided Tours 是 wp-calypso 中一个用于轻松构建引导式导览tour的框架帮助用户了解 Calypso 的特定功能区域。它的使命宣言清晰地阐述了设计初衷Calypso 功能强大因此并非所有人都能轻松理解。这导致太多用户被拒之门外。Guided Tours 框架让我们能够提供与上下文相关、与技能水平相匹配的导览引导用户了解 UI。这将让更多用户更早地在 Calypso 中发现价值。框架的核心设计哲学是show, dont tell展示而非告知导览不应仅仅向用户罗列 UI 元素的描述而应作为向导把点击按钮、输入文本、切换区块等实际操作留给用户自己完成只做方向性引导。正因如此Guided Tours 在概念上是凌驾于 Calypso UI 之上的元 UImeta UI——它的步骤样式刻意区别于默认 Calypso 设计让用户一眼就能看出它不属于正常 Calypso 界面的一部分。典型使用场景框架目前的主要应用场景包括帮助新用户明确下一步该做什么例如引导尚未写过博客的新用户完成第一篇博文的创作提供沉浸式教程面向半进阶用户解释 Publicize 等功能可基于用户行为触发也可通过特殊 URL如https://wordpress.com/?tourmain或 Redux action 触发纠正常见疏忽例如站点标题导览——当用户注册超过两天仍未把默认的 Site Title 修改掉时自动触发宣布新功能或功能变更。快速上手与文档导航阅读以下文档可帮助你快速掌握框架官方教程Building a Simple Tour从零构建一个导览API 总览API.md全部配置元素的 Props 详解架构深入ARCHITECTURE.md数据流、选择器与视图层设计调试技巧DEBUGGING.md代码示例examples/README.md现有导览清单仓库中当前注册的导览见 all-tours.js 与 config.js导览名称说明checklistSiteTitle站点标题清单检查jetpackChecklistJetpack 检查清单jetpackMonitoringJetpack 监控jetpackPluginUpdatesJetpack 插件更新jetpackSignInJetpack 登录jetpackSiteAcceleratorJetpack 站点加速jetpackVideoHostingJetpack 视频托管marketingConnectionsTour营销连接PublicizemediaBasicsTour媒体基础Guided Tours API 详解Guided Tours 以 JSX 元素树的形式声明所有配置元素均从client/layout/guided-tours/config-elements具名导出。核心元素包括Tour、Step、ButtonRow、Continue、Next、Quit、Link以及两个高阶辅助makeTour与combineTours。Tour导览的顶层容器Tour是一个 React 组件声明导览的顶层结构由一系列Step组成并通过设置相应 props 决定导览何时启动。它的 props 定义在源码 tour.js 中Prop类型说明namestring必填导览唯一名称使用 camelCaseversionstring版本标识通常使用日期字符串如20161224pathstring 或 array可选将导览限制到特定路径前缀支持数组如path{ [ /stats, /settings ] }whenfunction可选Redux selector定义导览启动条件childrennodes仅支持Step类型从源码可以看出Tour的渲染逻辑它从TourContext中读取当前step再从children中找到名字匹配的Step组件渲染未匹配则返回nulltour.js。三种触发方式任一即可启动导览路径 条件触发用户导航到与path匹配的路径且when求值为true同时没有其他正在运行或可触发的导览多导览竞争时取第一个匹配。每个用户通过该机制只触发一次。URL 查询参数触发URL 包含?tour导览名如?tourmain此时会忽略path、when及用户导览历史。Redux action 触发派发requestGuidedTour( tour )action同样忽略path、when与历史记录。// 带单个 step 的导览 Tour path/me nameexampleTour when{ isNewUser } Step…/Step /Tour;关于when的组合建议可使用and工具函数连接多个条件。注意求值顺序——and在第一个条件为false时立即停止求值utils.js若涉及 A/B 测试分组会直接影响用户归属同时按计算开销从低到高排序条件以便尽早退出。Step导览的最小单元Step定义导览的单个步骤以深色弹窗形式覆盖在 Calypso UI 之上可相对于任何 DOM 节点以多种方式定位。其完整 Props 定义见源码 step.tsxProp类型说明namestring必填步骤唯一标识第一步必须命名为inittargetstring可选步骤指向的 DOM 元素用于定位格式详见目标元素定位placementstring可选位置below、above、beside、center、middle、right、leftarrowstring可选边框上指向目标的箭头方向top-left、top-center、top-right、right-top、right-middle、right-bottom、bottom-left、bottom-center、bottom-right、left-top、left-middle、left-bottomstyleobject可选步骤的内联样式仅用于微调定位/z-index避免改变 Guided Tours 整体观感waitfunction可选若定义步骤将等待该函数完成返回Promise时在 resolve 后显示whenfunction可选Redux selector为false时阻止步骤显示此时应同时设置next指定跳转步骤nextstring可选当when求值为false时告诉框架跳转到哪个步骤shouldScrollToboolean可选为true时目标不可见则尝试滚动scrollContainerstring可选需要滚动的容器 CSS 选择器如侧边栏菜单项被滚动隐藏时传.sidebar__regionchildrencomponent渲染 proprender prop收到translate函数所有文本需包在p中获得正确样式onTargetDisappearfunction可选目标消失后调用收到含quit与next两个函数的对象可自行决定退出或前进waitForTargetboolean可选为true时仅当目标可见才渲染步骤一个覆盖大多数能力的完整示例Step nameexample placementbelow targetmy-sites arrowtop-left { ( { translate } ) ( Fragment pPlain text description./p pMultiple lines./p Continue stepnext-step click targetmy-sites iconmy-sites / ButtonRow Next stepnext-step / Quit / /ButtonRow Link hrefhttps://learn.wordpress.com { translate( Learn more about WordPress.com ) } /Link /Fragment ) } /Step;源码层面Step的渲染逻辑值得注意step.tsxchildren是一个渲染 prop只有步骤真正显示时才实例化组件并翻译字符串避免静态加载所有步骤这是性能设计的核心考量通过MutationObserver监听 DOM 变化watchTarget配合waitForTarget/onTargetDisappear/keepRepositioning处理目标出现与消失step.tsx窗口resize与滚动容器scroll事件都会触发重新定位onScrollOrResizestep.tsx当用户导航到不同 section 而当前步骤没有Continue分支或目标元素无法找到时框架会自动退出导览quitIfInvalidRoutestep.tsx。ButtonRow步骤操作按钮容器ButtonRow用于在Step中展示按钮控件并统一其样式通常作为步骤内容的最后元素承载所有可用操作Step { () ( Fragment pButtonRow Example/p ButtonRow Next stepnext-step / Quit / /ButtonRow /Fragment ) } /Step;Continue基于用户交互推进Continue根据用户与 Calypso 的交互编程式地推进到其他步骤。Propsstepstring要前进到的步骤名、targetstring被监听的 DOM 节点、clickbool为true时监听目标节点的onClick、hiddenbool不渲染任何内容但功能保留、iconstringGridicon 图标名、whenfunctionRedux selector求值为true时前进、childrennodes覆盖默认内容。三种内容呈现方式默认文案 Click to continue.无 children默认文案 GridiconClickiconto continue.通过iconprop 提供图标名如Continue iconmy-sites … /自定义内容作为 childrenContinue …My Content/Continue。两种推进条件// 用户点击带>// Redux selector 求值为 true 时继续此处为站点凭据已更新 Continue stepnext-step when{ siteHasCredentials } /;Next前进按钮Next显示一个允许用户前进到另一步骤的按钮须在ButtonRow内使用。stepprop 指定目标步骤名。默认标签为 Next可通过 children 覆盖// 默认标签 Next stepnext-step /;// 自定义标签 Next stepnext-step{ translate( Custom Label ) }/Next;Quit退出按钮Quit显示允许用户退出当前导览的按钮须在ButtonRow内使用。primarypropbool可选控制是否渲染为主按钮。默认标签为 Quit// 默认标签 Quit Quit /;// 自定义标签 Quit{ translate( Custom Label ) }/Quit;// 自定义标签 主按钮样式 Quit primary{ translate( Custom Label ) }/Quit;Link外部链接Link在Step中展示指向外部页面的链接负责样式处理并保证链接始终在新浏览器标签页打开。通常用在导览的最后一步引导用户查看文档深入了解刚才覆盖的区域。应将Link放在ButtonRow如有之后以保证样式正确Step { ( { translate } ) ( Fragment pThis is the last step!/p ButtonRow Quit / /ButtonRow Link hrefhttps://learn.wordpress.com { translate( Learn more about WordPress.com ) } /Link /Fragment ) } /Step;makeTour高阶组件包装makeTour是高阶组件确保你的Tour获得运行所需的全部数据并与 Guided Tours 框架正确连接。每个导览都必须用它包装export const MyTour makeTour( Tour namemy…/Tour );架构上makeTour创建出的组件原样渲染普通 JSX 树但会先将动态数据状态与绑定好的 actions通过 Reactcontext提供给子树详见下文架构章节。combineTours框架顶层工厂combineTours是 Guided Tours 顶层组件的工厂函数接受一个包含各导览的对象作为唯一参数。新增导览时必须同时把它加入两个注册文件见教程部分combineTours( { main: MainTour, anotherTour: AnotherTour, thirdTour: ThirdTour, } );目标元素定位Targeting ElementsGuided Tours 的核心能力之一是定位 Calypso 中的 DOM 元素通过document.querySelector实现。定位方式有两种方式一data-tip-target属性推荐在目标元素上添加data-tip-targetsome-name属性命名要具体、避免冲突、使用 dash-case。然后在导览的targetprop 中填入对应值。默认查询式为[data-tip-target${target}]。相比 CSS 类此方式优势明显元素标记更显式逻辑与 CSS 解耦CSS 只应负责样式且命名不常见、可轻松追溯到 Guided Tours 框架不易被他人改动。 { /* Calypso 中的某处代码 */ } input typetext nameexample value{ value }>// 按类选择 Step target.sidebar-activity__likes /;// 组合类确定状态——选择 masterbar 的激活项 Step target.masterbar__item.is-active /;// 检测状态has-thumbnail并选择子元素特色图片 Step target.reader-post-card.has-thumbnail .reader-post-card__featured-image /;// 按 id 定位 Step target#header /;特殊案例Step target body /;注意body前的空格——这是一个hack强制框架把值直接当 CSS 选择器而非[data-tip-targetbody]处理。文档明确建议优先采用其他方式CSS 类、ID、自定义属性而非此 hack。实战教程构建一个简单导览官方教程 TUTORIAL.md 以View Site查看站点导览为例完整演示开发流程。请注意这只是一个示例导览不是真实上线内容其步骤序列与文案未经多轮打磨。第一步明确目标动手前先想清楚导览要实现什么目标以及如何度量目标达成。本例目标是让新用户理解站点预览的位置与用法期望指标是导览上线后新用户对站点预览使用率的提升。官方经验开发者与设计师必要时还可加入其他角色结对协作效果更好。第二步规划步骤初始草案4 步询问用户是否想学习如何预览站点指向站点预览告诉用户点击站点标题打开预览预览显示时解释这就是站点预览结束导览。建议先做尽量短的导览看效果之后随时可再补充步骤。据此精简不需要询问步骤也不需要专门结束步骤可以预览保持打开状态结束让用户自由探索。最终确定为 2 步指向 View Site提供 Quit 按钮方便用户退出告诉用户点击站点标题了解预览解释预览预览保持打开状态下结束导览。第三步决定触发条件触发需要提供路径列表与触发函数。本例在用户查看统计信息时触发因此path设为[ /stats ]实现中单个路径也可直接用字符串。通过when限定仅注册 7 天内的新用户并加一层当前站点可被 View Site 预览的守卫。第四步编写导览脚手架在client/layout/guided-tours/tours下新建目录内含meta.js与index.js两个文件。meta.js空模板import { and } from calypso/layout/guided-tours/utils; export default {};index.js基础模板导入 makeTour包装import { makeTour, Tour, Step, ButtonRow, Quit, Continue, } from calypso/layout/guided-tours/config-elements; import { isNewUser } from calypso/state/guided-tours/contexts; import meta from ./meta; export const TutorialSitePreviewTour makeTour();注册到配置列表config.js… import { SiteTitleTour } from layout/guided-tours/tours/site-title-tour; import { TutorialSitePreviewTourMeta } from layout/guided-tours/tours/tutorial-site-preview-tour/meta; export default { … siteTitle: SiteTitleTour, tutorialSitePreview: TutorialSitePreviewTourMeta,注册到导览列表all-tours.js… import { SiteTitleTour } from layout/guided-tours/tours/site-title-tour; import { TutorialSitePreviewTour } from layout/guided-tours/tours/tutorial-site-preview-tour; export default combineTours( { … siteTitle: SiteTitleTour, tutorialSitePreview: TutorialSitePreviewTour,添加 feature flag在对应环境的配置文件中加入guided-tours/tutorial-site-preview: true。重要务必用 feature flag 确保导览只在所需功能齐备的环境中触发。尤其是desktop环境因其运行上下文与发布周期不同可能与一般 Calypso 有差异。配置导览元数据meta.jsexport default { name: sitePreview, version: 20170104, path: /stats, when: and( isEnabled( guided-tours/main ), isSelectedSitePreviewable, isNewUser ), };name导览名必须与 config.js 中的 key 一致combineTours内部用它引用导览?tourTOURNAME查询参数也靠它强制启动version版本号通常用创建日期YYYYMMDD格式path触发导览的 URL 路径部分也可是数组when框架测试是否触发的布尔函数第一个检查应为该导览的 feature flag 是否启用isSelectedSitePreviewable当前站点无法预览时防止显示此步骤。编写导览组件index.jsexport const TutorialSitePreviewTour makeTour( Tour { ...meta } !-- 导览步骤写在这里 ... -- /Tour );第五步添加第一个 StepStep nameinit targetsitePreview arrowtop-left placementbelow scrollContainer.sidebar__region { ( { translate } ) ( Fragment p { translate( {{strong}}View Site{{/strong}} shows you what your site looks like to visitors. Click it to continue., { components: { strong: strong / } }, ) } /p Continue hidden click stepfinish targetsitePreview / ButtonRow Quit subtle{ translate( No, thanks. ) }/Quit /ButtonRow /Fragment ) } /Step关键要点Step的children不是普通 JSX 标记而是渲染 prop——组件会在步骤实际渲染时才被调用并传入translate函数。这是性能设计加载模块时无需实例化所有步骤的 JSX、翻译所有字符串导览第一个步骤必须命名为init框架才能识别为起始步骤target是步骤要粘附或指向的 DOM 元素可通过data-tip-target名称或 CSS 选择器指定scrollContainer告诉框架目标不可见时滚动哪个容器——本例会滚动侧边栏直到站点预览按钮可见translate调用应在文案多轮打磨后才加入一旦合并进主干字符串就会被翻译不要浪费翻译人员时间Continue的属性含义用户click了target后推进到名为finish的下一步hidden告诉框架不在步骤下方添加解释文本ButtonRow中的Quit按钮虽然观感一般但提供显式退出途径非常重要。框架也会在认为用户试图离开时自动退出导览但显式提供更稳妥。第六步添加第二个 StepStep namefinish placementcenter { ( { translate } ) ( Fragment p { translate( Take a look around — and when youre done, explore the rest of WordPress.com. ) } /p ButtonRow Quit primary{ translate( Got it. ) }/Quit /ButtonRow /Fragment ) } /Step第七步验证通过 URL 直接触发查看效果需将SITE_URL替换为你的站点地址http://calypso.localhost:3000/stats/insights/SITE_URL?tourtutorialSitePreview更多实用技巧自定义样式自动定位已正确指向目标但视觉重心偏差几像素时可微调样式Step ... style{ { marginTop: -15px, zIndex: 1 } } Caveat请尽量少用或不用——Guided Tours 的整体样式应保持全 Calypso 一致。添加延迟若第一个步骤带入场动画可通过animationDelay有效延迟导览开始为内容渲染争取时间style{ { animationDelay: 10s, } }Caveat同样建议少用先自问是否能用更好的when选择器解决。处理异步加载Calypso 存在两类按需加载——webpack 代码分割的代码块以及 Redux action 层的数据请求。当用户导航到新 section 时代码与数据可能都未就绪若新步骤已渲染但目标数据未到就会出现定位错乱甚至导览莫名退出的竞态 bug开发环境因本地加载延迟低常被忽略。修复方案让 Guided Tours 通过通用的actionLog订阅相应的数据请求——将标志数据就绪的 action 类型如RECEIVE_FOOS、REQUEST_FOOS_SUCCESS加入actionLog的白名单任何actionLog变化都会触发 Guided Tours 视图层更新从而正确及时地定位步骤。架构原理actionLog 与选择器驱动数据层actionLog与派生状态Guided Tours 的架构围绕一个核心前提设计必须足够灵活以容纳各种导览与触发方式而触发方式本身还是未知的。由此诞生了actionLog——一张Redux actions 列表每条带时间戳收录已派发且 action type 在白名单relevant types中的 actions。设计要点state.ui.actionLog永不持久化每个 Calypso 会话初始为空列表最多保留最近 50 条actions更旧的被挤出。基于actionLog可以编写任意数量的选择器进行组合派生收集ROUTE_SET得到最近导航历史收集FETCH_FOOS_SUCCESS让导览在特定数据从服务器取回后才过渡到新步骤理论上还可推断更复杂的行为模式如用户快速进出多个 section 却找不到某功能可判断其在寻找特定功能并情境化地提供帮助。当前框架只有一种触发族基于特定路径导航的触发即Tour path/themes这种写法。Guided Tours 几乎没有显式状态如当前在哪个步骤导览耗时多久而是尽可能依赖actionLog——内含专用于标记导览过渡的GUIDED_TOUR_UPDATEaction。结果不是假设中的state.guidedTours.isTourRunning Tour /而是一串最终计算出 Guided Tours 状态的选择器级联借助createSelector大量记忆化getGuidedTourState └── findEligibleTour ├── findOngoingTour └── findTriggeredTour └── getToursFromFeaturesReached决策算法findEligibleTour外部唯一选择器是getGuidedTourState它包装findEligibleTour——决策算法的骨架清晰可见export const findEligibleTour createSelector( ( state ) { if ( shouldBailAllTours( state ) ) { return; } return ( findOngoingTour( state ) || ( ! shouldBailNewTours( state ) ( findRequestedTour( state ) || findTriggeredTour( state ) ) ) || undefined ); }, // 依赖项有意收敛为以下两个 [ getActionLog, getToursHistory ] );逐条解读主要信息源是actionLog与导览历史state.preferences中的用户偏好除若干退出bail机制外决策顺序为优先进行中的导览→ 显式请求的导览?tourtourName查询参数→ 基于actionLog中记录的 actions 可触发的导览若皆无undefined表示不选择任何导览。findTriggeredTour是可扩展的选择器const findTriggeredTour ( state ) { const toursFromTriggers [ ...new Set( [ ...getToursFromFeaturesReached( state ), // 目前只有一个派生来源未来可能更多。例如 // ...getToursFromPurchases( state ), // ...getToursFromFirstActions( state ), ] ), ]; const toursToDismiss [ ...new Set( [ // 同理。 ...getToursSeen( state ), ] ), ]; const newTours difference( toursFromTriggers, toursToDismiss ); return find( newTours, ( tour ) { const { when constant( true ) } find( relevantFeatures, { tour } ); return when( state ); } ); };三步逻辑① 找出匹配现有触发器的导览当前即getToursFromFeaturesReached——path属性匹配最近导航历史的导览列表② 剔除需驳回的导览当前即已看过的导览③ 返回第一个有效导览——无when属性或when( state )求值为true。when是导览自定义启动条件的动态机制期望返回布尔值。视图层GuidedTours → AllTours → 导览组件最外层是单个组件GuidedTours渲染在 Calypso 的Layout中本质是一个包装器负责子系统数据需求通过connect与QueryPreferences绑定 Redux action creators 供后续使用在RootChild中渲染AllTours——因为步骤的 DOM 节点不能绑定到Layout或任何特定子树。AllTours由combineTours创建导入自 all-tours.js内部像开关一样只渲染上层传入tourName对应的导览。一个导览本质上是无状态、基于类、感知生命周期的组件但并非显式写成 React 组件而是把普通 JSX 元素树传给makeTour。设计决策导览的编写接口应简单不应让作者负担收集和传递 props 的工作因此需要魔法——框架需感知两类数据静态的每导览数据步骤组成、定位方式等——导览作者用普通 JSX 编写动态的 Guided Tours 状态是否在导览中、当前步骤等——从GuidedTours一路传下来。早期方案基于React.cloneElement因每次渲染都克隆带来性能问题与生命周期 bug非常有趣的 bug。解决方案是利用 React contextmakeTour创建的组件原样渲染 JSX 树不改动但先把动态数据状态与绑定 actions通过 context 提供给子树。TourContext的类型定义见 context.ts包含step、tour、tourVersion、branching、isValid、isLastStep、next、quit、start等成员。最终的普通 JSX 导览描述由一组配置元素Tour、Step、Next、Continue、Quit构建步骤流程这些组件感知 context内含设置导览控制流的专门逻辑。定位原理步骤定位通过Step的placement属性配置与target、arrow协同工作使用 positioning.ts 定位库最终得到(x, y)坐标对转换为left/right, top一组 CSS 属性附加到步骤元素上。因为步骤是RootChild的子元素避免被 Calypso 的 CSS 如overflow: hidden约束它们并不附着在指向的 UI 元素target上而是贴近文档根。这带来一系列含义定位必须精确计算以模拟贴近目标的视觉效果z-index 差异偶尔需要修正滚动要求定位逻辑知道目标更靠近哪个滚动容器更重要的是定位是相对静态的过程需要适时刷新——窗口滚动与缩放是框架自动防护的场景但任何布局变化都可能造成偏差如视图上正在加载的图片长大会改变布局。调试指南排查常见问题问题一导览不再重复显示导览显示一次后会记入用户的 guided tours history此后不再显示。排查方法开启 Guided Tours 调试信息localStorage.setItem( debug, calypso:guided* )Guided Tours 计算eligibleTours reachedTours - seenTours若你的导览在seen数组中就必须重置历史。目前没有系统化的历史清除方式可通过应用补丁清空在应用根目录执行git apply client/layout/guided-tours/docs/patch/clean-history.patch重新加载页面清除历史后再移除该补丁。问题二只有通过查询参数才能触发若导览只在?tourTOURNAME下显示检查三个位置用户偏好是否缺失Guided Tours 调试输出应包含类似No fresh user preferences, bailing.的行。常见诱因是 2FA token 过期——访问/me区禁用 2FA 或输入有效验证码Tour path/path路径是否真的被访问若路径已到达导览应出现在reachedTours调试输出中触发函数Tour name… when…中的when函数以及步骤级when条件。参考文档汇总文档路径用途框架总览README.md概念、场景、使命构建教程TUTORIAL.md从零实战API 参考API.md全部 Props 详解架构深入ARCHITECTURE.md数据流、选择器、视图调试技巧DEBUGGING.md常见问题排查示例代码examples/README.md灵感与起点配置元素源码config-elementsTour/Step等实现导览注册all-tours.js 与 config.js新增导览的注册入口测试test/分支逻辑与工具函数测试赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso LanguagePicker 组件完全指南从 Props 到源码实现wp calypso LanguagePicker 组件完全指南从 Props 到源码实现 导读 LanguagePicker 是 wp calypso 中用前端CMS浏览器资源嗅探扩展猫抓3 步保存网页里的音视频文件浏览器资源嗅探扩展猫抓3 步保存网页里的音视频文件 猫抓cat catch是一款开源浏览器资源嗅探扩展它监听当前页面的网络请求把其中的音视频资源自动列前端CMSwp-calypso DatePicker 组件实战指南从 props 到源码实现的完整解析wp calypso DatePicker 组件实战指南从 props 到源码实现的完整解析 导读 DatePicker 是 wp calypsoWordP前端CMS上一篇Krell REPL完全指南实时交互开发React Native应用下一篇SeargeSDXL重新定义AI图像创作的智能助手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考