geeks4change/h4c_olive

H4C 主题。

维护者

详细信息

gitlab.com/geeks4change/hubs4change/h4c_olive

主页

源代码

问题

安装: 181

依赖: 0

建议者: 0

安全: 0

星标: 0

分支: 0

类型:drupal-theme

1.0.1 2022-08-22 15:50 UTC

AGPL-3.0-or-later 678296645bb6899d96e56a1075f5eb0b843b87e0

This package is auto-updated.

Last update: 2024-09-19 18:19:21 UTC

README

  • 现在请参阅 #3
  • 基于 olivero 10.0-dev#1f171b93

Klären

  • 分类页面结构化内容
    • 图片
    • 文本
    • => 用于创建有意义的分类视图
    • => + 主题页面，我们不希望覆盖每个页面的布局
  • 社交媒体预览是如何生成的？
    • 涉及所有预览可编辑的节点
    • 特别是 flexi 和分类页面，因为它们在没有字段的情况下没有默认值
  • map_popup 依赖于特定的块模板建议块--views-block--h4c-map-block-facets 以加载库

卡片模式

颜色

我们使用哪种颜色格式？

要求

  • drupal:block
  • drupal:layout_builder
  • components:components 3.0.x
  • component_blocks:component_blocks
  • ui_patterns:ui_patterns_library
  • ui_patterns_settings:ui_patterns_settings
  • ui_patterns_layout_builder:ui_patterns_layout_builder

待办事项

这是如何工作的

H4C Olive 是一个 olivero 分支，尽管如此，我们仍然使用 olivero 的最佳实践和一些代码。我们遵循 CUBE CSS 和 BEM 方法。

文件

  • h4c_olive.info.yml/h4c_olive.libraries.yml
    • 在 ../olivero 中参考 olivero 资产（需要 olivero 10.0.x），在生产之前需要将其内部化
    • 对于子主题，需要从 info.yml 中复制库覆盖
  • h4c_olive.theme: 从 olivero 复制
  • /components：原子结构中的模式和其他组件样式（CSS、JS、Twig）
    • 通过ui_pattern未加载的组件将被加载
      • 通过h4c_olive.libraries.yml（导航、网站头部等）
      • 通过twig attach_library函数（menu-local-tasks.html.twig）
    • 尽管如此，模式仍可全局加载，例如按钮样式，如果我们需要在大多数页面上使用它们
  • css：通过libraries.yml添加的olivero CSS覆盖
  • js：全局加载的JS
  • scripts：来自核心的postcss https://git.drupalcode.org/project/drupal/-/tree/10.0.x/core/scripts
  • templates：olivero模板的副本

空区域

我们使用twig_real_content来避免显示空区域和部分，请参阅组件 > 组织 > lb_columns

子主题

组件

当将模式复制到子主题时

  • 子主题的twig文件将被自动选中
  • 只有父主题的CSS被选中
    • => 将资产或仅覆盖添加到子libraries.yml

如何更新h4c_olive中的olivero部分

  • 检查有上游更改的文件：git -C core/themes/olivero/ diff --relative --name-status 1f171b93
  • 详细检查上游更改，例如在twig文件中：git -C core/themes/olivero/ diff --relative 1f171b93 HEAD *.twig
  • 如有适用，在h4c_olive中实施更改
    • templates/olivero，可能还有templates/h4c_olive
    • css：网站头部、二级导航、选项卡

Z-index

不再那么重要，因为olivero确保子元素不会与（移动）导航重叠

UI Patterns

什么不起作用

  • 我们不能通过{% if patternfield is not empty %}检查字段值
    • {% if patternfield is not empty %}只检查字段是否存在
    • 相反，我们需要做{% if patternfield.0 is not empty %}或类似的操作
  • 类似{% if patternfield.0 is not empty %}的检查在嵌套模式中执行不正确
    • 在{{ pattern('short_infos', {event_date: event_date, location: location}, 'si--event--popup') }}中，如果嵌套的短信息模式中的位置字段被检查为空，则它永远不会显示

使用ui_patterns模块，我们可以

  • 在/patterns中查看样式指南
  • 提供组件变体
  • 通过
    • 布局构建器（通过组件块模块）
    • ds-enabled布局
    • 字段组（未测试）
    • ds字段设置（未测试）
  • 将模式用作视图行模板（未测试）
  • 通过在ds-enabled布局中禁用字段模板简化标记（无法通过组件块实现）

使用ui_patterns_settings模块，我们可以

  • 提供设置
  • 将设置映射到Drupal字段，例如，文章高亮字段创建一个类is-highlighted

动态创建灵活的块

  • 块布局（通过component_blocks）
    • 创建块（内容）
    • 覆盖布局（设置）
      • OK！
  • 布局构建器（通过component_blocks）
    • 创建块（内容）
    • 覆盖布局（设置）
      • ! 我们也不能为内联块这样做，要么在之前创建可重用的块，或者不要使用component_blocks
  • 布局构建器（通过ui_patterns_layout_builder）
    • 创建组件附加到的部分
    • 为每个部分添加块（内联或组件块）
      • ！需要针对按钮进行解决，因为在组件块和ui_patterns_lb中工作方式不同
      • =>参见首页

中间解决方案

  • 通过ui_patterns_layout_builder创建部分组件以选择列数（变体/ui_patterns_settings）
    • =>参见lb_columns
    • 在LB中添加部分
    • 在BL中首先配置带有布局覆盖的块，然后添加部分，将块添加到块布局
  • 创建单个组件
    • 标题（带有副标题）
    • 文本
    • 图片
    • 按钮
    • 单个节点
    • 列表

基于

已知问题

稍后查看

主题基础

  • css/js：在libraries.yml中声明为库
  • 全局库将在每个页面上加载，添加到info.yml
  • 条件库将由twig或其他方式加载
    • 添加preprocess: false以便不重建缓存
    • 检查postcss是否压缩文件

资源

图标

css

drupal

致谢：标志中的树取自：https://pixabay.com/vectors/tree-tree-of-life-frame-spiritual-5334773/

测试

使用alpinejs的可展开描述

https://github.com/alpinejs/alpine/issues/406#issuecomment-617771839


.expand-content {
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4,0,1,1);
  transition-property: all;
  position: relative;
  overflow: hidden;
}

.expand-button {
  z-index: 20;
  bottom: 0;
  right: 0;
  position: absolute;
  overflow: visible;
  margin-left: auto;
  margin-right: auto;
}

.max-h-40 {
  max-height: 3rem;

}


<div class="expand-wrapper">
  <div x-data="{ expanded: false }">
 
    <div class="expand-content" x-bind:class="{'max-h-40': !expanded}" x-ref="container" x-bind:style="expanded ? 'max-height: ' + $refs.container.offsetHeight + 'px' : ''">

      {{ description }}

      <button class="expand-button" type="button" @click="expanded = !expanded">
        <em ></em> <span x-text="expanded ? 'Weniger anzeigen' : 'Weiterlesen'"></span>
      </button>
    </div>
  </div>
</div>