Hugo - Working with Data - Using Site Configuration Data(TOML), Local Data Files(JSON), theme, HTML, CSS

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 4(Working with Data)、Your Turn 2、３.の解答を求めてみる。

portfolio/config.toml

baseURL = "http://example.org/"
languageCode = "ja-jp"
title = "Kamimura's Site"
theme = "basic"

[params]
	author = "kamimura"
	keywords = "Hugo,Go"

portfolio/data/socialmedia.jsonl

{
"accounts": [
	{
		"name": "Twitter",
		"url": "https://twitter.com/mkamimura"
	},
	{
		"name": "Twitter",
		"url": "https://twitter.com/mkamimura"
	}
]
}

portfolio/themes/basic/static/css/stylesheet.css

.container {
    width: 80%;
}
nav, footer {
    display: flex;
    flex-direction: column;
    text-align: center;
}
nav > a {
    flex: 1;
}
.socialmedia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: column;
}
@media screen and (min-width: 768px) {
    nav {flex-direction: row; }
    .socialmedia {
        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;}
}

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

<footer>
<section class="socialmedia">
	{{ range .Site.Data.socialmedia.accounts }}
	<section><a href="{{ .url }}">{{ .name }}</a></section>
	{{ end }}
</section>
<small>Copyright {{now.Format "2006"}} {{.Site.Params.author}}.</small>
</footer>