跳转到主要内容

和“
Drupal8
”有关的内容:

第一篇的第19节中我们介绍过如何创建库文件,在我们声明css

和js文件路径之后会紧跟着一个冒号和一对大括号

: {}

这一对大括号里面,就是用来添加相对的属性,当然,也可以留空。

css文件属性

browsers浏览器:

判断浏览器的版本并有条件的加载css

{ IE…

我们在第一篇中已经讲过了如何创建info文件和为主题加载库。为了降低初学者的学习门槛,我们略过了一些实际项目中会遇到的问题。比如,CSS和JS文件的加载顺序,已加载文件如何替换和修改等。如果主题开发者想要对Drupal的主题层进行完全的控制,就必须解决这些问题——试想一下,如果某个JS文件(比如jQuery)是由核心或者模块加载的,…

接下来,我们在模板中打印content区域

{{ page.content }}

你会看到首页上出现了一个列表,这个列表是views自带的frontpage页面,在第一篇的第32节中,我们有详细说过这个列表怎么修改。

你还可以在区块布局页面找到content区域,这里面放的4个区块都处于禁用状态,…

ok,上一节中我们在模板中打印了logo和hero区块,这一节我们继续对模板进行转换。

但是,在此之前,我们先来查看一下这个网页的元素。

你可以看到,网页上body标签以内是page模板,以外是html模板。在上一节中我们说过,stable基主题所提供的html模板会打印比我们自己手写的还要更加详细的html代码。…

这一节,我们来正式制作首页模板,将上一节中的静态页面转换为主题,其中会遇到一些小问题,我们一个一个来解决。

上一节我们为了运行静态页面而修改了gulpfile.js的代码,那么现在就需要把它修改回来了,这一步是为了让我们回到主题制作的开发环境中。重启gulp任务,浏览器会打开一个新窗口,显示的是我们在第一篇中制作的nowicode网站的首页…

在第一篇中,我们先介绍了如何安装Drupal网站和配置开发环境,然后介绍了Drupal主题的几个重要概念:文件夹结构、区块、info文件、库、模板建议以及覆写。

然后我在第23节中直接给出了2个模板文件:

page.html.twig

page--front.html.twig

并以此为基础,…

在上一节中我们已经为我们的主题安装了gulp,并且在文档中已经讲解了如何安装gulp插件。本节视频只是演示gulp插件的使用,更多重要的知识细节,请阅读文档。

首先,安装gulp插件,你可以在文档中找到对应的命令:

npm install browser-sync gulp-sass gulp-autoprefixer run-…
安装和升级node

在安装Gulp之前你需要先安装nodejs,在文档中有它的下载页面。下载并运行安装包。具体安装过程在视频中就省略了。当你安装好nodejs的时候,你的npm也就同时被安装了。

你可以在终端里使用命令查看node和npm的版本:

node -v npm -v

node和npm都会升级,…

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

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

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

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

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