Home Page

You can decorate your homepage within a fixed frame. I made some front-matters for you to make it easy.

At first, you should make _index.md file in the content root folder. (root/content/en/_index.md)

1
2
3
4
5
6
7
---
title: Z Themes
description: Hugo zzo, zdoc theme documentation home page
date: 2020-01-26T04:15:05+09:00
draft: false
...
---

1. Landing Page

zdoc landing page — **Zdoc Landing Page**: Landing Page look and feel

You can set landing page Front-Matters like this. BackgroundImage Front-Matter is currently in development. Edit some Front-Matters by your self and find something useful on your own.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
...
landing:
  height: 500
  image: favicon/android-icon-192x192.png
  title:
    - Z Themes
  text:
    - This is Hugo Z Themes documentation site
  titleColor:
  textColor:
  spaceBetweenTitleText: 25
  buttons:
    - link: zzo
      text: HUGO THEME ZZO
      color: primary
    - link: zdoc
      text: HUGO THEME ZDOC
      color: default
  # backgroundImage: 
  #   src: images/landscape.jpg
  #   height: 600
...
---

zdoc banner component — **Zdoc Banner**: Banner component look and feel

1
2
3
4
5
---
...
updatesBanner: "Banner - &nbsp; [Hugo ZDoc theme](https://github.com/zzossig/hugo-theme-zdoc) &nbsp; just arrived"
...
---

3. Home Sections

zdoc home section — **Zdoc Home section1**: Home section look and feel

You can add as many sections as you want. There are two types in home section.

card
normal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
---
...
sections:
  - bgcolor: teal
    type: card
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id eleifend erat. Integer eget mattis augue. Suspendisse semper laoreet tortor sed convallis. Nulla ac euismod lorem"
    header: 
      title: Why Zdoc
      hlcolor: "#8bc34a"
      color: '#fff'
      fontSize: 32
      width: 220
    cards:
      - subtitle: Performance
        subtitlePosition: center
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id eleifend erat. Integer eget mattis augue."
        image: images/section/keyboard.png
        color: white
        button: 
          name: Naver
          link: https://naver.com
          size: large
          target: _blank
          color: 'white'
          bgcolor: '#283593'
      - subtitle: Reliability
        subtitlePosition: center
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id eleifend erat. Integer eget mattis augue. Suspendisse semper laoreet tortor sed convallis. Nulla ac euismod lorem"
        image: images/section/processor.png
        color: white
        button: 
          name: Google
          link: https://google.com
          size: large
          target: _blank
          color: 'white'
          bgcolor: '#283593'
      - subtitle: Productivity
        subtitlePosition: center
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id eleifend erat. Integer eget mattis augue. Suspendisse semper laoreet tortor sed convallis. Nulla ac euismod lorem"
        image: images/section/root-server.png
        color: white
        button: 
          name: Yahoo
          link: https://yahoo.com
          size: large
          target: _blank
          color: 'white'
          bgcolor: '#283593'
  - bgcolor: DarkSlateBlue
    type: normal
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id eleifend erat. Integer eget mattis augue. Suspendisse semper laoreet tortor sed convallis. Nulla ac euismod lorem"
    header:
      title: Build it with Zdoc
      hlcolor: DarkKhaki
      color: "#fff"
      fontSize: 32
      width: 340
    body:
      subtitle: Extensible and customizable.
      subtitlePosition: left
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id eleifend erat. Integer eget mattis augue. Suspendisse semper laoreet tortor sed convallis. Nulla ac euismod lorem"
      color: white
      image: images/section/root-server.png
      imagePosition: left
...
---

zdoc home footer — **Zdoc Home Footer**: Home footer look and feel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
---
...
footer:
  sections:
    - title: General
      links:
        - title: Docs
          link: https://gohugo.io/
        - title: Learn
          link: https://gohugo.io/
        - title: Showcase
          link: https://gohugo.io/
        - title: Blog
          link: https://gohugo.io/
    - title: resources
      links:
        - title: GitHub
          link: https://gohugo.io/
        - title: Releases
          link: https://gohugo.io/
        - title: Spectrum
          link: https://gohugo.io/
        - title: Telemetry
          link: https://gohugo.io/
    - title: Features
      links:
        - title: GitHub
          link: https://gohugo.io/
        - title: Releases
          link: https://gohugo.io/
        - title: Spectrum
          link: https://gohugo.io/
        - title: Telemetry
          link: https://gohugo.io/
  contents: 
    align: left
    applySinglePageCss: false
    markdown:
      |
      ## Zzo docs
      Copyright © 2020. All rights reserved.
...
---

Home Page

Home Page

1. Landing Page

2. Banner Component

3. Home Sections

4. Home Footer

What's on this Page