phoenix-powerWeb高速化で一応、AAランクを目指してみました。

http://syui.github.io/middleman/

テーマをイチから作るようなことをしてみました。ただし、シンプルなテンプレートをだいぶ参考にしていますが。

Webの高速化は、以下のサイトを見て、ダメな部分を削っていけば自然にAAランクが取れます。

http://gtmetrix.com/

ただし、シンプルなテーマを選ぶか、イチから作るかでしか早期に達成するのは難しそうです。

今回は、以前から一度、シンプルなテーマを作ってみたかったこともあり、一石二鳥でしたが、分からない所もたくさんありました。

まず、 Middleman で一般的に使われている変数がまとまっていないので、ソースを見ていくしかなかったです。

また、 PATH と HOVER が難しかったです。

例えば、個別記事全体にリンクを貼るにも、プロジェクトページを使っていると、/(root)の記述が使えないため、 PATH 設定が困難を極めるなどしました。しかも、これは、プレビューで確認する事ができない。(推測はできますが

なんとか対応した形が以下の通りです。

source/index.html.erb
1
2
3
4
5
6
7
8
9
<% page_articles.each_with_index do |article, i| %>
<% if i > 0 %>
    <div class="articles" onclick="location.href=&#34;.<%= article.url %>&#34;;" style="cursor: pointer;">
    </div>
<% end %>
    <div class="articles" onclick="location.href=&#34;.<%= article.url %>&#34;;" style="cursor: pointer;">
        <%= partial '/blog/article', :locals => {:article => article, :digest => true} %>
    </div>
<% end %>

しかし、タグページだと、何故か URL が二重になるため.が使えませんでした。よって、site_urlを使います。

source/layouts/tag.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="breadcrumbs">
    <li><a href="<%= site_url %>"><span class="icon-home"></span></a></li>
  <li class="current"><a href="<%= tag_path tagname %>"><%= tagname %></a></li>
</ul>

  <% page_articles.each_with_index do |article, i| %>
    <% if i > 0 %>
    <div class="articles" onclick="location.href=&#34;<%= site_url %><%= article.url %>&#34;;" style="cursor: pointer;">
    </div>
    <% end %>
    <div class="articles" onclick="location.href=&#34;<%= site_url %><%= article.url %>&#34;;" style="cursor: pointer;">
        <%= partial '/blog/article', :locals => {:article => article, :digest => true} %>
    </div>
  <% end %>