+ {{ .Content }} +
+Test
+ + +``` + +#### Code block indented with four spaces + + + + + +Test
+ + + +#### Code block with Hugo's internal highlight shortcode +{{< highlight html >}} + + + + +Test
+ + +{{< /highlight >}} + +## List Types + +#### Ordered List + +1. First item +2. Second item +3. Third item + +#### Unordered List + +* List item +* Another item +* And another item + +#### Nested list + +* Fruit + * Apple + * Orange + * Banana +* Dairy + * Milk + * Cheese diff --git a/themes/gokarna/exampleSite/content/posts/theme-documentation-advanced.md b/themes/gokarna/exampleSite/content/posts/theme-documentation-advanced.md new file mode 100644 index 0000000..aac7af4 --- /dev/null +++ b/themes/gokarna/exampleSite/content/posts/theme-documentation-advanced.md @@ -0,0 +1,290 @@ +--- +weight: 15 +title: "Theme Documentation - Advanced" +date: 2020-05-06T21:29:01+08:00 +description: "Discover how to maximise Gokarna's potential" +tags: ["installation", "configuration", "markdown"] +type: post +showTableOfContents: true +--- + +Gokarna is an opinionated theme with a focus on minimalism and simplicity. + +## Content Types + +This theme supports two types of content types: `post` and `page`. To specify them, you need to add them in your markdown metadata. + +### Post + +This is the default blog post type which will be shown in your "Posts" section and who's tags will be indexed. Basically, a normal blog post. + +```markdown +--- +title: "Hello, world!" +date: 2021-01-01 +description: "A blog post" +image: "/path/to/image.png" +type: "post" +tags: ["blog"] +--- + +# Hello World! +This is my blog. +``` + +### Page + +We introduced this type to distinguish between blog posts and normal markdown pages. The reason to create this was to give the user complete freedom in creating their website. You can use this to create a portfolio of your projects or showcase your designs. The possibilites are endless and the choice is yours. + +```markdown +--- +title: "Hello, world!" +image: "/path/to/image.png" +type: "page" +--- + +# Projects +Keep an eye on this space for my upcoming projects +``` + +### Table of Contents + +To show `Table of Contents`, update your config by adding +```toml +[markup] + [markup.tableOfContents] + startLevel = 1 + endLevel = 3 + ordered = false +``` + +And then on each page add the attribute `showTableOfContents: true` **(Note: It is disabled by default)** + +```markdown +--- +title: "Hello, world!" +image: "/path/to/image.png" +type: "page" +showTableOfContents: true +--- +``` + +Detailed configuration can be found on [Hugo's official documentation](https://gohugo.io/getting-started/configuration-markup/#table-of-contents) + +## Weights + +The `weight` attribute can be added in the markdown metadata for `post` types. We have an option in our config.toml: `params.showPostsOnHomePage` which allows you to: + +1. Show popular posts on home page if the value is set to `popular`. It sorts the all the posts by it's weight attribute in ascending order. +2. Show recent posts on home page if the value is set to `recent` +3. Do not show anything if the variable is unset or an empty string. + +## Homepage + +### About description text + +In extension to the basic configuration with the `description` field, it's also possible to write the about section using markdown. +Create a file called `index-about.md` in the `content` directory and write your content there. + +> **Attention**: Don't use frontmatter in this file. It would also render it. + +```markdown +# Gokarna +Gokarna is a small temple town located in the Uttara Kannada district of Karnataka state in southern India. + +## Beaches +Something about beaches, **which is *very* important**. + +- every +- beach +- is beautiful +``` + +Having the above about section in place, results in the following homepage: + +![Markdown about description](/images/theme-documentation-advanced/homepage-markdown-about-description.png "Markdown about description") + + +## Icons +Gokarna supports popular social media icons (Github, Linkedin, Twitter, StackOverflow, Dribbble, etc.) out of the box. See full list of supported icons [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons). + +### Icons on homepage + +To display icons on the homepage, simply update the `socialIcons` config param with a list of name and url of each icon. The specified `name` should exactly match one of the names from [here](https://github.com/526avijitgupta/gokarna/tree/main/static/icons). +If you want to add more icons, you can download the svg directly from [here](https://simpleicons.org/) and place them in your local icons directory (`/static/icons/`) + +```toml + [params] + socialIcons = [ + {name = "twitter", url = "https://example.com"}, + {name = "linkedin", url = "https://example.com"}, + {name = "stackoverflow", url = "https://example.com"}, + ] +``` + +Preview: + +![Icons on homepage Preview](/images/theme-documentation-advanced/icons-homepage-preview.png "Icons on homepage Preview") + + +### Icons in header + +[Feather](https://feathericons.com) icons has a comprehensive list of icons which are more general purpose and not limited to social media. +Therefore, we use feather as an additional source of icons. Here is an example of how to add custom icons in the header using feather: + +```toml + [[menu.main]] + identifier = "github" + url = "https://github.com" + weight = 3 + # Using feather-icons + pre = "" +``` + +The same icon in this case could also be added without feather: + +```toml + [[menu.main]] + identifier = "github" + url = "https://www.buymeacoffee.com/" + weight = 3 + # Without using feather-icons + pre = "" +``` + + +## Custom Head and Footer HTML + +The goal of this feature is to give the user more control over the theme. It's functioning is very straightforward - "You can inject any HTML you want in the `` tag" . This may seem simple at first, but it opens up a lot of possibilities. + +### Bring your own scripts + +Add your own JavaScript or CSS by putting them in the `static/` folder and importing them into your HTML. + +```toml +[params] + customHeadHTML = ''' + + + ''' + customFooterHTML = ''' ++ {{ .Content }} +
++ {{ dateFormat "January 2, 2006" .Date }}{{ if lt .Date .Lastmod }} | Updated {{ dateFormat "January 2, 2006" .Lastmod }}{{ end }} +
+ + ++ {{ .Content }} +
+ {{ if .Site.DisqusShortname }} ++ + ← + {{ i18n "previous" }}: + {{ .Title }} + +
++ {{ dateFormat "January 2, 2006" .Date }} +
+