如何自动将CSS类添加到帖子主体中的<p>标记? -- 8 领域 和 theming 领域 drupal 相关 的问题

How can you automatically add CSS classes to <p> tags in the post body?


0
vote

问题

中文

我正在尝试使用Tailwind CSS框架构建一个新的Drupal站点,这依赖于将CSS类与HTML标记内联。

这在枝条模板文件中是完整的,我可以直接控制输出并直接添加所需的类,但是我想自动将类添加到 <p> 标签(可能是其他一些,但 <p> 是某些帖子类型的身体内的一个很好的开始。

我应该看的任何想法?

我并不完全清楚要搜索的正确术语,谷歌返回大量结果,至少是十年的旧且与Drupal 8不相关。

英文原文

I'm trying to build a new Drupal site using the Tailwind CSS framework, which relies on inlining CSS classes onto HTML tags.

This is fine in Twig template files where I have direct control of the output and can add the required classes directly, however I'd like to automatically add classes to <p> tags (and probably some other, but <p> is a good start) within the body of certain post types.

Any idea where I should be looking?

I'm not entirely clear on what the correct terminology to search is, and Google returns plenty of results that are at least a decade old and not relevant for Drupal 8.

     

回答列表

1
 
vote

我已经找到了如何专门解决这是一个我的途径。

您可以使用框架的@apply函数根据公共DRUPAL类名,或您在自定义HTML.TWIG文件中指定的函数。

文档在此处: https://tailwindcss.com/docs/functions- -Directives /#应用 我使用的是Tailwind启动主题,也使用这个函数 https://www.drupal.org/project/ tailewindcss

例如,要应用 text-xl utility类到节点段标记,我可以在我的样式表中使用以下代码

  .node-content p {   @apply text-xl }   
 

I have found how to resolve this specifically if using the Tailwind framework, which I am.

You can use the @apply function of the framework to add classes based on common Drupal class names, or ones you specify in your custom html.twig files.

Documentation here: https://tailwindcss.com/docs/functions-and-directives/#apply I am using the Tailwind Starter theme which also uses this function https://www.drupal.org/project/tailwindcss

For example, to apply the text-xl utility class to node paragraph tags, I can use the following code in my stylesheet

.node-content p {   @apply text-xl } 
 
 
0
 
vote

一个简单的解决方案是用JS添加类。

这样的东西应该有效:

  $('.body p').each().addClass('YOUR-CLASS');   
当然,您必须添加行为等。有关更多信息,请查看此处输入链接描述。 要确保只在您的特定帖子上发生此操作,您可以在该帖子的模板中附加库。

所以你可以在帖子模板中添加它:

  {{ attach_library('my-theme/library-name') }}   

希望它有意义。

 

A simple solution would be to add the classes with JS.

Something like this should work:

$('.body p').each().addClass('YOUR-CLASS'); 

Of course you have to add behaviors etc. For more info, look here enter link description here.

To make sure this only happens on your specific post, you can attach the library in the template for that post.

So you can add this in the post template:

{{ attach_library('my-theme/library-name') }} 

Hope it makes sense.

 
 
         
         

相关问题

1  如何启用由Control模块定义的字段翻译?  ( How do you enable translation for a field which was defined by a contrib module ) 
我正在尝试为由不同的模块定义的字段来启用翻译。 问题是此字段不会列出UI。当我在 hook_entity_field_storage_info中检查此字段的定义时我可以看到 setTranslatable(TRUE) 缺少。所以我在 hook_entity_field_storage_info_alter 中添加了相...

0  如何在同一页面上的块中获取当前提交的表单状态?  ( How can i get the currently submitted form state in a block on the same page ) 
如何检索当前提交和验证的表单状态? 请假设以下情景。 页面在它使用表单API创建的表单上。 提交表单中的数据是瞬态的。换句话说,它不会以任何方式保存或存储。 表单由我不控制的模块创建,因此我不应该更改码字。 在同一页面上,表单是一个块(矿山),它基于表单提交显示数据。 我希望从块插件代码中从匿名用户提交的表单中访问验...

0  如何在自定义公开视图过滤器中使用视图过滤条件?  ( How to use views filter criteria in a custom exposed view filter ) 
我正在使用drupal 8.7.11,并创建了一个公开的过滤器的自定义视图,它为用户提供了使用姓名的复选框列表过滤实体参考字段的选项而不是自动完成。 此刻我已经硬编码了查询条件,以在具有某些内容检查的实体查询中构建列表。日期是未来 但是,我想在不同的视图中重复使用过滤器,这不需要检查日期是否是日期。 是否可以从视图...

0  如何更改内容实体的字段属性?  ( How to change field attributes of content entity ) 
在自定义模块中,我有一个内容实体,我已经定义了这个字段: admin/config/regional/translate/translate3 我想将其类型从字符串更改为string_long和max_length从255到1024. 我怎样才能在没有卸载我的模块的情况下这样做,更改源代码并再次安装我的模块...

0  更改用户注册表单上的日期字段的默认格式  ( Change default format for date field on user register form ) 
我是新的drupal 8.在用户注册表单中,我通过用户帐户设置中的管理字段添加了日期字段。但是,我需要自定义此字段并更改其格式。我尝试过'管理显示',但它没有生效。有什么东西我缺少。 (理想情况下,它应该像Drupal 8 WebForm中的现场日期时间一样看起来并表现出来) 欣赏给定的任何帮助。 感谢 ...

1  是否可以在约束验证器中修改节点编辑表单?  ( Is it possible to modify the node edit form in a constraint validator ) 
是可以在失败约束验证后操作节点编辑表单? 我的方案如下,如果用户尝试保存节点并失败约束验证,则显示验证错误,而且表单中的段落字段应扩展,就像我点击"添加段落" 按钮一样扩展。该段包含2个文本字段,用户只需要填写,以便在再次保存验证通过时。 到目前为止,我设法成功创建了我的约束和约束验证器,然后将约束添加到类型节点的实...

0  通过AJAX更新实体/发布数据?  ( Updating entities posting data via ajax ) 
我有一个需要更新用户交互的实体,例如: 跟踪用户通过视频进行进度,使得侦听器每x秒检查播放头位置,并将信息发布到包含该视频上的用户在该视频上的进度的数据的实体。 复选框的集合,当单击时,自动更新相关实体上相应值的状态。为了参数,我尚不知道这是否是实际实体表单或通用形式/组形式。 在过去我尝试过#1通过...

5  以编程方式执行节点搜索  ( Programmatically executing a node search ) 
是否可以以编程方式执行节点搜索?也许通过 nodesearch 或 drupal search ? 最接近的我可以得到以编程方式做诸如: Drupal::service('search.index')->clear(); echo Drupal::service('plugin.manager.search...

1  如何在Ajax视图的公开日期过滤器中更改日期格式,该过滤器使用Bef?  ( How to change date format in an ajax views exposed date filter that uses bef ) 
我有一个使用ajax选项的视图,并使用带有更好的暴露过滤器(最新版本)的一些日期过滤器。我想做的是将日期过滤器的默认日期格式从mm / dd / yy更改为dd / mm / yy。 我试图实现这个解决方案。格式更改,弹出窗口工作正常,但在应用过滤器时出现问题,似乎日期过滤器值似乎没有验证。 如何在AJAX视图中更改...

0  测试保存某些配置的函数 - NULL上调用设置的错误  ( Testing a function which save some configuration error called set on null ) 
我有一个2-3件事的函数,其中一个活动是保存配置。 function processProps($data) { $config = $this->configFactory->getEditable('mymodule.settings'); $config ->set('some_settin...

0  如何从Ajax表单中保存实体  ( How to save entity from a ajax form ) 
我正在运行drupal 8.8.x 问题 在通过AJAX提交表单时,未保存实体。示例: 构建形式 public function buildForm(array $form, FormStateInterface $form_state, EntityInterface $entity = NULL) ...

0  Hook_Node_Presave期间如何重新排序实体引用版本字段?  ( How do you reorder an entity reference revisions field during hook node presave ) 
我正在尝试根据节点保存的文本字段重新排序一些段落,因此作者不需要手动维护字母顺序,但是当我保存节点时,所有值都丢失。我尝试匹配$ node-&gt; get('field_paragraphs') - &gt; getValue(),但这似乎没有工作。 function mymodule_node_presave...

0  如何将来自DrupalSettings的变量的值传递给同一页面中的iframe?  ( How can you pass the value of a variable from drupalsettings to an iframe in the ) 
我在drupal设置中有一个变量,从php获得它的值。 (function ($, Drupal, drupalSettings) { /** * @namespace */ Drupal.behaviors.pdf_appAccessData = { attach: function (cont...

0  用分类权重排序  ( Sort by taxonomy weight ) 
我有一个内容类型"成员" ,带有一个名为"成员角色" 的分类术语,它是一个多价值字段。每个成员最多可包含3个成员角色。 我已经创建了一个视图,以参考分类场与分类学术语重量排序的成员。但问题是每个成员在视图结果页面中重复3次。 我的问题是如何删除重复项,并且仅在多价字段(成员角色)中的最后一个值排序。 ...

0  如何将jQuery验证添加到自定义表单并将错误设置为字段?  ( How to add jquery validation to custom form and set error to field ) 
我想在我的自定义表单上使用jQuery实现客户端验证。 我已经启用了客户端验证贡献模块 我已使用以下代码成功附加了自定义JS文件: mysql> select nid, uid, created, changed from node; +-----+-----+------------+------------+...

2  使用PathAuto <8.x-1.6升级后,网站已损坏  ( Site broken after upgrading with pathauto 8 x 1 6 ) 
我最近升级到Drupal 8.8。不幸的是,我错过了需要升级PathaUto的备忘录,现在我的网站被打破了。大多数页面给出了消息"网站遇到意外错误。请稍后再试。" 我可以到达/用户并使用管理员帐户登录,我可以得到/ update.php,告诉我"pathauto模块与Drupal Core的当前版本不兼容。将Pat...

0  从自定义块中消耗外部API  ( Consume external api from custom block ) 
我目前正在编写一个自定义模块 - 用于 drupal 8 - 如何使用块(使用块显示它们并显示它们)来进行消费/发送外部API数据强> 是标准方法 - 直接或通过控制器通过插件消耗/发送外部API数据,并将其输出到Twig模板? 如果是的话,如何将数据从控制器发送到自定义插件块? 欢迎任何建议。谢谢你。 ...

2  如何在自定义字段中使用替换模式?  ( How can i use a replacement pattern in a custom field ) 
我刚刚在视图中创建了一个新的自定义字段,但我想在该字段中使用替换模式。是否有可能这样做? class CustomButtonField extends FieldPluginBase { /** * {@inheritdoc} */ public function usesGroupBy(...

0  如何在复合组件中的组件上设置验证错误?  ( How do i set a validation error on a component inside a composite component ) 
我有一个webform,一个复合组件允许添加多行。这种结构是这样的,因为它更清楚: webform. sample_details - 复合组件,允许多个"行" ,包含: sample_ref. date_sampled(字段我想要设置错误) 我遵循"方法2 - WebForm处理程序"...

0  只在首页上完全显示最近的帖子,其他人  ( Fully display only most recent post on front page furl the others ) 
目前我的首页只会为我所有新帖子显示一款预告片。 我知道我可以转到 Structure > Views > Frontpage 并将其更改为 show Content | Full ,它将在首页上显示每个帖子的完整帖子。 我想做的是,虽然只是我最近的帖子的全部帖子,然后是所有其他帖子的速度。 是可以这样做吗? ...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有


Licensed under cc by-sa 3.0 with attribution required.