============
== vtranq ==
============

Hugo Tips

Check if a partial template exists

{{ $partialPath := printf "headers/%s.html" .Type }}
{{ if templates.Exists ( printf "partials/%s" $partialPath ) }}
    {{ partial $partialPath . }}
{{ else }}
    {{ partial "headers/default.html" . }}
{{ end }}

Get image size

{{ $imgData := imageConfig "themes/mainroad/static/img/avatar.png" }}

<p><code>avatar.png</code> is {{ $imgData.Width }} pixels wide and
    {{ $imgData.Height }} pixels high.</p>

Check if image exists

<!-- Image path on file system -->
{{ $imgPath := "/static/static/images/hugo-gopher.png" }}

<!-- Check whether the path exists -->
{{ if fileExists $imgPath }}

    <!-- Load image data with imageConfig and insert it with `<img>` -->
    {{ $img := imageConfig $imgPath }}
    <img src="/static/images/hugo-gopher.png"
        width="{{ $img.Width }}" height="{{ $img.Height }}"
        alt="Hugo Gopher">

{{ else }}

    <!-- Trigger an error message with that the file or path couldn't be found -->
    {{ errorf "Specified file at %s not found." $imgPath }}

{{ end }}

Check if a file exists

{{ if fileExists "/themes/mainroad/static/img/avatar.png" }}
    <img src="/img/avatar.png" alt="Author avatar" width="90" height="90">
{{ end }}

Check if a directory exists

{{ $postFolder := "/content/post/" }}
{{ if fileExists $postFolder }}

    <p>There's a 'post' content folder. These are its files:</p>

    {{ range readDir $postFolder }}
        {{ .Name }}<br>
    {{ end }}

{{ end }}

Suport SCSS

  • Tạo tập tin /themes/<themename>/assets/scss/style.scss với nội dung ví dụ như:
@import 'sections/next.scss';
@import 'sections/cta.scss';
@import 'sections/whitepaper.scss';
@import 'custom.scss';
  • Trong partials/head.html, gắn code như ví dụ sau:
{{ $styles := slice }}
{{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }}
{{ $styles := $styles | resources.Concat "/css/style.css" | minify | fingerprint "sha512"}}
<style type="text/css">{{$styles.Content | safeCSS}}</style>

Cho phép markdown & shortcode con bên trong shortcode cha

Shortcode con khi render sẽ ra html; như vậy nội dung shortcode cha sẽ có chứa html; do đó, phải cấu hình để cho phép HTML, nếu không HTML sẽ bị obmitted

Thêm vào cấu hình trong file config.toml như sau:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Khi đó, cho phép ta dùng shortcode như ví dụ sau:

{{`<row class="bg-pattern ptb50"`>}}

{{`% column `%}}
### Title

Text

![](image.png)
{{`% /column `%}}

{{`% column `%}}
### Title

Text

![](image.png)

{{`<button "Download" "https://www.example.com"`>}}

{{`% /column `%}}

{{`</row`>}}

Lưu ý: có 2 cách gọi shortcode

  • Cách 1, dùng {{<và>}}`: cách này sẽ không parse markdown bên trong (nếu có)
  • Cách 2, dùng {{%và%}}`: cách này có parse markdown bên trong (nếu có)

.Pages vs .RegularPages

  • A regular page is a “post” page or a “content” page.
    • A leaf bundle is a regular page.
  • A list page can list regular pages and other list pages. Some examples are: homepage, section pages, taxonomy term (/tags/) and taxonomy (/tags/foo/) pages.
    • A branch bundle is a list page.

.Site.Pages : Collection of all pages of the site: regular pages, sections, taxonomies, etc. – Superset of everything!

.Site.RegularPages : Collection of only regular pages.

The above .Site... page collections can be accessed from any scope in the templates.

Pagination

REF: https://gohugo.io/templates/pagination/

Để cấu hình pagination thì thêm vào trong config.toml

paginate = 10

Khi đó, có thể hiển thị danh sách các posts trong một paginated page như sau:

{{ $paginator := .Paginate (where site.RegularPages "Section" "==" "blog") }}
{{ range $paginator.Pages }}
<div class="col-md-6">
    {{ .Render "article" }}
</div>
{{ end }}

Để hiển thị thanh paginator thì cách đơn giản nhất là dùng như sau:

{{ template "_internal/pagination.html" . }}

Range with index

<div class="panel-group" id="accordion">
    {{range $index, $element := .items}}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title" data-toggle="collapse" data-target="#panel-{{$index}}">{{$element.title}}</h4>
            </div>
            <div id="panel-{{$index}}" class="panel-collapse collapse">
                <div class="panel-body">{{$element.text}}</div>
            </div>
        </div>
    {{end}}
</div>

Minify HTML output

hugo -D --minify