kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

talks page added, social icons wrap

This commit is contained in:
zzossig 2019-12-31 11:26:57 +09:00
parent 27e34ceb99
commit 747808300c
17 changed files with 284 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
README.ko.md
View File

@ -233,6 +233,7 @@ summaryShape = "classic" # card, classic, compact
archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
archivePaginate = 13 # items per page
paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
talksGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
# whoami: usage - home page sidebar, single page bottom of post. all values can be empty
myname = "zzossig"
@ -491,6 +492,61 @@ This is contact page.
weight = 6
```
## Talks Page
Talks 페이지는 아카이브 페이지와 유사한 UI의 페이지입니다. 비디오, 피티 등등의 링크를 모아서 보여주는 용도로 씁니다. Talks 페이지를 추가하려면 아래의 순서대로 따라해주세요.
1. 파일을 root/content/talks/_index.md. 경로에 다음과 같이 만듭니다.
```yaml
---
title: "Talks"
date: 2019-12-30T11:14:14+09:00
description: Talks Page
---
```
2. 또 다른 파일을 만들어 줍니다. 이곳에 링크 값을 넣을 겁니다.
root/content/talks/myLinks.md
```yaml
---
title: "My Awesome links"
date: 2019-12-31T00:04:50+09:00
description:
tags:
-
series:
-
categories:
-
links:
- link: "https://google.com"
title: "Video Link Title"
type: "video"
- link: "https://naver.com"
title: "PPT Link Title"
type: "ppt"
- link: "https://yahoo.com"
title: "Event Link Title"
type: "event"
---
3. 마지막으로 메뉴만 다음 과 같이 만들어 주면 됩니다.
root/config/_default/menus.en.toml file
```toml
[[main]]
identifier = "talks"
name = "talks"
url = "talks"
weight = 6
```
And we are good to go.
## Multi Language
Zzo theme의 기본 언어는 영어입니다. 한국어로 바꾸시려면 다음과 같이 해주세요.

54
README.md
View File

