README

包含 NextEuropa 平台 Drupal 主题的存储库。

EC-Europa 主题是一个 Drupal 7 主题，实现了欧盟委员会数字化转型中定义的样式。本主题基于组件驱动设计。

本主题与 ECL 的 1.4.0 版本捆绑。

ECL 组件库: https://v1--europa-component-library.netlify.com/ec

当前支持的浏览器

• Chrome >= 60
• Internet Explorer >= 11
• Safari >= 11
• Firefox >= 54

目录

• 安装
• 风格指南
• 测试
• 辅助工具
• 开发者说明
  • 开发环境

安装

将此存储库的内容放置在 sites/all/themes 中的一个文件夹中，然后转到 admin/appearance 启用主题。EC Europa 主题使用 Atomium 作为基础主题。

风格指南

名为 Europa 组件库 的风格指南应在构建您的网站时用作参考。

设置

选项 "改进的网站"

在设置页面上，选项 "这是一个 '改进的网站' 吗？" 允许激活一些自定义 - 在主页、切换页面和其他块中。默认情况下，此选项被选中。

辅助工具

所有模板都包含在主题中

• 组件模板
• 视图模板
• 显示套件模板

平台提供了以下模块，以简化网站构建并集成到视图和字段

NextEuropa 格式化程序 (nexteuropa_formatters)

此模块为自定义 ECL 格式化程序提供默认主题实现。

NextEuropa 格式化程序 - 视图 (nexteuropa_formatters_views)

此模块扩展了 nexteuropa_formatters，并带有自定义视图插件，用于使用 ECL 格式化程序渲染内容。

NextEuropa 格式化程序 - 字段 (nexteuropa_formatters_fields)

此模块扩展了 nexteuropa_formatters，并带有自定义字段格式化程序，用于使用 ECL 格式化程序渲染字段值。

回到顶部

测试

鼓励开发者创建测试，尤其是使用 Behat 的功能测试，特别是在一个纯 Drupal 7 网站上，并安装主题及其依赖项，这可以通过在 开发环境部分 中所示的方式使用 Docker 实现。

开发者说明

介绍

主题实现是 Atomium 的子主题，遵循其实现逻辑。有关更多信息，请参阅其 项目页面。

所见即所得内容格式化程序

本主题包含一种特定的机制，用于格式化涉及 HTML 元素的内容；例如

• "长文本" 和 "摘要文本" 字段；
• 包含标记 ("body") 的自定义块。

此机制基于放置在字段值容器上的命名空间 CSS 类。请参阅 "ec_europa_preprocess_block()" 和 "ec_europa_preprocess_field()"。

如果您需要在子主题的富文本中实现某些特定的内容格式，并希望在WYSIWYG小部件中反映它们，您只需在“editor.css”文件中插入它们。
此文件应放在名为“wysiwyg”的仓库中，该仓库位于子主题的根目录下。

回到顶部

开发环境

用法

首先，运行

docker-compose up

建议不要使docker-compose成为守护进程，这样可以在不再需要时快速关闭（CTRL+C）。然而，可以使用标志-d在后台运行docker

docker-compose up -d

然后

docker-compose exec web composer install
docker-compose exec web ./vendor/bin/taskman drupal:site-install

编译ECL

需求

• Node.js: >= 6.9.5
• Yarn: >= 0.20.3

通过运行以下命令设置您的环境

docker-compose exec -u node node npm install 

docker-compose exec -u node node npm run build 

或

npm install

通过运行以下命令构建它

docker-compose exec -u node node npm run build 

或

npm run build

这将

1. 将ECL SASS编译到./assets/styles/europa.css
2. 将ECL JavaScript依赖项从./assets/scripts/entry.js转换到./assets/scripts/europa.js
3. 将ECL字体复制到./assets/fonts/
4. 将ECL图片复制到./assets/images/

有关这些构建步骤的更多详细信息，请参阅ecl-builder文档

回到顶部

更新ECL

通过更改package.json中的@ec-europa/ecl-components-preset-base版本并运行以下命令来更新ECL

docker-compose exec -u node node npm build 

或

npm run build

这将更新资产，如图片和字体，并重新编译CSS，所做的更改应提交到该仓库，因为我们无法要求主题用户和/或部署过程在本地构建主题。

在浏览器上

使用默认配置，开发站点的文件应可在build目录中找到，开发站点应可在：http://127.0.0.1:8080/build。

运行测试

要运行grumphp检查

docker-compose exec web ./vendor/bin/grumphp run

要运行behat测试

docker-compose exec web ./vendor/bin/behat

或

./vendor/bin/behat

回到顶部