进阶篇56. Drupal中的排版12——Paragraphs模块 2 使用

这一篇,我们来讲Paragraphs模块的使用,在此之前,我们先抛出一个问题,然后用Paragraphs模块来解决这个问题。

我们来看一下Umami安装包安装好之后的article(文章)内容页面,比如node/17,标题是“Give your oatmeal the ultimate makeover”,下面的截图是body字段的内容:

Paragraph type 29

点击“edit(编辑)”按钮,你会看到后台对应的body(正文)字段,以及ckeditor提供的编辑/输入框:

Paragraph type 30

点击“源码(source)”按钮,你可以看到所有的内容都被包裹在P和h2标签中。如果你使用浏览器上的“检查元素”功能,也可以看到同样的情形。

那么,现在的问题是,假设网站是由Site builder(网站建设者)创建的,上线之后由Editor(网站编辑)输入内容。如果一个不会编程的网站编辑想把文章中带小标题的部分,左右分布,各占50%的宽度,他能怎么做呢?

方法一:用CSS3的nth-child() 选择器,分别对奇数和偶数段落进行样式处理;

方法二:改写源代码,为对应的段落加入自己的class名,然后用这些class进行样式处理;

方法三:使用ckeditor相关的排版模块(插件);

方法四:使用Paragraphs模块。

其中方法一和方法二都要写前端代码才能实现效果,只有site builder(网站建设者)才能够实现排版需求。那么如果Editor(编辑)在输入内容的同时就想实现页面排版的话,就只能借助第三方模块,也就是方法三和方法四。其中,方法三不是本文重点,因此,我们接下来将着重讲解方法四。

这里需要啰嗦一句的是,虽然在方法四中,我们依然会通过class类名和前端代码来实现排版,但是这个过程是在网站建设阶段就预先做好的排版效果,而Editor只需要在输入内容的时候选择自己想要的段落类型(排版方式)即可。(这方面的内容请参看《使用Paragraphs模块和组件化的主题开发方式结合起来,去创建一个设计系统》)

另外,本文的系统版本为,drupal8.7.1,直接安装的Umami安装包,然后添加了中文语言,因为Umami安装包默认只有英语和西班牙语。多数截图是在中文环境中截取的,少数是在英文下截取的。但是多语言本身不是这一节的重点,因此,不影响阅读。


Paragraphs模块的安装步骤就不详细说了, Entity Reference Revisions模块是它的依赖模块,也需要安装。

以下是使用drush安装并启用Paragraphs模块的命令:

Drush:

$ drush dl paragraphs entity_reference_revisions
$ drush en paragraphs

使用Paragraphs模块的第一步是创建一个”Paragraphs类型(Paragraphs type)”,这个过程和创建“内容类型(content type)”是相似的。

在后台导航至“管理>结构>段落类型(Paragraph types)” (/admin/structure/paragraphs_type)

Paragraph type

点击“添加段落类型”按钮。为系统添加一个段落类型,名字为“text”。

Paragraph type 2

点击“保存和管理字段”。

接着,为这个新建的段落类型添加字段,

Paragraph type 3

在下拉菜单中选择“文本(已格式化,长)”,标签填“text”。

Paragraph type 4

点击“保存并继续”,接下来:

Paragraph type 5

允许的数量,不用修改,默认的限制为1即可。点击“保存字段设置”。

Paragraph type 6

最后,直接点击“保存设置”。你可以看到在名为“Text”的段落类型中,增加了一个名为“text”的字段:

Paragraph type 6+

接着,让我们添加另一个段落类型,名为“Title+Text”,首先,点击面包屑导航上的“段落类型”,回到“段落类型”的管理页面(/admin/structure/paragraphs_type),再次点击“添加段落类型”,

Paragraph type 7

然后点击“保存和管理字段”。接着点击“添加字段”。

在添加一个新字段的下拉菜单中选择“纯文本”,标签中填写“title”。

Paragraph type 8

点击“保存并继续”,接下来,不用修改默认设置(最大长度255,允许的数量限制1),继续点击“保存字段设置”。然后继续“保存设置”。

这样,我们就为名为“Title+Text”的段落类型添加了一个“title”字段,接着,我们再为这个段落添加另一个字段,而这个字段,我们直接使用之前建立的Text段落类型。

再次点击“添加字段”:

Paragraph type 9

在接下来显示的界面上,你可以看到你有两个选择,一个是“添加新字段”,一个是“重用已有字段”,这里我们选择“重用已有字段”:

Paragraph type 10

这里选择我们之前已经创建的字段,机读名称为“fieldtext”

Paragraph type 11

然后点击“保存并继续”,“保存设置”。

这样,我们在段落类型“title+text”中,创建了2个字段:

Paragraph type 12

接着点击“管理显示”,把字段标签的显示方式修改为“隐藏”。

Paragraph type 13

点击保存。同样的,回到第一个名为“Text”的段落中,点击“管理显示”,把字段标签的显示方式修改为“隐藏”。