@ -18,6 +18,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
* [Layout](#layout)
* [Gallery](#gallery)
* [Contact Page](#contact-page)
* [Talks Page](#talks-page)
* [Multi Language](#multi-language)
* [Customizing](#customizing)
* [External libraries](#external-library)
@ -38,6 +39,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
* Search with Fuse
* Gallery with Masonry, Photoswipe
* Fast code highlighting
* Talks page for external links
## Minimum Hugo version
@ -225,6 +227,7 @@ summaryShape = "classic" # card, classic, compact
archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
archivePaginate = 13 # items per page
paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
talksGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
# whoami: usage - home page sidebar, single page bottom of post. all values can be empty
myname = "zzossig"
@ -483,6 +486,57 @@ This is contact page.
weight = 6
```
## Talks Page
Talks page is a listing page of links(video, ppt, event, ...). UI is similar to the archive page. Follow the below steps to make it.
1. Make a file at root/content/talks/_index.md.
```yaml
---
title: "Talks"
date: 2019-12-30T11:14:14+09:00
description: Talks Page
---
```
2. Next, make some files under the `talks` folder you have created in step 1.(root/content/talks/myLinks.md). If you want to make other links block, then make another file under the `talks` folder.
```yaml
---
title: "My Awesome links"
date: 2019-12-31T00:04:50+09:00
description:
tags:
-
series:
-
categories:
-
links:
- link: "https://google.com"
title: "Video Link Title"
type: "video"
- link: "https://naver.com"
title: "PPT Link Title"
type: "ppt"
- link: "https://yahoo.com"
title: "Event Link Title"
type: "event"
---
3. Finally, make a menu at your root/config/_default/menus.en.toml file
```toml
[[main]]
identifier = "talks"
name = "talks"
url = "talks"
weight = 6
```
And we are good to go.
## Multi Language
The default language of this theme is English. If you want to use another language, follow these steps

6
archetypes/about.md
View File

@ -3,10 +3,4 @@ title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description:
type: about
tags:
-
series:
-
categories:
-
---

8
archetypes/archive.md
View File

@ -1,12 +1,6 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description:
type: archive
tags:
-
series:
-
categories:
-
description:
---

15
archetypes/talk.md Normal file
View File

@ -0,0 +1,15 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description:
tags:
-
series:
-
categories:
-
links:
- link: ""
title: ""
type: ""
---

2
assets/sass/abstracts/_mixins.scss
View File

@ -101,10 +101,10 @@
}
@mixin truncate($truncation-boundary) {
max-width: $truncation-boundary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: $truncation-boundary;
}
@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {

9
assets/sass/components/_bio.scss
View File

@ -65,15 +65,16 @@
margin-top: 0.5rem;
@include flexbox();
a {
@include flex-wrap(wrap);
a {
text-decoration: none !important;
width: 100%;
padding: 0.5rem;
border-radius: 0.125rem;
@include flexbox();
@include flexbox();
@include flex-grow(1);
@include align-items(center);
@include justify-content(space-around);
@include justify-content(flex-start);
@include themify($themes) {
color: themed('social-icon-color');
@include on-event {

3
assets/sass/main.scss
View File

@ -75,4 +75,5 @@ $content-font: {{ .Site.Data.font.content_font }};
@import 'pages/list';
@import 'pages/single';
@import 'pages/terms';
@import 'pages/contact';
@import 'pages/contact';
@import 'pages/talk';

2
assets/sass/pages/_archive.scss
View File

@ -88,6 +88,7 @@
font-size: 0.8rem;
width: 50%;
height: 20px;
line-height: 20px;
text-align: center;
@include truncate(50px);
@ -107,6 +108,7 @@
font-size: 0.8rem;
width: 50%;
height: 20px;
line-height: 20px;
text-align: center;
@include truncate(50px);

84
assets/sass/pages/_talk.scss Normal file
View File

@ -0,0 +1,84 @@
.talk {
&__li {
margin: 0.75rem 0 0.75rem 4rem;
z-index: 0;
@include transition(margin-left, 0.1s, ease);
@include flexbox();
@include align-items(flex-start);
@media only screen and (max-width: 769px) {
margin-left: 0;
position: relative;
}
}
&__date {
border-radius: 0.25rem;
min-width: 100px;
max-width: 100px;
margin-top: 0.25rem;
font-size: 16px;
height: 26px;
line-height: 26px;
text-align: center;
@include animation('slide-in-left .2s .5s 1 ease both');
@include themify($themes) {
color: themed('archive-meta-color');
background-color: themed('archive-type-background-color');
}
}
&__type {
border-radius: 0.25rem;
min-width: 100px;
max-width: 100px;
margin-top: 0.25rem;
font-size: 14px;
height: 20px;
line-height: 20px;
text-align: center;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
color: themed('archive-type-color');
background-color: themed('archive-type-background-color');
}
}
&__title {
@include truncate($grid-max-width);
&--margin {
margin-right: 0.5rem;
margin-left: 0.75rem;
}
}
&__links {
@include flexbox();
@include flex-direction(column);
li {
padding-left: 0.5em;
margin: 0.25rem 0 0.25rem -3.75rem;
@include flexbox();
@include align-items(center);
@include truncate(650px);
@media only screen and (max-width: 769px) {
margin-left: -6.8rem;
@include truncate(350px);
}
}
&--item {
padding-left: 0.5rem;
margin: 0.25rem 0;
@include flexbox();
}
}
}

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

3
i18n/en.toml
View File

@ -19,6 +19,9 @@ other = "Series"
[archive-dateformat]
other = "Jan 2"
[talks-dateformat]
other = "Jan 2"
[single-dateformat]
other = "Jan 2, 2006"

3
i18n/ko.toml
View File

@ -19,6 +19,9 @@ other = "시리즈"
[archive-dateformat]
other = "01-02"
[talks-dateformat]
other = "01월 02일"
[single-dateformat]
other = "2006년 01월 02일"

3
i18n/zh.toml
View File

@ -19,6 +19,9 @@ other = "系列"
[archive-dateformat]
other = "01-02"
[talks-dateformat]
other = "01月02日"
[single-dateformat]
other = "2006年01月02日"

3
layouts/archive/list.html
View File

@ -10,7 +10,8 @@
</span>
<main class="main archive">
<div class="archive__container">
{{ $paginator := .Paginate (.Site.RegularPages.GroupByDate (.Site.Params.archiveGroupByDate | default "2006")) .Site.Params.archivePaginate }}
{{ $pages := (where .Site.RegularPages "Section" "!=" "talks") }}
{{ $paginator := .Paginate ($pages.GroupByDate (.Site.Params.talksGroupByDate | default "2006")) .Site.Params.archivePaginate }}
{{ range ($paginator).PageGroups }}
<span class="archive__key">{{ .Key }}</span>

2
layouts/index.html
View File

@ -13,7 +13,7 @@
</article>
<div class="summary__container">
{{ $paginator := .Paginate (where (where (where .Site.RegularPages "Type" "!=" "contact") "Type" "!=" "archive") "Type" "!=" "about") }}
{{ $paginator := .Paginate (where (where (where (where .Site.RegularPages "Type" "!=" "talks") "Type" "!=" "contact") "Type" "!=" "archive") "Type" "!=" "about") }}
{{ range $paginator.Pages }}
{{ .Render "summary" }}
{{ end }}

51
layouts/talks/list.html Normal file
View File

@ -0,0 +1,51 @@
{{ define "main" }}
<header class="header">
<h3 class="h3 terms__title">
{{ .Title }}
</h3>
<div>
{{ .Content }}
</div>
</header>
</span>
<main class="main archive">
<div class="archive__container">
{{ $pages := (where .Site.RegularPages "Section" "talks") }}
{{ $paginator := .Paginate ($pages.GroupByDate (.Site.Params.archiveGroupByDate | default "2006")) .Site.Params.archivePaginate }}
{{ range ($paginator).PageGroups }}
<span class="archive__key">{{ .Key }}</span>
<ul class="archive__ul">
{{ range .Pages }}
<li class="talk__li">
<span class="talk__date">
{{ .Date.Format (i18n "talks-dateformat") }}
</span>
<ul>
<li>
<a href="{{ .Permalink }}" class="talk__title talk__title--margin">{{ .Title }}</a>
</li>
<li class="talk__links">
<ul>
{{ range .Params.links }}
<li class="talk__links--li">
<span class="talk__type">{{ .type | default "talks" }}</span>
<a href="{{ .link | safeURL }}" title="{{ .link }}" target="_blank" rel="noreferrer" class="talk__title talk__title--margin p2">{{ .title | default .link }}</a>
</li>
{{ end }}
</ul>
</li>
</ul>
</li>
{{ end }}
</ul>
{{ end }}
</div>
<div class="grow"></div>
{{ partial "pagination/pagination" . }}
<div class="hide">
{{ partial "search/site-search" . }}
</div>
{{ partial "script/archive-script" . }}
</main>
{{ end }}