CHROMA

世の中の "当たり前" を確認する

Top > Dev

順序付きリスト先頭のアレの書体を変える

Dev

リスト項目の本文と連番のスタイルを分けたかったのでやった。書体っていうか、まぁ何にでも置き換えられると思う。

ここでは擬似要素と counter プロパティを用いて、リストの側に付いてるアレ（なんていうんだ）をセリフ体からサンセリフ体に変える。

ol {
  padding-left: 2em;
  list-style-type: none;
  counter-reset: ordered-list;
}

ol > li {
  position: relative;
}

ol > li::before {
  position: absolute;
  top: 0;
  left: -1.25em;
  counter-increment: ordered-list;
  content: counter(ordered-list) ".";
  font-family: sans-serif;
}

よーし、帰って飯食うぞ。

追記

記事タイトルを list-style-type の書体を変えると書いていたけどそういう内容ではなかった。list-style を counter で置き換えてるんであって。

ということで記事タイトルを変更した。

make コマンドを一応叩いて一日を終える

Dev

今日は make・Makefile 入門みたいな記事を 2, 3 読んで、その後に make コマンドで Sass ファイルのコンパイルと autoprefixer でベンダープレフィックスを付けるというのをやった。

半年後にこの設定ファイルを開いても中身がすぐわかるように小さく、単純にまとめておきたい。Grunt のときははじめに気合を入れて書きすぎたのか、自分で書いたものにも関わらず数ヶ月後に開いた時にすべてを把握できなかった。

## 追記
2, 3 のドキュメント。

始めのもの以外はまだ読みかけ。

    • -

今日は思ったより作業が進まなかったので、ここに載せれるものがない。残念。

サイトメニュー

Dev

HUGO.

https://github.com/ucsbphil/philweb/blob/master/layouts/partials/nav.html を参考に、サイトメニューの表示と現在開いているページのメニューをアクティブ化、というのをしてる。

config.toml:

[[menu.global]]
    name = "blog"
    identifier = "blog"
    weight = 0
    url = "/blog/"
[[menu.global]]
    name = "work"
    identifier = "work"
    weight = 1
    url = "/work/"
[[menu.global]]
    name = "about"
    identifier = "about"
    weight = 2
    url = "/about/"

layouts/partials/header.html:

<ul class="global-nav">
  {{ $currentNode := . }}
  {{ range .Site.Menus.global }}
    {{ $atTopLevel := $currentNode.IsMenuCurrent "global" . }}
    {{ $inScope := ( $currentNode.HasMenuCurrent "global" . ) }}
    <li>
      {{ if $atTopLevel }}
        <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
      {{ else if $inScope }}
        <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
      {{ else }}
        <a href="{{ .Url }}" class="global-nav-link">{{ .Name }}</a>
      {{ end }}
    </li>
  {{ end }}
</ul>

content/blog/something.md:

+++
[menu]
  [menu.global]
      parent = "blog"

+++

/blog とか /work などの一覧ページのときは {{ if $atTopLevel }} で、その子にあたるページに対しては {{ else if $inScope }} でアクティブ状態のクラスを追加するように指定してる。...面倒くさそう。

content/blog/something.md に書いてるようなことは archetypes に書いておいて、新規コンテンツ作成時にそのデータが挿入されるようにしておけば大分面倒臭さも軽減されそうだけど。

あと、単純に書き方がわからないんだけど、このへんはどうにかしたい。

{{ if $atTopLevel }}
  <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
{{ else if $inScope }}
  <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
{{ else }}
  <a href="{{ .Url }}" class="global-nav-link">{{ .Name }}</a>
{{ end }}

追記

あと、単純に書き方がわからないんだけど、このへんはどうにかしたい。

こうなんやで:

{{ if or $atTopLevel $inScope }}
  <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
{{ else }}
  <a href="{{ .Url }}" class="global-nav-link">{{ .Name }}</a>
{{ end }}

