TYPO3多步骤无表单向导实现方案咨询（含多语言支持）

1. 基于Extbase+Fluid搭建核心架构 #

• 新建自定义扩展（例：site_wizard），用Extbase控制器处理步骤逻辑，Fluid视图负责渲染，这是TYPO3的标准开发模式，能避免冗余代码并适配多语言体系。
• 控制器内定义步骤配置数组，包含步骤标识、多语言标签、最终目标页面ID：

// Classes/Controller/WizardController.php
protected $steps = [
    1 => ['label' => 'LLL:EXT:site_wizard/Resources/Private/Language/locallang.xlf:wizard.step1', 'target' => null],
    2 => ['label' => 'LLL:EXT:site_wizard/Resources/Private/Language/locallang.xlf:wizard.step2', 'target' => null],
    3 => ['label' => 'LLL:EXT:site_wizard/Resources/Private/Language/locallang.xlf:wizard.step3', 'target' => 123], // 替换为实际最终页面ID
];

2. 用请求参数跟踪当前步骤 #

• 在控制器的indexAction中，通过请求参数获取当前步骤，默认设为1，同时做合法性校验防止非法输入：

public function indexAction()
{
    $currentStep = (int)$this->request->getArgument('step') ?: 1;
    if (!isset($this->steps[$currentStep])) {
        $currentStep = 1;
    }
    $this->view->assignMultiple([
        'currentStep' => $currentStep,
        'totalSteps' => count($this->steps),
        'steps' => $this->steps,
    ]);
}

3. 多语言适配：用TYPO3内置语言标签 #

• 所有文本（步骤标题、按钮文字）统一使用LLL:语法引用语言文件，Fluid会自动匹配当前站点语言：
  • 在Resources/Private/Language/locallang.xlf中定义多语言内容：

<?xml version="1.0" encoding="UTF-8"?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
    <file source-language="en" datatype="plaintext" original="messages">
        <body>
            <trans-unit id="wizard.step1">
                <source>Step 1: Introduction</source>
            </trans-unit>
            <trans-unit id="wizard.step2">
                <source>Step 2: Details</source>
            </trans-unit>
            <trans-unit id="wizard.step3">
                <source>Step 3: Confirmation</source>
            </trans-unit>
            <trans-unit id="wizard.button.next">
                <source>Next</source>
            </trans-unit>
            <trans-unit id="wizard.button.back">
                <source>Back</source>
            </trans-unit>
            <trans-unit id="wizard.button.finish">
                <source>Finish</source>
            </trans-unit>
        </body>
    </file>
</xliff>

4. Fluid视图渲染步骤指示器与按钮 #

• 循环生成步骤指示器，根据当前步骤标记激活状态：

<div class="step-indicator">
    <f:for each="{steps}" as="step" key="stepNumber">
        <span class="step-item{f:if(condition: stepNumber == currentStep, then: ' active')}">
            {f:translate(id: step.label)}
        </span>
    </f:for>
</div>

• 按钮逻辑：根据当前步骤显示返回、下一步或完成按钮，用f:link.action和f:link.page生成符合TYPO3规范的链接，自动处理多语言URL：

<div class="wizard-buttons">
    <!-- 返回按钮：仅当前步骤大于1时显示 -->
    <f:if condition="{currentStep} > 1">
        <f:link.action action="index" arguments="{step: currentStep - 1}" class="btn btn-back">
            {f:translate(id: 'LLL:EXT:site_wizard/Resources/Private/Language/locallang.xlf:wizard.button.back')}
        </f:link.action>
    </f:if>

    <!-- 下一步/完成按钮 -->
    <f:if condition="{currentStep} < {totalSteps}">
        <f:link.action action="index" arguments="{step: currentStep + 1}" class="btn btn-next">
            {f:translate(id: 'LLL:EXT:site_wizard/Resources/Private/Language/locallang.xlf:wizard.button.next')}
        </f:link.action>
    </f:if>
    <f:if condition="{currentStep} == {totalSteps}">
        <f:link.page pageUid="{steps[currentStep].target}" class="btn btn-finish">
            {f:translate(id: 'LLL:EXT:site_wizard/Resources/Private/Language/locallang.xlf:wizard.button.finish')}
        </f:link.page>
    </f:if>
</div>

5. 可选：轻量原生JS增强交互 #

• 如需步骤切换动画等效果，在Resources/Public/JavaScript/wizard.js中编写原生JS，通过TYPO3配置加载：

document.addEventListener('DOMContentLoaded', () => {
    const stepItems = document.querySelectorAll('.step-item');
    stepItems.forEach(item => {
        item.addEventListener('click', function() {
            const step = this.dataset.step; // 给步骤项添加data-step属性绑定步骤号
            window.location.href = this.getAttribute('href');
        });
    });
});

• 在ext_localconf.php中注册JS：

$GLOBALS['TYPO3_CONF_VARS']['FE']['pageOverlayShortcuts']['site_wizard'] = [
    'js' => 'EXT:site_wizard/Resources/Public/JavaScript/wizard.js',
];

6. 后端可配置化（进阶） #

• 注册插件并添加FlexForm配置，让编辑器可在后端可视化调整步骤数量、步骤标题、最终目标页面，替代硬编码的步骤数组：

// Configuration/TCA/Overrides/tt_content.php
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
    'SiteWizard',
    'Wizard',
    'Multi-step Wizard'
);

$GLOBALS['TCA']['tt_content']['types']['list']['subtypes_addlist']['sitewizard_wizard'] = 'pi_flexform';
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
    'sitewizard_wizard',
    'FILE:EXT:site_wizard/Configuration/FlexForms/Wizard.xml'
);

内容的提问来源于stack exchange，提问作者Djalal