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 
}

到此，咱們的基本頁面就算有個樣子了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。