Prastoot
Making presentations using hugo
About
Installation
Inside the folder of your Hugo site run:
cd themes
git clone https://github.com/darshanbaral/prastoot.git
For more information read the official setup guide of Hugo.
Getting started
After installing the prastoot theme successfully, copy the contents of the exampleSite to the root folder of your hugo site and then modify the config.toml as necessary.
Presentation Slides
Title Slide
Provide the information of title slide in the config.toml.
[params]
date = "2021-03-18"
author = "Darshan Baral"
[params.titleSlide]
title = "**Prastoot**"
subtitle = "Making presentations using `hugo`"
next = "S01_about"
The filename of the first slide after the title slide is specified in the next field without the extension .md.
Additional Slides
Create a separate markdown file for each slide. Relevant slide information should be included in the frontmatter. The frontmatter of all slides except the last one should have the filename (without the extension .md) of the follwing slide in next field.
title = "Image Template"
template = "image"
image = "images/apple.jpg"
caption = "Granny Smith Apple"
next = "iframeExample"
Slide Templates
Available Templates
content: for generic content - accepts markdown.code: for standalone code snippets - accepts markdown.image: for images.srcfield is required in the frontmatter and thecaptionfield is optional.iframe: for embedding webpages or youtube videos.srcfield is required in the frontmatter.table: for single tables.captionfield in the frontmatter is optional.
template should be specified in the frontmatter of the markdown file.
Combining Templates
Up to two templates can be combined. If only one template is used, the whole width is taken up by it. If two templates are used, then each will take half the width.
For example, template = "content-code" will render generic content on the left side and code snippets on the right side. This slide used template = "content-content".
To render combinations of two codes, two genereic contents, or a generic content and a code, use separator ||| (three vertical bars) in the markdown file to separate the contents.
Code Example
const hideMenu = () => {
const icon = document.querySelector(".hamburger-cross").children[0];
icon.classList.add("bi-list");
icon.classList.remove("bi-x");
const menu = document.querySelector(".menu-container");
menu.style.display = "none";
document.body.style.overflowY = "auto";
};
Image Template
Granny Smith Apple
iframe Content
Never gonna
- give you up
- let you down
Code Content
{{ define "main" }}
<div class="row no-gutters">
<div class="col-sm-4 order-sm-2">
{{ partial "profilePhoto" . }}
{{ partial "aboutDesc" . }}
<hr style="width:50%;" />
{{ partial "language.html" . }}
<hr style="width:50%;" />
{{ partial "hobby.html" . }}
</div>
<div class="col-sm-8 text-white p-2">
{{ partial "experience.html" . }}
{{ partial "education.html" . }}
{{ partial "project.html" . }}
{{ partial "skill.html" . }}
</div>
</div>
{{ end }}
Lorem Ipsum
What is this life if full of care?
Table
| SN | Data | Age | Time | Calorie |
|---|---|---|---|---|
| 1 | 34 | 34 | 2:00 | Great |
| 2 | 24 | 54 | 3:00 | Great |
| 1 | 34 | 34 | 2:00 | Great |
| 2 | 24 | 54 | 3:00 | Great |
| 1 | 34 | 34 | 2:00 | Great |
| 2 | 24 | 54 | 3:00 | Great |
| 2 | 24 | 54 | 3:00 | Great |
| 2 | 24 | 54 | 3:00 | Great |
source: made up
x = 2
y = 3
print(x + y)