Picoの迷いポイント

デフォルト状態でヘッダーにリンク表示

  • contentフォルダ直下の.md
  • contentフォルダ直下のindex.md（サイトのトップページになる）
  • contentフォルダ ＞フォルダ（1階層目） ＞index.md

これより深い階層はindex.mdでも表示されない。

基準位置

contentフォルダ直下を基準位置（0階層目）と考える。ただし1階層目はcontentフォルダ直下同様に扱われる場合あり。

下階層からの戻りパスの書き方は以下

  • ひとつ上のフォルダへは../で戻る。2つ上なら../../で。

パスを間違いがち（画像が表示されない）

contentフォルダ内にフォルダ階層を作った場合、

  • 1階層目は戻りパスなしでassets/～と書いてOK。勝手に読んでくれるっぽい。
  • 2階層目以降はcontentフォルダ直下までの戻りパスを書き、その後にassets/～と続ける。

パスを間違いがち（.mdファイル同士のリンクエラー）

  • .md（拡張子）はいらない。index.mdではなくindexでOK。

indexファイルは他のファイルと挙動が異なる。ので要注意。

  • 移動先フォルダのindexへは、フォルダ名だけでOK。（むしろindexまで書くとindexフォルダがあるかのようなURLになるので注意
  • 1階層目以降、indexファイルから同フォルダ内へのリンクは、自身が含まれるフォルダ名からパスを書く。例：フォルダ名/ファイル名
  • 同フォルダ内・他ファイルからindexに戻るときは../フォルダ名。
  • 同フォルダ内・index以外のファイル同士のリンクはファイル名のみでOK。

戻りパスだけで上のフォルダに行くとURLの最後に/がついて別のURLになるので、行きたいフォルダのもうひとつ上まで出てからフォルダに入りなおす必要あり。めんどくさい。が他でラクしてる副作用ゆえ仕方がない。

例：content ＞ neko ＞ sakana で、sakana フォルダ内にいるとき

[](../)　URL→ neko/
[](../../neko)　URL→ neko

/の有無は厳密には別URLらしく、キャッシュが異なっていた。

これらの関係を図にまとめると良いかも。

twigファイル内のリンクパスの書き方

{{ "url"|link }}のようにするとサイト内のどのページからでもリンク可能になる。urlにはcontentフォルダ直下からのパスを書く。

<a href="{{ "x/PrivacyPolicy"|link }}">プライバシーポリシー</a>

グリッドのタグ（ここから下、個人的メモ）

767px以下で4と3は2に、2は1になる。420px以下だと3も1になる、、ように指定した。レスポンシブ。ちなみにコンテンツの入るコンテナは43emになってる。 

<div markdown="1" class="card-2">
  <div markdown="1" class="item">Item 1</div>
  <div markdown="1" class="item">Item 2</div>
  <div markdown="1" class="item">Item 3</div>
  <div markdown="1" class="item">Item 4</div>
  <div markdown="1" class="item">Item 5</div>
  <div markdown="1" class="item">Item 6</div>
</div>

cardは 2 または 2-r または 2-l または 3 または 4
4は「gap: 0px;」。4コママンガ用。（2：3：3：2）
2-rは右広め（2：3）、2-lは左広め（3：2）、2は均等、3も均等

itemは -rin または -4 または何も付けない普通バージョン
item-rin (輪郭線つき)、item-4（輪郭なし上下余白なし）

4コマ用のタグ

<div markdown="1" class="card-4">

  <div markdown="1" class="item-4">/* 1段目・左余白 */
  </div>
  <div markdown="1" class="item-4">
  画像・テキスト（1）
  </div>
  <div markdown="1" class="item-4">
  画像・テキスト（2）
  </div>
  <div markdown="1" class="item-4">/* 1段目・右余白 */
  </div>

  <div markdown="1" class="item-4">/* 2段目・左余白 */
  </div>
  <div markdown="1" class="item-4">
  画像・テキスト（3）
  </div>
  <div markdown="1" class="item-4">
  画像・テキスト（4）
  </div>
  <div markdown="1" class="item-4">/* 2段目・右余白 */
  </div>

</div>

下線と太線作った

.kasenと.hutosen作ったのでspanなどのクラスで使う。 

<b class="hutosen">のらねこ</b>はつよい。  
だが、<span class="kasen">いえねこ</span>もなかなかつよい。

表示

のらねこはつよい。
だが、いえねこもなかなかつよい。

色文字作った

.sankou {
  color: teal;
}
.tabi {
  color: green;
}
.hon {
  color: indianred;
}
.bb {
  color: steelblue;
}

sankou、tabi、hon、bb。xxにはじめの3つ、xxにbbを使ってる。