README

Fluid Styleguide 是一个用于 TYPO3 项目的协作设计工具。它支持前端开发者创建可重用组件，并鼓励所有项目利益相关者之间的有效沟通。

尝试实时演示

目标群体

Fluid Styleguide 可以为所有项目利益相关者提供有用的工具

• 设计师和前端开发者可以改进他们的开发和QA工作流程
• 前端、后端和集成讨论和协调栈之间的数据结构和接口
• 项目经理和产品负责人可以查看项目组件的当前状态
• 客户可以更清晰地了解项目状态

功能

• 项目组件的可视化
• 组件的独立开发
• 响应式测试
• 集成组件文档
• 支持多语言
• 支持由TYPO3的资产收集器提供的前端资产
• 基于fluid-components-linter显示代码质量问题
• 基本皮肤以适应项目的品牌颜色
• zip下载
• 通过yaml文件进行简单灵活的配置
• 实时编辑示例数据[测试版]

入门

只需按照以下简单步骤即可开始使用风格指南

1. 安装Fluid Styleguide

   通过composer

    composer require sitegeist/fluid-styleguide
   

   或从TER下载扩展

   TER: fluid_styleguide

2. 使用演示组件测试Fluid Styleguide

   只需在您的TYPO3安装中打开页面 /fluid-styleguide/

    https://my-domain.tld/fluid-styleguide/
   

要向风格指南添加自己的组件，请遵循以下额外步骤

1. 配置Fluid Components

   请确保在您的 ext_localconf.php 中定义组件命名空间

   $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['fluid_components']['namespaces']['VENDOR\\MyExtension\\Components'] =
       \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');

   为 VENDOR 使用您自己的供应商名称，为 MyExtension 使用扩展名称，为 my_extension 使用扩展密钥。

2. 配置您的前端资产

   在您的扩展或站点包中创建一个风格指南配置文件。

   Configuration/Yaml/FluidStyleguide.yaml

   FluidStyleguide:
       ComponentAssets:
           Packages:
               'Vendor\MyExtension\Components':
                   Css:
                       - 'EXT:my_extension/Resources/Public/Css/Main.min.css'
                   Javascript:
                       - 'EXT:my_extension/Resources/Public/Javascript/Main.min.js'

   为 VENDOR 使用您自己的供应商名称，为 MyExtension 使用扩展名称，为 my_extension 使用扩展密钥。根据您的目录结构调整资产路径。

3. 使用Fluid Components和固定文件开始构建自己的组件

如果您有任何问题，需要支持或想讨论TYPO3中的组件，请随时加入#ext-fluid_components。

文档

• 使用Fluid Styleguide构建组件
• 风格指南配置参考