跳转到主要内容

和“
Drupal8
”有关的内容:

这是我们在上一节中做的views区块,我们为这个区块引入了一个新的CSS文件,将它做成了现在的样子。这个文件中的css代码超过300行,但是,主体的内容都在重复一个新的CSS技术概念:CSS Grid——也就是CSS网格。这个知识点如果要仔细讲的话,本身就可以开一个专栏,为了节省时间,我们将在这一节的视频中挑选CSS网格中的重点,做一个快速的入门介绍。…

让我们先来把之前新建的recent区块复制一份。这样,新复制的block由于ID不同,而不会使用之前覆写的模板,因此,不会有走马灯的效果,而只是一个简单的内容列表。

将新复制的区块的显示名称改为Block2,这样才能和之前的区块有所区别。然后将排序标准改为按发布时间的升序排列,此处,最上面的选项,…

在这一节的内容开始之前,我们说几句题外话,作为一个引子,为之后的内容做一个铺垫。

在这个系列的前言中我就说过,如果你想学习怎样把drupal主题做得好看一点,就很值得往下仔细阅读。但是,其实在前面的36节内容中,和“把主题做得好看”有关的内容少的可怜。

自定义Drupal主题的工作重点在于前端页面的制作和主题层的覆写。这其中…

上一节的文档中我们提到,如果view的显示格式为“字段”的话,就一共有4层模板可供我们覆写。但是,在上一节中我们只覆写了第二层模板。在浏览器中查看元素可以看到,每个节点字段的html依然是由stable主题的第三层模板所提供的。如图:

在默认情况下,所有的字段都具有类似以下结构的html标签:

<div…

在上一节中,我们已经在主题中加载了所需要的库。

在page--front.html.twig模板中,我们可以很清楚的看到,第94行的代码就是用来输出views区块的。而下面的代码,第98到第111行是我们从猫头鹰走马灯的官网文档中拷贝过来的。很显然,我们只要把views区块输出的代码,覆写成这个代码的样式,我们就能实现走马灯的效果。…

让我们来整理一下代码,将新建立的区块放置到合适的位置上。

在info文件中新添加一个rencent区域,

recent: Recent

在首页模板中,在打印content区域的div的下方再添加一个div,用于打印新增的recent区域:

<div class="col-md-12"> {{…

在上一节的内容中,我们提到了内容页面的覆写,以及内容列表的覆写。内容列表的生成涉及到核心中的views模块的使用方法。首页的内容列表是views模块自带的,因此,我们并不需要自己动手创建view,列表就会自动在首页显示。但是,我们往往要自己创建新的view,来实现我们自己想要的显示条件和逻辑。所以,接下来,我们将介绍views模块的用法以及相关的覆写技巧…

回到首页,刷新之后,我们可以看到,列表中只输出了节点标题。

因此,我们还需要在代码中为teaser模式添加其它的字段,比如,节点的图片和节点正文。

{{ content.field_image }} {{ content.body }}

然后,我们回到之前做的首页模板中,将侧边栏删除,将主内容区设置为12栏。…

{# /** * @file * Theme override to display a node. * * Available variables: * - node: The node entity with limited access to object properties and methods. * Only method…

接下来,我们来看一下内容的覆写。在Drupal系统中,每一篇文章都是一个节点,因此,对内容的覆写意味着对节点的覆写,也就是node.html.twig这一层模板的覆写。

首先,我们来编辑一下之前输入的这篇内容。你可以在文档中找到相关文字内容和图片的下载地址。

http://www.nowicode.com/sites/…