skbull/skbull.github.io

You earn, You yawn, You yeah you Yon. 🎪

skbull.github.io's Issues

IssuesもBlogリポジトリで編集。

Headerの追加

HTML とデータの分離

現在は source/index.html.erb の中身に文章などのコンテンツを直接記述していますが、コンテンツの編集が必要になるたびに HTML ファイルを直接編集するのは面倒だと思います。コンテンツだけでなく、タグの追加や整形なども必要だからです。

そこで、今後更新しうるコンテンツを別ファイルに分離したいです。具体的には以下のリストの部分ですね。

<h2>出身</h2>
<ul>
  <li>宗像市</li>
</ul>
<h2>好きなこと</h2>
<ul>
  <li>ペーパークラフト</li>
  <li>授業が２限からの日に１限ギリギリに学校にいって１限に急いでる人見ること</li>
  <li>寿司</li>
</ul>
<h2>好きな動物</h2>
<ul>
  <li>白くま</li>
  <li>ライオン</li>
  <li>クロヒョウ</li>
  <li>チンパンジー</li>
  <li>山猫</li>
</ul>

手順

01. YAML ファイルの作成

まず Ruby で以下の様な構造の配列を用意したいです。

lists = [
  { header: '出身', items: ['宗像市'] },
  { header: '好きな動物', items: ['イヌ', 'ネコ', 'キュウべえ'] },
]

このように構造を持ったデータを扱うのに YAML というフォーマットが便利で、よく使われます。まず YAML ファイルを用意して、Ruby で YAML ファイルを読み込み、上記のデータ構造を再現してください。

02. erb ファイルに Ruby コードを埋め込む

source/index.html.erb では h2 要素と ul 要素の並び方がパターン化していますね。せっかく erb という Ruby コードを埋め込めるファイル形式を使っているので、YAML から読み込んだデータを Ruby のループでコンテンツを埋め込めないでしょうか。

<% data.lists.each do |list| %>
  <%# ここを実装する。 %>
<% end %>

参考

• Middleman » ドキュメント » データファイル
• Rubyist Magazine - プログラマーのための YAML 入門 (初級編)

背景を見やすく

内容の追加

一番下に下がるボタン

レスポンシブデザインにする

footerの追加

naviの追加

JSでエフェクトの追加