基础篇26. 添加logo、主题设置

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

现在,我们的网站是有logo的,这个logo是写死在模板文件中的。但是,drupal的主题系统,其实已经为我们提供了在后台上传logo和指定logo位置的功能。因此,这一节让我们来从后台指定一个logo,并输出到页面上。

在外观页面进入设置选项卡,你可以看到主题的全局设置,这些选项默认都是被勾选的。你可以在自己的主题设置中覆盖这些设置。

注意这里两个关于显示头像的选项,如果被取消了,则对应的位置上不会显示用户头像。

点击nowicode,将使用主题提供的logo这一项的钩取消掉,就会显示让你自定义logo路径的表单。

为了输入logo路径,我们首先要制作一个logo图片。因为在我们主题文件夹中还缺少这个图片。在page模板中拷贝对应的svg代码,在主题文件夹nowicode中新建一个logo.svg的文件,并将拷贝的代码黏贴到文件中保存。然后回到主题设置页面,在输入框中填写logo.svg的路径,并保存。

然后进入区块布局页面,找到site branding区块,把它放置在header也就是页眉中,并启用这个区块。注意,这个区块并不是自定义的区块,而是由系统提供的。

然后回到模板文件中将对应的svg代码删除,并将原来用于输出header区域的代码移动到此处并保存。

回到首页刷新之后可以看到,logo被打印在页面上了,但是尺寸还需要调整。而且下面还输出了一个“drupal”。这个“drupal”是站点名称,但是很奇怪的是,我们的站点名称其实并不是drupal而是d8,这应该是一个小bug,在区块配置中,设置不显示站点名称,就可以删除这个“drupal”。(实际上,这里并不是一个bug,解决方法在第二节中有提到,但是,在我们这个例子中,我们并不希望显示站点名称,因此,只要设置不显示站点名称即可。)

然后我们查看元素,可以看到这个svg图片的尺寸没有被定义。并且logo处的代码有很多多余的东西,你可以看到这里嵌套了很多a标签,这也是需要调整的。

然后我们切换到文章页面,这个页面的模板并没有被改动过,因此是正常的,我们再次查看这个logo,可以看到svg的高度被设置为40像素。

所以,我们首先进入模板文件,把区域外面的a标签先删除,简化此处的代码,然后在我们之前已经引入的custom.css文件中添加一个css规则,来设置svg的高度。代码见文档。

#block-nowicode-branding img{

    height:40px;

}

回到首页,刷新后就能看到正确的结果了。

然后我们把刚才在首页模板中的代码拷贝到page.html.twig中,即可。

我们在开发主题和模块的过程中都会经常面临选择,是否需要用drupal系统提供的方案来解决问题。比如,这里的logo,如果你是为自己公司做的网站,你直接在模板中放logo图片就能解决问题了;但是如果你是为客户开发的网站,而客户又不懂技术,而且以后还有可能会经常更换logo,那么,你就应该教会客户在后台界面中上传和更换logo,并在相应的模板中用变量来输出这个logo。

并不是所有的情况,我们都应该采用drupal提供的方式来解决问题,但是,作为一个专业的drupal从业者,你应该去学习和了解drupal提供的各种解决方案。

本书共84小节:

评论 (写第一个评论)