Alto-tascal コンポーネント

2019-03-21

Alto-tascal 専用コンポーネント or ショートカット。 標準の Markdown では表現できない見た目を Hugo の shortcode や CSS で実装したもの。

サイト内リンク

タイトルを含めて自動生成してくれるようなものが Hugo に見当たらなかったので自分で書いた。

サイト内のリンクは区別がつくようにセクションを示すバッジをつけた：

文法：

- {{< al-link "/devlog/altotascal/journal" >}}

shortcodes/al-link.html ：

{{ with .Site.GetPage (.Get 0) }}
  <label class="al-badge al-bg-{{ .Section }}">{{ .Section }}</label>
  <a href="{{ .RelPermalink }}">
    {{ .Title }}
  </a>
{{ end }}

絵文字

ブロックで強調

通常の文章に対して、

引用はこのような見た目になるが

括って強調したい部分に関しては

  • このように白枠で覆う

文法：

{{< card >}}
Markdown
{{< /card >}}

shortcodes/card.html ：

<div class="al-card">
  {{ .Inner | markdownify }}
</div>

帯

背景に横幅 100 ％の帯を敷く。画像などを並べる際に使う

文法：

{{< band >}}
  ![](/img/works/genetos/01.png)
  ![](/img/works/genetos/02.png)
  ![](/img/works/genetos/03.png)
{{< /band >}}

shortcodes/band.html ：

<div class="al-band text-center">
  {{ .Inner | markdownify }}
</div>

Tatsuya Koyama

 /