描述:我的accordion类型原先只有两个字段,分别是title和content。显示在页面上会默认隐藏其内容,点击“+”会显示内容。然而现在有一个新需求,就是加一个开关使编辑内容者可以选择默认“展开”或“不展开”。

1.在drupal8后台添加一个新字段

1.1 在/admin/structure/paragraphs_type/accordion/fields下加一个字段,我命名为Open,类型为Boolean。

1.2 在/admin/structure/paragraphs_type/accordion/form-display下,字段属性如下

该页面的配置对应着编辑者添加编辑时的页面结构

1.3 在/admin/structure/paragraphs_type/accordion/display下,字段属性如下

该页面的配置对应着用户可看见的页面的内容结构,这里我们不应该让用户看见新字段的内容,所以需要Disabled。

2.字段添好了,我需要在前台页面获取到隐藏字段的值并将它加到div标签中,最后效果如下所示

在one.theme中,使用hook_preprocess_field,根据命名规则,以及根据调查可知这个div标签是在paragraph.html.twig中输出的,我需要通过hook将获 取到的字段值加入到“attributes”中。所以函数命名为one_preprocess_paragraph,"one"是项目名,paragraph是和上面的paragraph.html.twig对应。这个名字是惟一的,不能随意命名。

 function one_preprocess_paragraph(&$variables) {
if ($variables['paragraph']->getType() == 'accordion') {
$array = $variables['paragraph']->toArray();
if (isset($array['field_is_expanded'])) {
$variables['attributes']['data-is-expanded'] = $array['field_is_expanded'][0]['value'];
}
}
}

3.我的工作完成了,接下来就由前端根据div标签中的值来调整页面了。

drupal-使用hook_preprocess_field在paragraph的accordion中添加自定义数据的更多相关文章

  1. 文章翻译:ABP如何在EF core中添加数据过滤器

    原文地址:https://aspnetboilerplate.com/Pages/Documents/Articles%5CHow-To%5Cadd-custom-data-filter-ef-cor ...

  2. 使用Hive或Impala执行SQL语句,对存储在HBase中的数据操作

    CSSDesk body { background-color: #2574b0; } /*! zybuluo */ article,aside,details,figcaption,figure,f ...

  3. 使用Hive或Impala执行SQL语句,对存储在Elasticsearch中的数据操作(二)

    CSSDesk body { background-color: #2574b0; } /*! zybuluo */ article,aside,details,figcaption,figure,f ...

  4. SpringMvc中的数据校验

    SpringMvc中的数据校验 Hibernate校验框架中提供了很多注解的校验,如下: 注解 运行时检查 @AssertFalse 被注解的元素必须为false @AssertTrue 被注解的元素 ...

  5. Entity Framework 6 Recipes 2nd Edition(11-11)译 -> 在LINQ中调用数据库函数

    11-11. 在LINQ中调用数据库函数 问题 相要在一个LINQ 查询中调用数据库函数. 解决方案 假设有一个任命(Appointment )实体模型,如Figure 11-11.所示, 我们想要查 ...

  6. ASP.NET中后台数据和前台控件的绑定

    关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...

  7. SAP CRM 通过调试观察CL_CRM_BOL_ENTITY中的数据

    这个(BOL里面)最重要的类值得一看. BOL中的每条记录都会在CL_CRM_BOL_ENTIT中表示.至今,我们已经写过一些事件处理器,并且我们已经直接或间接的通过这个类工作.在业务场景中,我们也许 ...

  8. 将Oracle数据库中的数据写入Excel

    将Oracle数据库中的数据写入Excel 1.准备工作 Oracle数据库"TBYZB_FIELD_PRESSURE"表中数据如图: Excel模板(201512.xls): 2 ...

  9. [数据科学] 从csv, xls文件中提取数据

    在python语言中,用丰富的函数库来从文件中提取数据,这篇博客讲解怎么从csv, xls文件中得到想要的数据. 点击下载数据文件http://seanlahman.com/files/databas ...

随机推荐

  1. Uva10305 Ordering Tasks

    John有n个任务,但是有些任务需要在做完另外一些任务后才能做. 输入 输入有多组数据,每组数据第一行有两个整数1 <= n <= 100 和 m.n是任务个数(标记为1到n),m两个任务 ...

  2. vue.js中的路由vue-router2.0使用

    在我们平时工作中,我们有时候会有需求,按照不同的规则,加载不同的组件,页面不去跳转,常见的操作是ajax的异步操作,实现局部刷新加载新数据 在vue中,我们写了很多不同的组件,这时候,实现不刷新调用新 ...

  3. Java高级应用之泛型与反射

    /*************************************************************************************************** ...

  4. xcode5下取消ARC

    打开你的工程,点击目录的工程文件,最顶端蓝色的,然后选择project下你的工程,还是蓝色那项,然后build Settings,然后往下拉,在Apple LLVM 5.0 - Language - ...

  5. python_swift_project_middleware

    1. 写openstack swift的middleware 首先要确定swift用的是哪个middleware文件. 比如healthcheck这个中间件,在机器上有很多同名文件如下, 这两行可能是 ...

  6. 配置类Configuration怎样使用

    public class CorsConfiguration { /** * Wildcard representing <em>all</em> origins, metho ...

  7. android 日历

    [1].[代码] [Java]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  8. 在Linux上配置DRBD部署

    drbd 工作原理DRBD是一种块设备,能够被用于高可用(HA)之中.它相似于一个网络RAID-1功能.当你将数据写入本地 文件系统时,数据还将会被发送到网络中还有一台主机上.以同样的形式记录在一个文 ...

  9. 解决 C++ 操作 MySQL 大量数据插入效率低下问题

    往 Mysql 中,插入10000条简单数据.速度很缓慢,竟然要5分钟左右, 可是打开事务的话.一秒不到就搞定了 代码: #include <iostream> #include < ...

  10. word2vec 中的数学原理具体解释(六)若干源代码细节

      word2vec 是 Google 于 2013 年开源推出的一个用于获取 word vector 的工具包,它简单.高效,因此引起了非常多人的关注.因为 word2vec 的作者 Tomas M ...