スポンサーリンク

PhoenixTutorialを写経(3)

前回は、以下を写経した

https://daruiapprentice.blogspot.jp/2015/06/rails-tutorial-for-phoenix_21.html

http://twosquirrel.mints.ne.jp/?p=14917

今回は、引き続き、以下を写経する

2015年6月26日
[Rails Tutorial for Phoenix]Filling in layout
https://daruiapprentice.blogspot.jp/2015/06/rails-tutorial-for-phoenix_26.html

(参考)RailsTutorial 第5章
https://railstutorial.jp/chapters/filling_in_the_layout?version=5.0#cha-filling_in_the_layout

(環境)
Windows 8.1
VirtualBox 5.1.14
Vagrant 1.9.1
CentOS7.3
Erlang/OTP 19
Elixir 1.3.4
Phoenix 1.2.1

環境構築は以下のように行っている

http://twosquirrel.mints.ne.jp/?p=14421

http://twosquirrel.mints.ne.jp/?p=14545

(0)Windows(ホストOS)のコマンドプロンプトで、vagrant upして、TeraTermでログイン(127.0.0.1, 2222, vagrant, vagrant)

(1)Preparation

Phoenix1.2.1には、Bootstrap3が既に入っているので、sassが使用できるように、npm install sass-brunchを行う

npm install --save --no-bin-links sass-brunch

image image

(2)Layout template

レイアウトを扱っているファイルは以下の2つ。
web/templates/layout/app.html.eex
web/views/layout_view.ex

git checkout -b filling-in-layout

image

web/templates/layout/app.html.eex

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<meta name=”description” content=””>

<meta name=”author” content=””>

<title>SampleApp!</title>

<link rel=”stylesheet” href=”<%= static_path(@conn, “/css/app.css”) %>”>

</head>

<body>

<header class=”navbar navbar-inverse”>

<div class=”navbar-inner”>

<div class=”container”>

<a class=”logo” href=”<%= page_path(@conn, :index) %>”></a>

<nav>

<ul class=”nav nav-pills pull-right”>

<li><a href=”<%= static_pages_path(@conn, :home) %>”>Home</a></li>

<li><a href=”<%= static_pages_path(@conn, :help) %>”>Help</a></li>

<li><a href=”<%= static_pages_path(@conn, :about) %>”>About</a></li>

<li><a href=#>Sign in</a></li>

<li><a href=”http://www.phoenixframework.org/docs”>Phoenix Get Started</a>

</ul>

</nav>

</div> <!– container –>

</div> <!– navbar-inner –>

</header>

<div class=”container”>

<p class=”alert alert-info” role=”alert”><%= get_flash(@conn, :info) %></p>

<p class=”alert alert-danger” role=”alert”><%= get_flash(@conn, :error) %></p>

<main role=”main”>

<%= render @view_module, @view_template, assigns %>

</main>

</div> <!– /container –>

<script src=”<%= static_path(@conn, “/js/app.js”) %>”></script>

</body>

</html>

image

mix phoenix.server してから、http://localhost:4000

image

image image

全然かっこよくないけど、とりあえず、、、

(3)Rendering chain

web/templates/layout/app.html.eex

image

web/templates/layout/shim.html.eex

image

web/templates/layout/header.html.eex

image

web/templates/layout/footer.html.eex

image

(4)scss

web/static/css/app.css

を、app.scss に変更(拡張子をscssに変更)して、以下のように記載

image

image

image

image

一度、Ctrl+Cを2回でサーバ停止してから、再度、 mix phoenix.server

image

image

なんか思いっきりかっこ悪い!

web/templates/layout/header.html.eex

image

image

web/templates/layout/header.html.eex

image

id=”logo” にした。class=”logo”だと、Phoenixのロゴマークが入ってしまう。

image

web/templates/layout/app.html.eex

image

image

(5)You want to add a contact page

contactページの追加

web/router.ex

image

web/controllers/static_pages_controller.ex

image

web/templates/static_pages/contact.html.eex

image

contactページへのリンク

web/templates/layout/footer.html.eex

image

image

(6)Modify home template

web/templates/static_pages/home.html.eex

image

web/controllers/static_pages_controller.ex の、homeアクション の@messageを消去

image

image

ボタンが左によっている。

web/templates/static_pages/home.html.eex

image

image

(7)Before the end

git add -A

git commit -am “Finish filling_in_layout”

git checkout master

git merge fillig-in-layout

 

git push -u origin –all

image image

なぜかうまくいかない。理由は不明。

→一度、ログアウトして、vagrant halt, vagrant up して、git add -Aからやりなおしたら、うまくいった。原因不明。

スポンサーリンク