Hugo - Adding Content Sections - archetype, content pages, single page template(single.html), list template(list.html),_index.html

Build Websites With Hugo:
Fast Web Development With Markdown
紀伊國屋書店

開発環境

• macOS Catalina - Apple (OS)
• Emacs (Text Editor)
• Windows 10 Pro (OS)
• Visual Studio Code (Text Editor)
• Hugo

Build Websites With Hugo: Fast Web Development With Markdown (Brian P. Hogan(著)、Pragmatic Bookshelf)のChapter 3(Adding Content Sections)、Your Turn 2.の解答を求めてみる。

portfolio/archetypes/presentations.md

---
title: "{{ replace .Name "-" " " | title }}"
draft: false
---

![alt](//via.placeholder.com/640x150)

Presentation...
### Slides

* slide
* slide
* slide

portfolio/content/presentations/_index.md

---
title: "Presentations"
draft: false
---

This is a list of my presentations. You can select each presentation to learn more about each one.

portfolio/content/presentations/theme1.md

---
title: "Theme1"
draft: false
---

![alt](//via.placeholder.com/640x150)

Presentation...
### Slides

* slide
* slide
* slide

portfolio/content/presentations/theme2.md

---
title: "Theme2"
draft: false
---

![alt](//via.placeholder.com/640x150)

Presentation...
### Slides

* slide
* slide
* slide

portfolio/themes/basic/layouts/partials/nav.html

<nav>
<a href="/">ホーム</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
<a href="/presentations">Presentations</a>
<a href="/resume">Résumé</a>
<a href="/問い合わせ">問い合わせ</a>
</nav>

portfolio/themes/basic/layouts/projects/single.html

{{ define "main" }}
<div class="presentation-container">
 <section class="presentation-list">
  <h2>Presentations</h2>
  <ul>
   {{ range (where .Site.RegularPages "Type" "in" "presentations") }}
   <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
   {{end}}
  </ul>
 </section>
 <section class="presentation">
  <h2>{{ .Title }}</h2>
  {{ .Content }}
 </section>
</div>
{{ end }}

portfolio/themes/basic/layouts/projects/list.html

{{ define "main" }}
<h2>{{ .Title }}</h2>
{{ .Content }}
<section class="presentations">
 {{ range .Pages }}
 <section class="presentation">
  <h3>
   <a href="{{ .RelPermalink }}">{{ .Title }}</a>
  </h3>
 </section>
 {{ end }}
</section>
{{ end }}

portfolio/themes/basic/static/css/style.css

.container {
    width: 80%;
}
nav, footer {
    display: flex;
    flex-direction: column;
    text-align: center;
}
nav > a {
    flex: 1;
}
@media screen and (min-width: 768px) {
    nav {flex-direction: row; }
    .project-container, .presentation-container  {display:flex;}
    .project-container .project-list,
    .presentation-container .presentation-list {width:20%;}
    .project-container .project,
    .presentation-container .presentation { flex: 1;}
}

コード

入出力結果(Zsh、PowerShell、Terminal、Jupyter(IPython))

% tree themes/basic/
themes/basic/
├── LICENSE
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   ├── partials
│   │   ├── footer.html
│   │   ├── head.html
│   │   ├── header.html
│   │   └── nav.html
│   ├── presentations
│   │   ├── list.html
│   │   └── single.html
│   └── projects
│       ├── list.html
│       └── single.html
├── static
│   ├── css
│   │   └── style.css
│   └── js
└── theme.toml

9 directories, 17 files
%