http://golang.org/pkg/text/template/#hdr-Functions を見たんやで。

タイトル情報の形式を分ける

Dev

Hugo.

layouts/partials/meta.html とかにタイトル情報（ <title></title> ）を置いていて、特定のページだけタイトル情報の形式を違うものにしたいとき。

基本的には ページタイトル - サイト名 の形で title を出し、URL がサイトのルートディレクトリに当たる場合はサイト名のみを出す。

{{ if eq .Url "/" }}
    <title>{{ .Site.Title }}</title>
{{ else }}
    <title>{{ .Title }} - {{ .Site.Title }}</title>
{{ end }}

別の書き方で同じことをしている人もいた。: https://github.com/vjeantet/hugo-theme-casper/blob/master/layouts/partials/header.html

<title>
  {{ if ne .Url "/" }} {{ .Title }} &middot; {{ end }} {{ .Site.Title }}
</title>

eq とか ne については Hugo Template Functions に書いてある。

HUGO, 記事前後のページャー

Dev

前後の記事に移動するリンク、こんな感じで書いてる。MOL の pager を真似して 9割9分そのままなんだけど、 .PrevInSection とかで移動する先をセクションの中で行うようにしてる。content/blog 、content/work の中だけで記事を移動するように。

<div class="pager">
  <div class="pager-prev">
  {{ with .PrevInSection }}
    Prev: <a href="{{ .Permalink }}">{{ .Title }}</a>
  {{ else }}
    &nbsp;
  {{ end }}
  </div>

  <div class="pager-next">
  {{ with .NextInSection }}
    Next: <a href="{{ .Permalink }}">{{ .Title }}</a>
  {{ else }}
    &nbsp;
  {{ end }}
  </div>
</div>

with と if の違いがまだわかってないぞ！

HUGO を触り始める

Dev

HUGO というものがあるらしいです。読み方は "ヒューゴ" です。間違ってフゴと読むのはとても恥ずかしいことなのでやめておきましょう。

このへん見て知りました。どれを最初に見たかは覚えていません:

公式のドキュメントと以下の記事を見て僕にも扱えそうだと思い、ソフトタッチ程度のお触りを開始しました:

今は HUGO を使ったサイトを色々見ながら、色々試しています:

全然関係ないけど、今朝電車のホームで母親が娘に放った一言が良かったので載せておこう。

「落ちてるものがゴミだとしても拾うんだよ」

ゴミが落ちてたら近くのゴミ箱に捨ててあげようね、ということが言いたかったっぽい。

縦幅を揃えて一行に複数列を並べる

Dev

モバイルサイトのコーディングをしてる中で、display: table を使った一行に複数の列が並ぶリストを作った。縦幅が揃ってること、セパレーションボーダーの高さの調節が簡単にできるのが良いとこで、コンテンツが増減する可能性が少ない場所なんかで使えると思う。

縦幅を揃えて一行に複数列並べる | JSFiddle :

.group {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}

.group li {
  position: relative;
  display: table-cell;
  padding: 8px;
  background-color: whiteSmoke;
}

.group li::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 1px;
  height: 50%;
  background-color: gray;
}

そして、いきなりなんだけどこれの弱点は、グループ内にコンテンツを容易に増やせないことにあると思う。狭いウィンドウの中で列を増やすとコンテンツ一つ一つの幅が狭くなり、一行に収まる文字数が極端に少なくなったり、画像なら小さくなりすぎてしまう。その上ウィンドウサイズの変化に合わせてカラムを上げたり落とすことができない... 。

また、固定のウィンドウサイズの中で使うとしても、複数行にまたがるリストを ul や ol で表すことができない。二列数行、三列数行にまたがるコンテンツを並べたいときは、以下のように行を括ってあげないと全て一行の中にコンテンツが並ぶことになる。

<div class="group">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

使いどころは少ない気がするけど、サイトのアピールポイント（ 2つとか 3つなら）を並べるときとかには良い、かも。