在上一节中，我们把静态页面中的html直接搬到了首页模板中，然后解决了库的版本不同而造成的问题。并且通过调整css和添加新的规则，将菜单的样式做好了。这一节中，我们要做的就是要把菜单模板覆写成静态页面中html一样的格式，然后在后台配置好菜单和区块，就可以得到我们的响应式的两级下拉菜单了。

具体来说，html代码中的整个无序列表即ul，…

在接下来的2节中我们来讲述如何做响应式的带有下拉菜单的导航条。

先说一下思路：

当然，你可以自己直接写css样式甚至添加js来控制这个菜单的显示。你也可以利用bootstrap已经为我们提供的解决方案来实现这个响应式的下拉菜单。

在我们做主题开发的时候，大部分的情况都是运用类似的方法。比如，你想做一个幻灯片、…

ok，我们现在的网站缺少一个菜单，因此，我们来演示一下如何为Drupal网站添加菜单，并且把它做成我们需要的样式。

在结构页面，点击菜单，可以管理网站所有的菜单，还可以添加新的菜单。他们各有各的用处，如果你是新手，应该尝试熟悉它们。这里我们只看main navigation，也就是主导航条。

我们编辑这个菜单，…

预告：接下来的两篇是付费内容，讲的是如何为网站做出一套响应式的菜单，相关内容属于Drupal主题中的难点，配有比较详细的文档说明，由于视频的篇幅限制，很多细节并没有出现在视频中，因此，请仔细阅读文档内容，谢谢支持。晴空在这里先谢过了。

现在，我们的网站是有logo的，这个logo是写死在模板文件中的。但是，drupal的主题系统，…

在之前的课程中，我们学习了如何搭建和配置开发环境，了解了drupal主题的文件构成，如何用info文件定义一个主题，如何创建区域，如何创建库，学习了什么是模板文件，怎样利用twig debug功能查看模板建议，如何覆写模板文件，如何创建自定义区块并放置在区域中。有了以上这些知识，你对整个drupal的主题层就有了一个大致的了解了，…

这就是上一节中我们为网站做的首页。在设计上，这还仅仅是一个初稿，但是，相比之前的样子，已经好很多了。

让我们再来看一下page模板。前面已经提过，大部分的时候，我们并不会把这些文字内容直接写在模板文件中，因为这样就无法通过drupal来管理这些文字。

所以，我们来创建一个自定义区块，把模板中的代码和文字放到区块中，…

让我们再来看一下page模板，在这里，你可以找到twig的三种基本语言结构：

{{ }}: 用于打印表达式的结果;

{% %}: 用于执行语句;

{# #}: 用于添加注释。

因此 我们用 {{ }} 来输出变量、区块，和kint模块提供的方法。

在代码的底部，用 {% %}…

在之前的章节中，我们讲述了覆写模板和定义库，我们通过覆写的方式来改变html标签，通过库来引入CSS和JS。而页面是由HTML来定义结构，…

ok，我们先回到首页，在地址栏上将node/1删除，然后点击回车，这样就回到首页了。

然后我们把元素检查区域的代码往下拉，并展开，可以找到page.html.twig模板文件的开始。我们可以看到这个模板文件的出处是在stable中。这是因为我们之前新建自定义主题nowicode的时候在info文件中将stable主题声明为我们的基主题。而且…

之前，我们演示了用命令行来下载Drupal的项目，也就是bootstrap主题。现在，我们再来演示一下用手动的方式来安装一个Drupal模块。

首先，在谷歌上搜索drupal devel，我们可以在搜索结果中找到官网devel模块的项目页面。拉到最下面，点击下载链接。然后解压缩。…