跳转到主要内容

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

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

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

学习这个专栏之前,…

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

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

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

在上一节中我们演示了使用gulp来编译sass文件,接下来,我们来介绍一下sass。如果你还不会sass,是时候补课了,如果已经熟悉,可以跳过。

sass是一个用来快速编写css文件的语言。经过编译之后的sass文件就是我们通常所说的样式表css。

sass的好处我就不多说了,如果你是一个前端,css已经熟练了,…

在第一篇中我们已经提过几种不同的在页面上加载css和js文件的方法。这一节再介绍一种,使用预处理函数来加载它们,即:

THEME_preprocess_HOOK()

其中,THEME是主题的名称,HOOK是模板钩子,模板名的第一组单词。

比如,如果你想在维护页面上加载一个特定的JS文件,维护页面的钩子是”…

在第一篇中我们对模板建议已经有过介绍了,这一节中我们会讲得更深入一些。

查看模板建议最快的方法是开启theme debug模式,然后在页面上查看元素。你可以在源代码中看到类似下面的代码:

<!-- THEME DEBUG --> <!-- THEME HOOK: 'node' --> <!--…

在.theme文件中,你可以通过node预处理函数为node模板添加变量:

function nowicode_preprocess_node(&$variables) { $variables['something'] = 'hello woooo'; }

然后你可以在node模板中将这个变量打印出来:

{#…
.theme文件

在D8中每一个主题都可以包含一个.theme文件。与之对应的是D7中的template.php文件。但它并不是必须的。它总是位于主题的根目录下。

由于英语中template.php文件和tpl.php文件的叫法都是一样的(后者是D7中的模板文件),因此,为了避免歧义,d8的开发者将d7中的template.…

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

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

: {}

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

css文件属性

browsers浏览器:

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

{ IE…

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

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

{{ page.content }}

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

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