跳转到主要内容

和“
主题开发
”有关的内容:

你好,我是晴空,我是一枚设计师,前端工程师,Drupal 主题开发者和Now I Code 爱码文档汇的发起人。

在这个专栏里,我会聊一些Drupal8主题相关的话题,其中大部分的内容,是对我自己的相关经验的一个总结与回顾。如果你也喜欢Drupal,并且想学习怎么把基于Drupal的网站做得好看一点,那么,我很高兴和你分享我的经验。

学习这个专栏之前,…

D8出来了,手痒,做一个小站玩儿。界面上力求干净简洁并且在手机上体验也能凑合。虽然大部分的时候,我们并不会在排队或者等电梯的时候看这么无聊的内容,但是,万一呢? ^_^

内容是现成的,一年前就开始陆续发表于Drupalchina.cn。只是对前4章内容进行了一定的扩充。

在原来的写作计划中,要写的内容的篇幅是已经发表了的3倍。进阶篇:主题设置、主题中的CSS…

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

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

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

总是有人说,drupal做的网站很丑,说实话,这是现实——至少在国内,大部分用drupal做的网站确实很丑,哪怕有少数几个做的好的网站也无法掩盖这一点。

反对这个观点的人也非常有道理,他们往往会告诉你,网站做得好看不好看那是设计师的问题,与Drupal无关——其实这句话说的也是有一定道理的。

网页设计往往被认为是整个网站建设流程里面门槛最低,…

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