README

这提供了一个与FCCN的webapp骨架项目集成的网络组件集合。以下提供了以下组件

• 外部库加载器 - 加载由composer和npm安装的外部JavaScript库。
• 语言切换器操作 - 用于切换网站语言的控制器操作

安装

您可以使用composer在项目中安装此集合

composer require fccn/webapp-tools-web-components

配置

从Webapp Tools - common项目中的网站配置加载器用于集中管理每个组件的配置。您需要按照以下部分所述，在网站配置文件中添加一组特定的键值对。

一些网络组件提供了twig视图来渲染HTML内容。所有的twig模板文件都位于模板文件夹中。要在您的项目中加载它们，您需要为该目录注册一个twig命名空间。当与FCCN的webapp骨架项目集成时，您需要在网站配置中的templates_path变量中添加以下行

$templates_path =  array(
  ...
  'web_components' => $fs_root.'/vendor/fccn/webapp-tools/web-components/templates' #add this line
  ...
  );

外部库加载器

为了更清晰的路径，建议在配置文件中创建node模块和vendor文件夹的变量

 $node_mods_path = $fs_root.'/node_modules/';
 $vendor_path = $fs_root.'/vendor/';

然后，您可以将以下键值对添加到配置文件的$c数组中

//---- External libraries loader --------------------
"ext_libs_loader_service_name" => 'loader',  #name of the loader service in Slim container
"ext_libs" => array(
  //add libraries with the format name => path like for example:
  "headjs" => $node_mods_path."/headjs/dist/1.0.0/head.min.js",

  );

以下示例显示了如何为外部库加载器创建一个新的Slim服务

$app = new Slim\App();
$c = $app->container();

//setup ext libs loader
$cnt_name = \Fccn\Lib\SiteConfig::getInstance()->get('ext_libs_loader_service_name');
$c[$cnt_name] = function($cnt){
  $loader = \Fccn\WebComponents\ExtLibsLoader::getInstance();
  return $loader;
}

您可以使用提供的控制器操作 - LoadExternalJSAction 为加载外部库关联一个URL路径。以下示例显示了如何将/script/lib/{libname}路径设置为操作控制器

$app = new Slim\App();

#set route for load library action
$app->get('/script/lib/{libname}', Fccn\WebComponents\LoadExternalJsAction::class);

使用方法

外部库加载器

要加载外部库，只需指向您在Slim路由中配置的URL，并使用库的名称。

测试

本项目使用codeception进行测试。要在项目文件夹的根目录下运行测试，请调用composer test。

贡献

请阅读CONTRIBUTING.md以了解我们的行为准则以及向我们提交pull请求的过程。

版本控制

我们使用SemVer进行版本控制。有关可用的版本，请参阅此存储库的标签。

许可

本项目采用MIT许可证 - 有关详细信息，请参阅LICENSE.md文件。