ok,现在段落类型已经设置好了,接下来,我们要把这个段落类型作为一个字段添加到内容类型中。进入article(文章)类型的字段管理界面(/admin/structure/types/manage/article/fields),点击“添加字段”按钮,这里我们依然选择“添加一个新字段”,并在下拉菜单中选择“段落”,这里的标签,我们可以填入“body2”(本文中所有的标签都可以理解为名字,因此,名字怎么取,都不影响结果,关键是起到区分的作用)。

Paragraph type 14

点击“保存并继续”,接下来使用默认的字段值(要引用的条目类型:段落,允许的数量:不限):

Paragraph type 15

点击“保存并继续”,在接下来的界面中,“引用类型”中选择“默认”,“包括下列选定的”,“title+text”,这里我们也可以选择“text”,但是没有必要,因为“title+text”的段落类型已经为我们提供了同样的功能,只要不填title字段,就是一个纯text段落了:

Paragraph type 16

然后在“管理表单显示”中将body2字段的顺序拖拽到正文的下方,

Paragraph type 17

在“管理显示”中的“全文”选项卡中将body2字段的顺序拖拽到正文的下方,并将标签隐藏。

Paragraph type 18

保存。

然后我们回到node/17的编辑页面,刷新之后,你会看到,在正文的下面出现了一个按钮,可以让你添加段落,并且此时只有一个段落类型可供选择,(如果我们在添加字段的时候选择了其他段落类型的话,这里就会出现一个下拉菜单)那就是“title+text”类型。

Paragraph type 19

点击这个按钮,会弹出新的输入框,用于输入段落内容。注意,输入框的下面还有一个按钮,可以让你添加另一个“title+text”类型的段落,这是因为我们在添加字段的时候,对字段数量的限制选择的是“不限”:

Paragraph type 20

拷贝正文中的第一段不带标题的文字,黏贴到“text”输入框中:

Paragraph type 21

然后再次点击“添加title+text”按钮,将正文中的第一个小标题和其对应的内容添加到新的输入框中:

Paragraph type 22

然后依次循环,把每一个小标题和其对应的内容都以段落的形式添加到body2字段中。

然后删除body(正文)字段的内容。点击保存。

你会看到页面上的内容和之前几乎差不多,最明显的差别仅仅是小标题的样式丢失了。这正是我们想要的结果。

接着,只要你按照第一篇讲述的方法,为主题添加css样式,即可以将样式修复,并将文章内容进行左右分布的排版。以下是我这里使用的css代码,如果你没有完全按照我的过程来做,你的代码可能需要修改:

.paragraph--type--title-text {
    width: 48%;
    float: left;
    margin-right: 2%;
	min-height: 240px;
}

.paragraph .field--name-field-title {
    font-size: 20px;
    font-weight: bold;
}

.node--view-mode-full {
    overflow: auto;
}

至于代码为什么要这么写,以及如何写才能得到更好的效果,如果你不清楚,那你需要补习前端知识和基础篇中的相关知识。

效果如下:

Paragraph type 23

这里由于我们并不希望第一段,也就是没有小标题的部分被放置在页面左侧,而是希望它能够占用100%的宽度,处于其他具有小标题的段落的上方。因此,我们回到字段设置中,将body2字段的引用类型的“text”段落类型也勾选上(想想为什么要这么做?):

Paragraph type 24

然后回到内容编辑页面,刷新后,你会看到用于添加段落的按钮上,出现了一个向下的箭头,点击它会出现一个下拉菜单,此时多了一个选项,你可以选择创建一个“text”段落,也就是没有小标题的段落。

Paragraph type 25

点击“Add text”,会弹出一个新的输入框,我们把第一段的内容拷贝过来,并拖拽红色箭头所指的符号(你还可以使用这个符号来拖动其他段落以调整段落之间的顺序),将这个新建的段落拖拽到第一段的上面(下面也可以):

Paragraph type 26

然后我们回到第一段,点击对应的“remove”按钮,将之前的第一段删除:

Paragraph type 27

注意,此处删除的时候还需要再次点击“confirm removal”,确认之后才能删除。

保存之后,你会看到:

Paragraph type 28

这样一来,网站上线之后,只要网站编辑在添加段落的时候,选择添加“text”段落,就能让文字占据100%的宽度,相对的,选择添加“title+text”段落的时候,每个段落就只会占据50%的宽度,从而让编辑在不需要编程的情况下为网页内容进行排版。


以上就是Paragraphs模块的基本用法,如果你需要对段落进行更多的样式控制,比如,为段落中添加的图片添加走马灯效果,那你还需要对段落进行模板覆写,而这一过程和基础篇中讲的内容是一致的,因此,这里就省略了。

用这样的思路,借助Paragraphs模块,以及对Paragraphs进行模板覆写和CSS样式控制,我们可以把页面排版做得非常多样化。并且控制版面样式的权利被(安全的)交到了网站编辑的手中。

另外,在本文中,我们用Paragraphs模块所创建的段落替代了原始的body字段,在实际项目中,你可以根据需要,考虑是否需要将body字段从Article(文章)数据类型中删除。

本书共102小节:

评论 (写第一个评论)