Rails ＋ Bootstrap我的博客搭建的完整过程（1）

时间 2019-11-17

标签 rails bootstrap 我的博客搭建完整过程栏目 Bootstarp 繁體版

原文原文链接

Part 1 javascript

－首先最基本的，建立一个新的的project： css

rails new blog

－而后修改source为https://ruby.taobao.com，加入bootstrap的gem到Gemfile：

gem 'twitter-bootstrap-rails'

执行bundle install没有错误，可是有一个提示：

Important: You may need to add a javascript runtime to your Gemfile in order for bootstrap's LESS files to compile to CSS.

**********************************************

ExecJS supports these runtimes:

therubyracer - Google V8 embedded within Ruby

therubyrhino - Mozilla Rhino embedded within JRuby

Node.js

Apple JavaScriptCore - Included with Mac OS X

Microsoft Windows Script Host (JScript)

**********************************************

看提示是缺乏了一个js的runtime，Ok，按照提示我安装了ExecJS

gem install execjs

而后在Gemfile里面添加了ExecJS支持的runtime： html

gem 'therubyracer'

再次bundle install，没有问题，访问localhost:3000，能够正常访问！

Part 2 java

－建立首页 shell

rails generate controller blogs

在controller目录下的blogs子目录里面的blogscontroller.rb添加index方法

def index
end

而后在views目录下面建立index.html.erb文件，加入一行html的代码 bootstrap

<h1>Hola,Rails!</h1>

最后就是更改routes.rb文件，添加 ruby

root to: 'blogs#index'

再次刷新localhost:3000便可看到新的首页了！

Part 3 app

接下来就是利用bootstrap开始修饰页面吧！修改view子目录下面的application.html.erb文件，首先修改整站的标题为“Blues的博客” spa

<head>
  <title>Blues的博客</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>

而后设置好导航条

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	  <div class="container">
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">Blog</a>
	    </div>
	    <div id="navbar" class="navbar-collapse collapse">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="#">文章列表</a></li>
	        <li><a href="#about">关于博主</a></li>
	      </ul>
	    </div>
	  </div>
	</nav>

最后把每一个页面的内容发在bootstrap的container内部

<div class="container">
	<%= yield %>
</div>

这时会发现导航条老是会盖住你的页面的内容，这代表导航条会对以后全部的页面产生影响，那么该怎么办呢？只需在全局的css文件中设置好body里面的内容与顶部的间距便可。导航条的高度默认是50px，那么咱们的间距能够设为60px

body {
	padding-top: 60px;  60px to make the container go all the way to the bottom of the topbar 
}

到此，咱们的基本页面就算有个样子了。