第10次视频,引入CSS和Bootstrap

A. 引入CSS文件的方法

如果想让网站变得不是那么朴素,就要引入CSS来给网页化化妆。然后要知道修改哪个文件会让网页变的美观一些。

接下来,我就来实现这个功能。实现这个功能的文件在:

app/views/layouts/application.html.erb

在这里,我们要关注文件中的这一行:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

这一行的作用是引入css文件,生成的HTML代码如下:

<link rel="stylesheet" media="all" href="/assets/application-35729bfbaf9967f119234595ed222f7ab14859f304ab0acc5451afb387f637fa.css" data-turbolinks-track="reload" />

如果你是和我一样的人,就喜欢问清楚所有的细节,可能会对这句中的data-turbolinks-track有问题,这个是什么鬼?

简单来说,这个Turbolinks 是 Ruby on Rails 的 Web 加载优化方案。当用户点击链接时,并不真实的跳转网页,而是通过 ajax 读取目标页的内容,然后替换当前页。这种方式有以下优点:

  1. 避免 Javascript 和 CSS 的重新加载
  2. 减少网页的重新渲染的工作量
  3. 对搜索引擎友好
  4. 无须后端改动
  5. 支持 App 端(有 Android 和 iOS SDK)

当然,具体还有很多的细节,在这里不是重点,大家只要先知道,这一行我们引入了一个css文件。

引入的application.css,app/assets/stylesheets/目录是Asset Pipeline要读取的文件。等到要引入Bootstrap的时候,再来详细讲一下这里。

B. 使网站可以动态显示标题

让我们随便打开一个网站,比如说https://news.ycombinator.com/news,我们可以看到几乎所有的网站的每一个网页都会有自己自定义的标题。这个标题基本上分为两个部分,一部分是固定不变的,比如 | hacker news这一部分不变,但是前面这一部分是会变化的。

和上一个引入CSS所调用的内置方法不同,上面引入CSS的时候,Ruby on Rails提供了内置的函数stylesheet_link_tag。现在没有一个内置函数可以用了,我们只能自己动手,丰衣足食了。自己写一个函数。我们把这个函数命名为full_title。

我们再来看一下网站布局的这个页面,找到布局文件的第四行:

app/views/layouts/application.html.erb
<title>Lmzdx2</title>

只要修改这里就可以了。在这里只显示Lmzdx2是没有前途的,我希望显示像hacker news上那样,类似于这样的:

好好学习,天天想上 | 绿帽子大学
首页 | 绿帽子大学
第十次视频 | 绿帽子大学

第一步要解决的问题是,如何将可变的部分

好好学习,天天想上
首页
第十次视频

作为一个变量传到布局文件application.html.erb中去。方法不难,以前用过一次,就是用yield。下面我就来展示一下如何做到的。

Demo:如何动态生成每个页面的title

在视频中要先用简单粗暴的方法实现一次,然后再定义一个辅助方法。然后说明为什么用辅助方法会更好一些。用辅助的方法能处理更多的情况,也更符合DRY(不要重复自己)的理念。

C. 总结一下A和B中两个函数的异同

stylesheet_link_tag是内置的辅助函数,可以在rails的源码里找到,位置在:

 rails/actionview/lib/action_view/helpers/asset_tag_helper.rb

我们自定义的函数可以称为自定义的辅助函数,位置放在:

app/helpers/application_helper.rb

按照惯例,辅助函数(helper)要放在与控制器(controller)相对就应的文件里,因为在这里我们希望在全部网站上都使用full_title来改变网页的title,所以,我放在一个特殊的辅助文件里:

app/helpers/application_helper.rb

如果不是用在全局中,大家只要打开

app/helpers/

这个文件夹,就知道应该放在哪里了。只要放在对应的文件里即可。

以下是稍微深入研究一下的内容,对此有兴趣的同学可以研究一下:

打开helper文件以后,会发现一个关键字module。这是ruby组织一些相关的方法在一起的方式。所谓的相关方法,在这里是同一个controller的helper,helper的意思是助手,有一些方法写到controller里不太合适,但是可以写到helper里。

当我们在写ruby代码的时候,也可以使用module这种方式组织代码,然后用include这个关键字将代码插入类中。但是在Ruby on Rails中,使用include这种“明显”的方法就太麻烦了,索性就把include给省了,Rails会自动的将我们写的方法(比如full_title)自动引入。

D. 添加一些CSS,让网站不那么丑 🙂

让web变的好看是一件特别困难的事。我要录的是web编程,不是web设计,我设计水平也实在是拿不出手,只好用别人做好的东西用用。

我试图做的是一个类twitter网站,twitter的前几版是用ruby on rails做的,后来,twitter的工程师开源了一个web设计框架叫Bootstrap。我打算也用一下这个web设计框架。

Demo,修改HTML,引入Bootstrap

我的公众号,如果有用,帮我点广告 🙂

《第10次视频,引入CSS和Bootstrap》有3个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注