開発環境
- 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
%
0 コメント:
コメントを投稿