Portfolioショートコード追加

August 8, 2018

テーマアップデート

このサイトのProjectsに、作品の実績を追加したく書いていたところ「もっとよく見せたい」と考え、思い切ってショートコードを追加することにしました。

{% portfolio image="/image/thumbnail.png" alt="Coder Portfolio" %}
## Coder Portfolio

Hugoの既存テーマ[hugo-coder](https://github.com/luizdepra/hugo-coder)を元にして作った自作テーマです。  
より自分自身が伝えられるようにshortCodeの追加、デザインの改修を行いました。  
面白いギミックで個人的なことが書けるのが魅力のテーマです。  
是非このサイトでも、下のBarのClickを押してみてください！  
Github→[hugo-coder-portfolio](https://github.com/naro143/hugo-coder-portfolio)  
{% /portfolio %}

上記のように書くといい感じに表示してくれます。
→見に行く

もちろんレスポンシブ対応です。
Hugoの公式を見ながら書きました。
結構簡単です。

1.ShortCodeの追加

themes/{theme_name}/layouts/shortcodes/{shortcode_name}.html

を作成します。
これでshortcodeを呼べるようになります。

2.ShortCodeの内容の記述

次に内容を記述していきます。（今回追加したportfolio.html）

{{ if .IsNamedParams }}
  {{ $.Scratch.Add "image" ( .Get "image") }}
  {{ $.Scratch.Add "alt" ( .Get "alt") }}
{{ else }}
  {{ $.Scratch.Add "image" "" }}
  {{ $.Scratch.Add "alt" "" }}
{{ end }}

{{ $image := $.Scratch.Get "image" }}
{{ $alt := $.Scratch.Get "alt" }}

<div class="portfolio">
    <div class="portfolio-inner">
        <div class="portfolio-image"><img src="{{ $image }}" alt="{{ $alt }}"></div>
        <div class="portfolio-content">
            {{ .Inner }}
        </div>
    </div>
</div>

上部にでShortCodeから受け取る属性や、ファイル内での変数の定義を行います。
あとはDOMを書いてあげれば完了です。


本音を見る？→Click!