If you set the mode to one-by-one, the list.html page will use images front-matter variable you set above. If you set the mode to at-once, list.html page will not use front-matter images variable and just read all files under the static/gallery/anygalleryname folder.
如果将模式设置为逐个，则列表.html页面将使用您在上面设置的images front matter变量。如果你马上把模式设为，列表.htmlpage不会使用front matter images变量，只读取static/gallery/anygalleryname文件夹下的所有文件。
Make a gallery folder under the content folder在“内容”文件夹下创建库文件夹
1
2
3
root
├── content
│ ├── gallery
Make a sub folder under the gallery folder在gallery文件夹下创建子文件夹
Currently available service: [formspree]. Open an issue if you need another service vendor. If you want just a blank page and use a markdown, set the service param empty.
当前可用服务：[formspree]。如果需要其他服务供应商，请打开问题。如果只需要一个空白页并使用降价，请将service param设置为空。
Make a file at root/content/contact/index.md
1
2
3
4
5
6
7
8
9
10
---title:"Contact"date:2019-12-17T23:58:33+09:00description:Contact pagetype:contactservice:formspreeformId:"your@email.com"---This is contact page.
Add contact menu at root/config/_default/menus.en.toml.
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.
会谈页面是一个链接（视频，ppt，事件，…）的列表页面。用户界面类似于归档页面。请按照以下步骤进行操作。
Next, make some files under the talks folder you have created in step 1. If you want to make other link post, then make another file under the talks folder.
接下来，在步骤1中创建的“talks”文件夹下创建一些文件。如果你想发布其他链接，那么在“talks”文件夹下创建另一个文件。
Additionally, if you want to use a future date for the talks page, you need more things to do.
另外，如果你想在会谈页面使用一个未来的日期，你需要做更多的事情。
add config variable named buildFuture at root/config/_default/config.toml
1
2
3
...buildFuture=true...
add publishDate front matter to your md file at root/content/talks/myLinks.md
1
2
3
4
5
6
7
---title:date:publishDate:2020-02-20...---...
Showcase Page
Showcase page is a listing page of project showcase. Follow the below steps to make it.
Showcase页面是project Showcase的列表页面。请按照以下步骤进行操作。
Make a file at root/content/showcase/_index.md.
1
2
3
4
5
6
---title:"Showcase overview"# For SEOdate:2020-01-19T15:43:38+09:00description:My portfolio, repos, works overview page# For SEOenableBio:true# Set to false if you want to hide the bio component.如果要隐藏bio组件，请设置为false。---
Make a category folder and a file at root/content/showcase/hugo/_index.md. (In my case, hugo is a category)
1
2
3
4
5
6
7
---title:"Hugo"# category namedate:2020-01-19T21:04:11+09:00description:Hugo theme collection# For SEOcategory:theme# meta info appeared on a card bottom side. category in category元信息出现在卡片底部。类别中的类别enableBio:true---
Make a file per project.
root/content/showcase/hugo/my-awesome-project.md.
1
2
3
4
5
6
7
8
9
10
---title:"My Awesome Project"# apperared on a card componentdate:2020-01-19T21:13:42+09:00description:Hello world! This is my awesome project!# apperared on a card componentweight:1# card orderinglink:https://github.com/zzossig/hugo-theme-zzorepo:https://github.com/zzossig/hugo-theme-zzopinned:true# appreared on a overview page.thumb:feature3/css3.png# relative path in static/images---
Finally, make a menu at your root/config/_default/menus.en.toml file
It’s a better idea not to modify the Zzo theme’s folder if you want future support and upgrade. (You can modify if it doesn’t matter) If you want more customizing options, open a new issue.
如果你想要将来的支持和升级，最好不要修改Zzo主题的文件夹。（如果不重要，可以修改）如果需要更多自定义选项，请打开新问题。
custom css
Add this line of code to your params.toml file.
将这行代码添加到参数toml文件。
Add your file to assets folder. Filename must match with config params you set above.
将文件添加到“资源”文件夹。文件名必须与上面设置的配置参数匹配。
1
2
assets/scss/custom.scss
assets/css/custom.css
If you want to modify the Zzo theme’s default color, you should override the theme style. For example, if you’re going to change the body background-color because I set the background-color in #body selector, not in the body tag selector, you should override body background-color there. Body tag selector won’t work. And make sure to set !important. After setting the values, restart Hugo.
如果要修改Zzo主题的默认颜色，则应覆盖主题样式。例如，如果您要更改车身背景色，因为我是在“车身选择器”中设置背景色的，而不是在“车身标记选择器”中设置的，则应该在此处覆盖车身背景色。正文标记选择器不起作用。一定要准备好！很重要。设置好这些值后，重新启动Hugo。
Add your file to assets folder. Filename must match with config params you set above.
将文件添加到“资源”文件夹。文件名必须与上面设置的配置参数匹配。
1
assets/js/custom.js
custom syntax highlighting
Make a skin.toml file at root/data folder. Set the theme_dark_chroma, theme_light_chroma, … params value as you want. Refer this link. If theme_[xxxx]_chroma value include - or _ like special character, just delete it.
For example, if you want use solarized-dark256 style, set the param like this.
Add a custom style file if you want to change specific colors. [custom-css]
Then, override chroma class. You can find this class at themes/zzo/assets/sass/syntax folder.
Example code is like this.
---header:- type:typewritermethods:- typeString:Hello world!- pauseFor:2500- deleteAll:true- typeString:Strings can be removed- pauseFor:2500- deleteChars:7- typeString:<strong>altered!</strong>- pauseFor:2500options:loop:trueautoStart:falseheight:190paddingX:50align:centerfontSize:44fontColor:yellow- type:textheight:200paddingX:50paddingY:0align:centertitle:- HUGOsubtitle:- The world’s fastest framework for building websitestitleColor:# #123456, redtitleShadow:falsetitleFontSize:44subtitleColor:# #123456, redsubtitleCursive:falsesubtitleFontSize:16spaceBetweenTitleSubtitle:20- type:imgimageSrc: images/header/background.jpg # your image file path:root/static/images/header/background.jpgimageSize:cover# auto|length|cover|contain|initial|inheritimageRepeat:no-repeat# repeat|repeat-x|repeat-y|no-repeat|initial|inheritimagePosition:center# x% y%| xpos ypos| left top| center bottom| ...height:235paddingX:50paddingY:0align:centertitle:-subtitle:-titleColor:titleShadow:falsetitleFontSize:44subtitleColor:subtitleCursive:falsesubtitleFontSize:16spaceBetweenTitleSubtitle:20- type:slideheight:235options:startSlide:0auto:5000# auto slide delay 5000ms(5sec)draggable:true# slide draggableautoRestart:true# restart after drag finishedcontinuous:true# last to firstdisableScroll:truestopPropagation:trueslide:- paddingX:50paddingY:0align:leftimageSrc:images/header/background.jpgimageSize:coverimageRepeat:no-repeatimagePosition:centertitle:- header title1subtitle:- header subtitle1titleFontSize:44subtitleFontSize:16spaceBetweenTitleSubtitle:20- paddingX:50paddingY:0align:centerimageSrc:images/header/background.jpgimageSize:coverimageRepeat:no-repeatimagePosition:centertitle:- header title2subtitle:- header subtitle2titleFontSize:44subtitleFontSize:16spaceBetweenTitleSubtitle:20- paddingX:50paddingY:0align:rightimageSrc:images/header/background.jpgimageSize:coverimageRepeat:no-repeatimagePosition:centertitle:- header title3subtitle:- header subtitle3titleFontSize:44subtitleFontSize:16spaceBetweenTitleSubtitle:20---
Edit params as you wish.
custom grid
Make a grid.toml file in data folder. (data/grid.toml)
Copy the contents of themes/zzo/data/grid.toml file and paste it into the grid.toml file you created above.
Change the grid as you want.
Once you change the grid.toml file, restart hugo.
1
2
3
4
5
6
7
8
9
10
11
12
data/grid.tomlexamplegrid_max_width="960"grid_max_unit="px"# "px", "\"%\"" Using% is limited to using full width.grid_main_main_width="5"grid_main_main_unit="fr"# "fr", "px"grid_main_side_width="2"grid_main_side_unit="fr"# "fr", "px"grid_column_gap_width="32"grid_column_gap_unit="px"# "px"grid_navbar_height="50px"# "px"grid_row_gap="0"
If you want to add a link to the footer copyright, not just a text, you can customize it.
In your config.toml file, set the copyright param like this.
1
2
3
...copyright=Thisismy{}copyrighttext...
The {} part will be your copyright link.
2. In your params.toml file, set the copyrightOptions params
1
2
3
4
5
6
...[copyrightOptions]enableCopyrightLink=falsecopyrightLink="https://..."copyrightLinkImage="https://..."copyrightLinkText="copyright link text"
custom favicon
Override the default favicon by adding your favicon at root/static folder
Author
We have some front matters for specifying the author.
1
2
3
4
5
6
7
8
9
10
11
12
13
---title:...author:# author nameauthorEmoji:🤖# emoji for subtitle, summary meta dataauthorImage:"/images/whoami/avatar.jpg"# image path in the static folderauthorImageUrl:""# your image url. We use `authorImageUrl` first. If not set, we use `authorImage`.authorDesc:# author descriptionsocialOptions:# override params.toml file socialOptionsemail:""facebook:""...---
Favicon
Put your favicon.ico file under the static folder. The filename should be favicon and the extension should be ico.
If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram. Just add some variable to a front-matter.
tab / tabs => Tabs make it easy to explore and switch between different views
⚠️Becareful that the content in the tab should be different from each other.
The tab makes unique id hashes depending on the tab contents.
So, If you just copy-paste the tabs with multiple times, since it has the same contents, the tab will not work.
