跳转到主要内容

和“
Drupal8
”有关的内容:

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用它来自动完成;使用Gulp,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器,能自动化地完成 javascript/coffee/sass/less/…

To be or not to be, that is the question. 这是莎士比亚的名作《哈姆雷特》中的名句。另一个类似的是在黑客帝国里面墨菲斯让尼奥选择的蓝色药丸和红色药丸

——其实,大部分的时候,我总是希望生活真的能有这么简单。

作为设计师和开发者的我们,每天面临的是下面这样的选择:

这是我们在上一节中做的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栏。…