This commit is contained in:
Simon Gardling
2023-10-11 17:38:05 -04:00
commit 032679b34a
242 changed files with 9311 additions and 0 deletions

View File

@@ -0,0 +1,133 @@
# Created by https://www.toptal.com/developers/gitignore/api/node
# Edit at https://www.toptal.com/developers/gitignore?templates=node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
.env*.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# End of https://www.toptal.com/developers/gitignore/api/node
# Created by https://www.toptal.com/developers/gitignore/api/hugo
# Edit at https://www.toptal.com/developers/gitignore?templates=hugo
### Hugo ###
# Generated files by hugo
/public/
# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux
# End of https://www.toptal.com/developers/gitignore/api/hugo

View File

@@ -0,0 +1,16 @@
baseURL = "https://example.com"
languageCode = "en"
title = "Monochrome"
theme = "hugo-theme-monochrome"
defaultContentLanguage = "en"
enableEmoji = true
paginate = 5
enableGitInfo = true
[taxonomies]
category = "categories"
tag = "tags"
series = "series"
[outputs]
home = ["HTML", "RSS", "JSON"]

View File

@@ -0,0 +1,11 @@
[en]
contentDir = "content/en"
languageName = "English"
languageCode = "en"
weight = 1
[zh-tw]
contentDir = "content/zh-tw"
languageName = "正體中文"
languageCode = "zh-tw"
weight = 2

View File

@@ -0,0 +1,16 @@
[goldmark.renderer]
unsafe= true
[highlight]
anchorLineNos = false
codeFences = false
guessSyntax = false
hl_Lines = ""
lineAnchors = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noHl = false
noClasses = true
style = "monokai"
tabWidth = 4

View File

@@ -0,0 +1,150 @@
[[navbar]]
identifier = "setup"
name = "Setup"
url = "/setup/"
weight = 1
[[navbar]]
identifier = "changelog"
name = "Changelog"
url = "/changelog/"
weight = 2
[[navbar]]
identifier = "configuration"
name = "Configuration"
url = "/configuration/"
weight = 3
[[navbar]]
identifier = "site_settings"
name = "Site Settings"
url = "/configuration/site"
parent = "configuration"
weight = 1
[[navbar]]
identifier = "theme_settings"
name = "Theme Settings"
url = "/configuration/theme"
parent = "configuration"
weight = 2
[[navbar]]
identifier = "page_settings"
name = "Page Settings"
url = "/configuration/page"
parent = "configuration"
weight = 3
[[navbar]]
identifier = "layouts"
name = "Layouts"
url = "/layouts/"
weight = 4
[[navbar]]
identifier = "balloon"
name = "Balloon"
url = "/layouts/balloon"
parent = "layouts"
[[navbar]]
identifier = "balloon_demo"
name = "Demo"
url = "/layouts/balloon/demo"
parent = "balloon"
weight = 1
[[navbar]]
identifier = "balloon_docs"
name = "Document"
url = "/layouts/balloon/docs"
parent = "balloon"
weight = 2
[[navbar]]
identifier = "bookcase"
name = "Bookcase"
url = "/layouts/bookcase"
parent = "layouts"
[[navbar]]
identifier = "bookcase_demo"
name = "Demo"
url = "/layouts/bookcase/demo"
parent = "bookcase"
weight = 1
[[navbar]]
identifier = "bookcase_docs"
name = "Document"
url = "/layouts/bookcase/docs"
parent = "bookcase"
weight = 2
[[navbar]]
identifier = "gallery"
name = "Gallery"
url = "/layouts/gallery"
parent = "layouts"
[[navbar]]
identifier = "gallery_demo"
name = "Demo"
url = "/layouts/gallery/demo"
parent = "gallery"
weight = 1
[[navbar]]
identifier = "gallery_docs"
name = "Document"
url = "/layouts/gallery/docs"
parent = "gallery"
weight = 2
[[navbar]]
identifier = "list"
name = "List"
url = "/layouts/list"
parent = "layouts"
[[navbar]]
identifier = "list_demo"
name = "Demo"
url = "/layouts/list/demo"
parent = "list"
weight = 1
[[navbar]]
identifier = "list_docs"
name = "Document"
url = "/layouts/list/docs"
parent = "list"
weight = 2
[[navbar]]
identifier = "postcard"
name = "Postcard"
url = "/layouts/postcard"
parent = "layouts"
[[navbar]]
identifier = "postcard_demo"
name = "Demo"
url = "/layouts/postcard/demo"
parent = "postcard"
weight = 1
[[navbar]]
identifier = "postcard_docs"
name = "Document"
url = "/layouts/postcard/docs"
parent = "postcard"
weight = 2
[[navbar]]
identifier = "blank"
name = "Blank"
url = "/layouts/blank"
parent = "layouts"
[[navbar]]
identifier = "blank_demo"
name = "Demo"
url = "/layouts/blank/demo"
parent = "blank"
weight = 1
[[navbar]]
identifier = "blank_docs"
name = "Document"
url = "/layouts/blank/docs"
parent = "blank"
weight = 2
[[navbar]]
identifier = "shortcodes"
name = "Shortcodes"
url = "/shortcodes/"
weight = 5
[[navbar]]
identifier = "posts"
name = "Posts"
url = "/posts/"
weight = 6

View File

@@ -0,0 +1,8 @@
[[navbar]]
identifier = "posts"
name = "文章"
url = "/zh-tw/posts/"
weight = 1

View File

@@ -0,0 +1,33 @@
navbar_title = 'Monochrome'
footer = "Copyright © 2021-2023 by kaiiiz"
author = "kaiiiz"
color_scheme = "light"
enable_zooming_js = true
enable_toc = true
enable_site_search = true
enable_math = false
# SEO
enable_open_graph = true
enable_twitter_cards = true
# Collapsible Menu
enable_collapsible_toc = false
enable_collapsible_changelogs = true
[list_layout]
enable_group_by_year = true
enable_show_date = true
enable_pagination = false
# syntax highlight settings
[syntax_highlight]
lib = "prism.js" # "builtin" | "prism.js"
[syntax_highlight.builtin]
enable_code_copy = true
[syntax_highlight.prism]
enable_code_copy = true
enable_line_no = false

View File

@@ -0,0 +1,20 @@
---
type: 'balloon'
balloon_img_src: "icons/vase.svg"
balloon_img_src_dark: "icons/vase_dark.svg"
balloon_circle: false
balloon_resources: "/about"
description: "Demo site of hugo-theme-monochrome"
zooming_js: false
keywords:
- hugo
- hugo theme
- hugo theme monochrome
- clean
- responsive
- programmer-friendly
---
{{< icon vendor="feather" name="github" link="https://github.com/kaiiiz/hugo-theme-monochrome" >}}
This is the demo of hugo-theme-monochrome.

View File

@@ -0,0 +1,19 @@
---
title: 'Acknowledgement'
weight: 1000
gallery_img_src: 'thanks.jpg'
gallery_img_caption: '<span>Photo by <a href="https://unsplash.com/@swimstaralex?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alexander Sinn</a> on <a href="https://unsplash.com/s/photos/thanks?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>'
gallery_statistic:
- key: '**key1**'
value: '*value1*'
- key: '**key2**'
value: '*value2*'
- key: '**key3**'
value: '*value3*'
---
* [PrismJS/prism](https://github.com/PrismJS/prism)
* [krisk/Fuse](https://github.com/krisk/Fuse)
* [mathjax/MathJax](https://github.com/mathjax/MathJax)
* [kingdido999/zooming](https://github.com/kingdido999/zooming)
* [feathericons/feather](https://github.com/feathericons/feather)

View File

@@ -0,0 +1,25 @@
---
title: 'Features'
weight: 1
gallery_img_src: 'pottery.jpg'
gallery_img_caption: '<span>Photo by <a href="https://unsplash.com/@mochiel?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Mercy</a> on <a href="https://unsplash.com/s/photos/vase?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>'
gallery_statistic:
- key: '**key1**'
value: '*value1*'
- key: '**key2**'
value: '*value2*'
- key: '**key3**'
value: '*value3*'
---
1. **Clean UI with small resources.** Monochrome has clean UI design with ~5KB gzipped bundled CSS.
2. **Self-Contained.** Monochrome doesn't require webpack, nodejs and other dependencies to setup or edit, just hugo.
3. **Responsive layout.** Adapt to different viewpoint, from desktop to mobile.
4. **Support light/dark mode.** Low-light UI.
5. **Multiple layouts built-in.** Monochrome now supports 6 different layouts. See [Demo](https://kaiiiz.github.io/hugo-theme-monochrome/layouts/).
6. **Nested navbar and Multilingual mode.** Make good use of hugo's well-designed structure.
7. **Syntax Highlighting (with copy feature).** Integrate both server-side solution (Chroma, hugo built-in) and client-side solution (Prism.js, for someone who need more languages supported).
8. **Site Search with real-time matches highlight.** Powered by Fuse.js.
9. **SEO-friendly.** Easily change your author, description, keywords, open graph, twitter card meatdata.
10. **Support mathematical notation.** Powered by MathJax.
11. **Useful shortcodes.** See [Document](https://kaiiiz.github.io/hugo-theme-monochrome/shortcodes/).

View File

@@ -0,0 +1,3 @@
---
headless: true
---

View File

@@ -0,0 +1,31 @@
---
title: 'Timeline'
weight: 2
gallery_img_src: 'clock.jpg'
gallery_img_caption: '<span>Photo by <a href="https://unsplash.com/@oceanng?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ocean Ng</a> on <a href="https://unsplash.com/s/photos/clock?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>'
gallery_statistic:
- key: '**key1**'
value: '*value1*'
- key: '**key2**'
value: '*value2*'
- key: '**key3**'
value: '*value3*'
---
* 2023/07/23 - v2.0.0 release
* 2022/04/02 - v1.0.1 release
* 2022/04/01 - v1.0.0 release
* 2022/02/25 - v0.9.2 release
* 2022/02/25 - v0.9.1 release
* 2022/01/31 - v0.9.0 release
* 2021/07/29 - v0.8.0 release
* 2021/07/08 - v0.7.1 release
* 2021/06/24 - v0.7.0 release
* 2021/04/15 - v0.6.2 release
* 2021/02/17 - v0.6.1 release
* 2021/02/16 - v0.6.0 release
* 2021/02/15 - v0.5.0 release
* 2021/02/12 - v0.4.0 release
* 2021/02/10 - v0.3.0 release
* 2021/02/09 - v0.2.0 release
* 2021/02/08 - v0.1.0 release

View File

@@ -0,0 +1,222 @@
---
title: 'Changelog'
toc: false
---
# Changelog
## v2.0.0 (2023/07/23)
- Fixed
- Fix navbar item padding ([#15](https://github.com/kaiiiz/hugo-theme-monochrome/issues/15))
- Fix TOC collapse cursor style ([#25](https://github.com/kaiiiz/hugo-theme-monochrome/issues/25), [#36](https://github.com/kaiiiz/hugo-theme-monochrome/pull/36))
- Fix site search resource retrieval bug ([#29](https://github.com/kaiiiz/hugo-theme-monochrome/issues/29))
- Fix wrong variable in base.scss ([#44](https://github.com/kaiiiz/hugo-theme-monochrome/pull/44))
- Fix inappropriate navbar decoration for item that links to home page
- Fix color scheme button FOUC bug
- Fix twitter card text color in dark mode
- Changed
- **BREAKING CHANGE** The minimum hugo version requirement is now `0.112.0`
- **BREAKING CHANGE** Support all feather icons, `vendor="feather"` is required to migrate from old shortcode ([#19](https://github.com/kaiiiz/hugo-theme-monochrome/issues/19))
- Images in an aritcle are centered by default ([#35](https://github.com/kaiiiz/hugo-theme-monochrome/issues/35))
- Term's layout now respects the `enable_group_by_year`, `enable_show_date`, `enable_pagination` parameters
- Upgrade dependencies
- Prism: v1.27.0 -> v1.29.0
- Fuse.js: v6.5.3 -> v6.6.2
- New
- Support custom CSS ([#23](https://github.com/kaiiiz/hugo-theme-monochrome/issues/23), [#33](https://github.com/kaiiiz/hugo-theme-monochrome/issues/33))
- Support GA4 ([#37](https://github.com/kaiiiz/hugo-theme-monochrome/issues/37))
- Support custom title for bookcase item ([#32](https://github.com/kaiiiz/hugo-theme-monochrome/issues/32))
- Support hiding bookcase items ([#27](https://github.com/kaiiiz/hugo-theme-monochrome/issues/27))
- Add default color scheme setting ([#40](https://github.com/kaiiiz/hugo-theme-monochrome/issues/40))
- Add `bookcase` shortcode ([#34](https://github.com/kaiiiz/hugo-theme-monochrome/issues/34))
- Add `recent-posts` shortcode
- Add an RSS button next to the title in the term's layout
---
## v1.0.1 (2022/04/02)
### Fixed
* Fix `img` style issue, it should be `max-width` instead of `width` ([#10](https://github.com/kaiiiz/hugo-theme-monochrome/issues/10#issuecomment-1086111789))
---
## v1.0.0 - First Major Release (2022/04/01)
### Added
* Layout
* New Layout: Postcard Layout, Blank Layout
* Support pagination for Postcard Layout and List Layout
* Enhance list layout date format. If current list layout is grouped by year, hide list item's year.
* Redesign default home page layout using Postcard Layout
* Add sidebar for better navbar responsiveness on small screen
* New Shortcode
* `emgithub`: directly embed github source code like gist with Prism.js syntax highlighting
* External Library
* Optimize Prism.js integration
* Add smooth transition to prevent line number jittering while page rendering
* Integrate Prism.js autoloader to prevent huge bundle file
* Optimize Zooming.js integration
* Background color is now dynamically changed based on current theme
* Fuse.js integration
* Support highlight matched text in search menu
* New Theme Parameters
* `list_layout.enable_group_by_year`
* `list_layout.enable_show_date`
* `list_layout.enable_pagination`
* `syntax_highlight.lib`
* `syntax_highlight.builtin.enable_code_copy`
* `syntax_highlight.prism.enable_code_copy`
* `syntax_highlight.prism.enable_line_no`
* New Page Parameters
* `search_hidden`: hide page from search index
* `pagination`: control pagination for List Layout
### Changed
* Change RSS content from full post to summary for smaller resource purpose
* Change all icons to feathericons
* Site search engine has been changed from flexsearch to fuse.js for better CJK language supports
* Parameter name has all been changed to snake_case for consistency
* Syntax highlight settings are now grouped by `syntax_highlight`
* `svg-wrapper` shortcode has been changed to `icon`
### Removed
* **All** javascript package dependencies are removed, Monochrome is now self-contained without the help of npm and become extremely easy to setup and modify.
* Remove `list_posts` property from list layout, this functionality has been replaced by Blank Layout
---
## v0.9.2 (2022/02/25)
* Fix: reimplement terms-cloud to prevent size overflow (max size: 1.6 rem)
---
## v0.9.1 (2022/02/25)
* Change: set terms-cloud max font size to 1.4 rem
* Fix: site search url from absLangURL to relLangURL
---
## v0.9.0 (2022/01/31)
* Improve: search implementation
* hide the mismatch objects instead of removing it while searching
* widen the control range of search result
* Improve: gallery layout's key and value now support markdown syntax
* Improve: Zooming.js configuration
* speed up animations
* setup transparent background
* Change: for consistency, the names of the following parameters are changed:
* page's `collapsibleTOC` => `collapsible_toc`
* page's `collapsibleChangelogs` => `collapsible_changelogs`
* Change: font-size of html is changed from `18px` to `16px`
* Add: `breadcrumbs` shortcode
* Add: list layout properties `group_by_year` and `show_date`
* Fix: terms-cloud typo ([#4](https://github.com/kaiiiz/hugo-theme-monochrome/pull/4))
---
## v0.8.0 (2021/07/29)
* Improve: flexsearch multilingual search capability
* Improve: widen the control range of navbar menu items
* Change: flexsearch can now search index pages
* Change: the post content in RSS is changed from summary to full text
* Add: collapsible TOC and Changelogs
---
## v0.7.1 (2021/07/08)
* Change: adjust the style of changelogs
* Fix: flexsearch search API issue
---
## v0.7.0 (2021/06/24)
* Bump dependencies version
* Add: `changelogs` property
* Add: support disqus for index page (turn off by default)
* Change: theme name from 'Graytr' to 'Monochrome'
* Change: improve navbar responsiveness
* Fix: widen the control range of navbar menu icon
---
## v0.6.2 (2021/04/15)
* Fix: google search console authentication failed if ga code not in `<head>`
* Fix: `clipboard-polyfill/text` dependency resolved issue
---
## v0.6.1 (2021/02/17)
* Fix: codepen shortcode id
* Change baseurl to example.com in exampleSite
---
## v0.6.0 (2021/02/16)
* Support MathJax
* Add shortcodes: `jsfiddle`, `codepen`, `color-block`, `icon-group`, `terms-cloud`
* Add option: `list_posts` in list layout
* Fix: not register touchend event
---
## v0.5.0 (2021/02/15)
* Support multilingual mode
* Add i18n
* Support Open Graph, Twitter Card
* Adjust svg-wrapper shortcode
* Add some social icons: `facebook`, `github`, `twitter`, `rss`, `mail`
* Support site search (powered by flexsearch)
* Disable unused features in tailwindcss (speedup building time)
* Reorganize parameters
* Remove default image to figure transformation, using built-in shortcode instead
---
## v0.4.0 (2021/02/12)
* Support dark mode
* Add `bookcase_cover_src_dark` for bookcase layout
* Add `balloon_img_src_dark` for balloon layout
* Add shortcode: svg-wrapper
* Prism.js integration (v1.23.0)
* Code copy feature for code block
---
## v0.3.0 (2021/02/10)
* Support nested navbar
* Implement default homepage layout
* Adjust the purpose of bookcase layout
* Remove catalog layout
---
## v0.2.0 (2021/02/09)
* A better responsive navbar
* Implement default taxonomy and term layout
* Adjust article styles
---
## v0.1.0 (2021/02/08)
Initial release.

View File

@@ -0,0 +1,8 @@
---
title: 'Configuration'
type: 'bookcase'
---
These documents show some customizable values that are used in this theme. By adjusting these values, you can easily change the behavior of your website without touching the source code.
You can refer to the example config in [github](https://github.com/kaiiiz/hugo-theme-monochrome/tree/main/exampleSite/config).

View File

@@ -0,0 +1,217 @@
---
title: 'Page Settings'
weight: 3
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
changelogs:
---
# Page Settings
These values are inside your page's front-matter.
## Layout
Monochrome support different types of layout. You can change the layout of section or regular page according to your needs. Checkout [Layout](/hugo-theme-monochrome/layouts) for more details.
## Navbar title
HTML is available.
```yaml
---
navbar_title: "Monochrome"
---
```
> default: theme's [`navbar_title`](/hugo-theme-monochrome/configuration/theme#navbar-title)
## Footer
HTML is available.
```yaml
---
footer: "Copyright © 2021 by kaiiiz"
---
```
> default: theme's [`footer`](/hugo-theme-monochrome/configuration/theme/#footer)
## Site Search
Hide the page from the search result.
```yaml
search_hidden: true
```
> default: false
## Table of Contents
```yaml
---
toc: false
---
```
> default: theme's [`enable_toc`](/hugo-theme-monochrome/configuration/theme/#table-of-contents)
### Collapsible Table of Contents
```yaml
---
collapsible_toc: false
---
```
> default: theme's [`enable_collapsible_toc`](/hugo-theme-monochrome/configuration/theme/#collapsible-menu)
## Changelogs
```yaml
---
changelogs:
- tag: '20210623'
description:
- 'changelog example 1'
- 'changelog example 2'
- tag: '20210624'
description:
- 'changelog example 3'
- 'changelog example 4'
---
```
tag and description both support markdown syntax.
> default: None
### Collapsible Changelogs
```yaml
---
collapsible_changelogs: false
---
```
> default: theme's [`enable_collapsible_changelogs`](/hugo-theme-monochrome/configuration/theme/#collapsible-menu)
## External library
### MathJax
```yaml
---
math: false
---
```
> default: theme's [`enable_math`](/hugo-theme-monochrome/configuration/theme/#mathjax)
### Zooming.js
```yaml
---
zooming_js: false
---
```
> default: theme's [`enable_zooming_js`](/hugo-theme-monochrome/configuration/theme/#zooming_js)
### Disqus
```yaml
---
disqus: false
---
```
> default for post page: site's [`disqusShortname`](/hugo-theme-monochrome/zh-tw/configuration/site/#disqus)
>
> default for other pages: false
### Google Analytics
```yaml
---
ga: false
---
```
> default: site's [`googleAnalytics`](/hugo-theme-monochrome/configuration/site/#google-analytics)
## Syntax Highlighting
### Chroma
```yaml
---
code_copy: false
---
```
> default: theme's [`enable_code_copy`](/hugo-theme-monochrome/configuration/theme/#using-chroma-hugo-built-in)
## SEO
### Author
```yaml
---
author: "kaiiiz"
---
```
> default: theme's [`author`](/hugo-theme-monochrome/configuration/theme/#author)
### Description
```yaml
---
description: "Configuration of hugo-theme-monochrome"
---
```
> default: not generate description `meta` tag
### Keywords
In page front-matter
```yaml
---
keywords:
- hugo
- hugo theme
- hugo theme monochrome
---
```
> default: not generate keywords `meta` tag
### Open Graph
A flag to render open graph internal template. See [Open Graph](https://gohugo.io/templates/internal#open-graph) for additional settings.
```yaml
---
open_graph: false
---
```
> default: theme's [`enable_open_graph`](/hugo-theme-monochrome/configuration/theme/#open-graph)
### Twitter Cards
A flag to render open twitter cards template. See [Twitter Cards](https://gohugo.io/templates/internal#twitter-cards) for additional settings.
```yaml
---
twitter_cards: false
---
```
> default: theme's [`enable_twitter_cards`](/hugo-theme-monochrome/configuration/theme/#twitter-cards)

View File

@@ -0,0 +1,54 @@
---
title: 'Site Settings'
weight: 1
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
---
# Site Configuration
These settings are important for building a website using hugo. See [All Configuration Settings](https://gohugo.io/getting-started/configuration/#all-configuration-settings) for more details.
## Site title
Site title. This value will become the content of `<title>` tag in html.
```toml
title = "Monochrome"
```
## Theme
Set this value to the corresponding folder name of your theme. (located by default in `/themes/THEMENAME/`)
```toml
theme = "hugo-theme-monochrome"
```
## Base URL
Hostname (and path) to the root.
```toml
baseURL = "https://kaiiiz.github.io/hugo-theme-monochrome"
```
## favicon
Add `favicon.ico` to your site's static folder.
## External library
### Disqus
```toml
disqusShortname = "xxx"
```
Other settings checkout [Disqus - Internal Templates](https://gohugo.io/templates/internal/#disqus) for more details.
### Google Analytics
```toml
googleAnalytics = "xxx"
```

View File

@@ -0,0 +1,239 @@
---
title: 'Theme Settings'
weight: 2
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
changelogs:
---
# Theme Configuration
These values are inside your toml config file.
## Navbar title
HTML is available.
```toml
[params]
navbar_title = "Monochrome" # default: site's `title`
```
## Footer
HTML is available.
```toml
[params]
footer = "Copyright © 2021 by kaiiiz" # default: None
```
## Table of Contents
TOC global settings.
```toml
[params]
enable_toc = true # default: true
```
## Collapsible Menu
Collapsible global settings.
```toml
[params]
enable_collapsible_toc = false # default: false
enable_collapsible_changelogs = false # default: false
```
## Navbar menu
Monochrome uses built-in menu system supported by hugo itself. (Checkout [document](https://gohugo.io/content-management/menus) for more deatil.) By default, the menu called `navbar` is used to decide which item need to be rendered on the navbar.
So you can simply add the following code to your page front-matter, and the menu info will be handled by hugo out of the box. ([simple method mentioned in document](https://gohugo.io/content-management/menus#simple))
```yaml
---
menu: navbar
---
```
Also, weighted value is supported out of the box, you can explicit assign the weight of the navbar entry, hugo will first sort the menu using weight, if there has two entries shared the same weight, the [default order](https://gohugo.io/templates/lists/#order-content) will be applied.
```yaml
---
menu:
navbar:
weight: -99
---
```
### Navbar settings in config
If you try to put entry that aren't attached to a piece of content, or you want to organize your navbar into a single file, checkout [Add Non-content Entries to a Menu](https://gohugo.io/content-management/menus#add-non-content-entries-to-a-menu) or [Configuration file of demo site](https://github.com/kaiiiz/hugo-theme-monochrome/tree/main/exampleSite/config/_default/menus) and set these values in your toml settings file.
toml example:
```toml
[[menu.navbar]]
identifier = "about"
name = "about"
title = "about"
url = "/about/"
weight = 100
[[menu.navbar]]
identifier = "series"
name = "series"
url = "/series/"
weight = -100
[[menu.navbar]]
identifier = "categories"
name = "categories"
url = "/categories/"
weight = 80
```
yaml example:
```yaml
menu:
navbar:
- identifier: about
name: about
title: about
url: /about/
weight: 100
- identifier: series
name: series
url: /series/
weight: -100
- identifier: categories
name: categories
url: /categories/
weight: 80
```
## List Layout
```toml
[params]
[params.list_layout]
enable_group_by_year = true # default: true
enable_show_date = true # default: true
enable_pagination = false # default: false
```
## External Library
### MathJax
Use `$` to create inline result, `$$` to create block result.
```toml
[params]
enable_math = true # default: false
```
### Zooming.js
Zooming.js global setting.
```toml
[params]
enable_zooming_js = false # default: true
```
### Site Search
Add the following settings to config.toml:
```toml
[outputs]
home = ["HTML", "RSS", "JSON"]
```
Enable site search
```toml
[params]
enable_site_search = true # default: false
```
## Syntax Highlighting
### Using Chroma (server-side)
See [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting) for more details.
```toml
[param]
[param.syntax_highlight]
lib = "builtin" # "builtin" | "prism.js" (default: "builtin")
[param.syntax_highlight.builtin]
enable_code_copy = true # default: true
```
### Using Prism.js (client-side)
Disable markup highlight feature
```toml
[markup.highlight]
codeFences = false
lineNos = false
```
Enable Prism.js
```toml
[param]
[params.syntax_highlight]
lib = "prism.js" # "builtin" | "prism.js" (default: "builtin")
[params.syntax_highlight.prism]
enable_code_copy = true # default: true
enable_line_no = true # default: true
```
## SEO
### Author
```toml
[params]
author = "kaiiiz" # default: no author `meta` tag
```
### Open Graph
A flag to render open graph internal template. See [Open Graph](https://gohugo.io/templates/internal#open-graph) for additional settings.
```toml
[params]
enable_open_graph = false # default: true
```
### Twitter Cards
A flag to render open twitter cards template. See [Twitter Cards](https://gohugo.io/templates/internal#twitter-cards) for additional settings.
```toml
[params]
enable_twitter_cards = false # default: true
```
## Custom CSS
You can override the default styles by creating a new `/static/user.css` file.
## Default Color Scheme
You can set the default color scheme for your website
```toml
[params]
color_scheme = "dark" # "light" or "dark"
```
> default: "light"

View File

@@ -0,0 +1,6 @@
---
title: 'Layouts'
type: 'bookcase'
---
Monochrome has multiple layouts built in. You can change the layout of section or regular page according to your needs.

View File

@@ -0,0 +1,10 @@
---
title: 'Balloon Layout'
bookcase_cover_src: 'cover/balloon.png'
bookcase_cover_src_dark: 'cover/balloon_dark.png'
type: "bookcase"
---
Balloon layout is useful for demonstrating information step-by-step.
> This layout can be used on both section page (`_index.md`) and regular post (`xxx.md`).

View File

@@ -0,0 +1,15 @@
---
title: 'Balloon Layout Demo'
bookcase_cover_src: 'cover/balloon.png'
bookcase_cover_src_dark: 'cover/balloon_dark.png'
type: 'balloon'
balloon_img_src: "icons/balloon.svg"
balloon_img_src_dark: "icons/balloon_dark.svg"
balloon_circle: false
balloon_resources: "/about"
weight: 10
---
Balloon layout is useful for demonstrating information step-by-step.
[Go to single page demo](/hugo-theme-monochrome/layouts/demo/balloon/single)

View File

@@ -0,0 +1,12 @@
---
title: 'balloon layout single demo'
type: 'balloon'
balloon_img_src: "icons/balloon.svg"
balloon_img_src_dark: "icons/balloon_dark.svg"
balloon_circle: false
balloon_resources: "/about"
---
Balloon layout can also be used in regular page.
[Go to list demo](/hugo-theme-monochrome/layouts/demo/balloon)

View File

@@ -0,0 +1,130 @@
---
title: 'Balloon Layout Document'
bookcase_cover_src: 'cover/balloon.png'
bookcase_cover_src_dark: 'cover/balloon_dark.png'
date: 2022-03-29
---
# Balloon Layout Document
Balloon is useful for demonstrating information step-by-step.
> This layout can be used on both section page (`_index.md`) and regular post (`xxx.md`).
## Configuration
```yaml
---
type: 'balloon'
---
```
> Specify `type` in front-matter will change the template lookup order.
### balloon_resources
Content resources. URL can be an absolute path (with `/` prefix, relative to base URL), or relative path (without `/`, relative to current path)
> Hugo will handle multilingual scenario out of the box
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/about
\____________________________________/\____/
base URL balloon_resources
```
```yaml
---
balloon_resources: "/about"
---
```
> default: error will occur in page
### balloon_img_src
Balloon head image URL. URL must be relative to the base URL. (without `/` prefix)
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg
\_____________________________________/\________/
base URL balloon_img_src
```
```yaml
---
balloon_img_src: 'thanks.jpg'
---
```
> default: fallback to balloon_img_src_dark, if failed, image become dot
### balloon_img_src_dark
Balloon head image URL for dark mode. URL must be relative to the base URL. (without `/` prefix)
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg
\_____________________________________/\________/
base URL balloon_img_src
```
```yaml
---
balloon_img_src_dark: 'thanks.jpg'
---
```
> default: fallback to balloon_img_src, if failed, image become dot
### balloon_circle
balloon head shape can be square or circle.
```yaml
---
balloon_circle: true
---
```
> default: true
## Resouces Configuration
These settings are under the resource specified in `balloon_resources`.
### title
Title of content card.
```yaml
---
title: 'Story before hugo'
---
```
> default: no title
### weight
```yaml
---
weight: 3
---
```
> default: [default order](https://gohugo.io/templates/lists/#order-content)
## Headless Bundle
Hugo supports an amazing feature called **Headless Bundle**, which elegantly resolved the resouces publish issue.
For example, if you don't want to publish the resouces of the balloon layout, you can create a leaf bundle and specified `headless = true` in `index.md`'s front-matter. These resources will only be used during rendering process. In other word, no file will be generated to `/public` folder.
Checkout [Headless Bundle](https://gohugo.io/content-management/page-bundles/#headless-bundle) for more details.

View File

@@ -0,0 +1,10 @@
---
title: 'Blank Layout'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
type: "bookcase"
---
Sometimes, it's useful to fully control your section page, so I create a layout with only render the `_index.md` content and called this Blank Layout.
> This layout can only be used on section page (`_index.md`).

View File

@@ -0,0 +1,21 @@
---
title: 'Blank Layout Demo'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
type: 'blank'
weight: 40
---
```
.
├── _index.md <- you're here!
├── post1.md
├── post2.md
└── post3.md
```
Fully customized section page.
* [post1](./post1)
* [post2](./post2)
* [post3](./post3)

View File

@@ -0,0 +1,7 @@
---
title: 'post1'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post2'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post3'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,21 @@
---
title: 'Blank Layout Document'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
weight: 40
changelogs:
---
Blank layout render only the content of `_index.md`, it's useful for fully customizing your list layout.
> This layout can only be used on section page (`_index.md`).
## Configuration
```yaml
---
type: 'blank'
---
```
> Specify `type` in front-matter will change the template lookup order.

View File

@@ -0,0 +1,10 @@
---
title: 'Bookcase Layout'
bookcase_cover_src: 'cover/bookcase.png'
bookcase_cover_src_dark: 'cover/bookcase_dark.png'
type: "bookcase"
---
Bookcase layout is useful for creating another viewpoint of list contents.
> This layout can only be used on section page (`_index.md`).

View File

@@ -0,0 +1,19 @@
---
title: 'Bookcase Layout Demo'
type: 'bookcase'
bookcase_cover_src: 'cover/bookcase.png'
bookcase_cover_src_dark: 'cover/bookcase_dark.png'
weight: 20
---
Bookcase layout is useful for creating another viewpoint of list contents.
```
.
├── balloon
│ └── _index.md
├── regular-page.md
├── _index.md <- you are here
└── normal
└── _index.md
```

View File

@@ -0,0 +1,13 @@
---
title: 'balloon'
bookcase_cover_src: 'cover/balloon.png'
bookcase_cover_src_dark: 'cover/balloon_dark.png'
type: 'balloon'
balloon_img_src: "icons/balloon.svg"
balloon_img_src_dark: "icons/balloon_dark.svg"
balloon_circle: false
balloon_resources: "/about"
weight: 1
---
balloon layout in bookcase.

View File

@@ -0,0 +1,7 @@
---
title: 'List'
bookcase_cover_src: 'cover/list.png'
bookcase_cover_src_dark: 'cover/list_dark.png'
---
List section in bookcase layout.

View File

@@ -0,0 +1,7 @@
---
title: 'post1'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post2'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post3'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'Regular Page'
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
---
This is a regular page in bookcase.

View File

@@ -0,0 +1,122 @@
---
title: 'Bookcase Layout Document'
bookcase_cover_src: 'cover/bookcase.png'
bookcase_cover_src_dark: 'cover/bookcase_dark.png'
weight: 20
---
Bookcase layout is useful for creating another viewpoint of list contents.
> This layout can only be used on section page (`_index.md`).
## Configuration
```yaml
---
type: 'bookcase'
---
```
> Specify `type` in front-matter will change the template lookup order.
### bookcase_list_sections
List subsections.
```yaml
---
bookcase_list_sections: true
---
```
> default: true
### bookcase_list_pages
List pages.
```yaml
---
bookcase_list_pages: true
---
```
> default: true
## Resouces Configuration
These parameters are located in bookcase item's resource. For example:
```
.
├── books.md <- config is located in here!
├── category
│ └── _index.md <- and here!
└── _index.md <- your bookcase layout
```
### bookcase_cover_src
The cover image URL relative to the base URL. (with or without `/` prefix)
> Image ratio is 2:3 (width:height)
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg
\_____________________________________/\________/
base URL bookcase_cover_src
```
```yaml
---
bookcase_cover_src: 'thanks.jpg'
---
```
> default: fallback to bookcase_cover_src_dark, if failed, image become empty
### bookcase_cover_src_dark
The dark mode cover image URL relative to the base URL. (with or without `/` prefix)
> Image ratio is 2:3 (width:height)
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg
\_____________________________________/\________/
base URL bookcase_cover_src
```
```yaml
---
bookcase_cover_src_dark: 'thanks.jpg'
---
```
> default: fallback to bookcase_cover_src, if failed, image become empty
### bookcase_cover_title
The title used in the bookcase cover
> default: fallback to the title of the page
### bookcase_hidden
Hide this item from bookcase
> default: false
### weight
```yaml
---
weight: 3
---
```
> default: [default order](https://gohugo.io/templates/lists/#order-content)

View File

@@ -0,0 +1,10 @@
---
title: 'Gallery Layout'
bookcase_cover_src: 'cover/picture.png'
bookcase_cover_src_dark: 'cover/picture_dark.png'
type: "bookcase"
---
Gallery layout is useful for demonstrating pictures and its statistical data.
> This layout can be used on both section page (`_index.md`) and regular post (`xxx.md`).

View File

@@ -0,0 +1,10 @@
---
title: 'Gallery Layout Demo'
type: 'gallery'
gallery_resources: "about"
bookcase_cover_src: 'cover/picture.png'
bookcase_cover_src_dark: 'cover/picture_dark.png'
weight: 30
---
Gallery layout is useful for demonstrating pictures and its statistical data.

View File

@@ -0,0 +1,152 @@
---
title: 'Gallery Layout Document'
bookcase_cover_src: 'cover/picture.png'
bookcase_cover_src_dark: 'cover/picture_dark.png'
weight: 30
---
# Gallery Layout Document
Gallery layout is useful for demonstrating pictures and its statistical data.
> This layout can be used on both section page and regular post.
## Configuration
```yaml
---
type: 'gallery'
---
```
> Specify `type` in front-matter will change the template lookup order.
### gallery_resources
Content resources. URL can be an absolute path (with `/` prefix, relative to base URL), or relative path (without `/`, relative to current path)
> Hugo will handle multilingual scenario out of the box
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/about
\____________________________________/\____/
base URL gallery_resources
```
```yaml
---
gallery_resources: '/about'
---
```
> default: error will occur in page
## Resouces Configuration
These settings are under the resource specified in `gallery_resources`.
### title
Title of image.
```yaml
---
title: 'Gallery'
---
```
> default: no title
### gallery_title_link
Link of the title.
```yaml
---
gallery_title_link: 'https://github.com/kaiiiz'
---
```
> default: no title link
### gallery_img_src
Image URL relative to the base URL. (with or without `/` prefix)
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/thanks.jpg
\_____________________________________/\________/
base URL gallery_img_src
```
```yaml
---
gallery_img_src: 'thanks.jpg'
---
```
> default: no image
### gallery_img_link
Link of the image.
```yaml
---
gallery_img_link: 'https://github.com/kaiiiz'
---
```
> default: no image link
### gallery_img_caption
Caption of the image. HTML is available.
```yaml
---
gallery_img_caption: '<span>Photo by <a href="https://unsplash.com/@swimstaralex?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alexander Sinn</a> on <a href="https://unsplash.com/s/photos/thanks?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>'
---
```
> default: no figure caption under image
### gallery_statistic
Statistic of the image. The format is:
```yaml
---
- key: key1
value: value1
- key: key2
value: value2
---
```
key and value both support markdown syntax.
> default: no figure caption under image
### weight
```yaml
---
weight: 3
---
```
> default: [default order](https://gohugo.io/templates/lists/#order-content)
## Headless Bundle
Hugo supports an amazing feature called **Headless Bundle**, which elegantly resolved the resouces publish issue.
For example, if you don't want to publish the resouces of the gallery layout, you can create a leaf bundle and specified `headless = true` in `index.md`'s front-matter. These resources will only be used during rendering process. In other word, no file will be generated to `/public` folder.
Checkout [Headless Bundle](https://gohugo.io/content-management/page-bundles/#headless-bundle) for more details.

View File

@@ -0,0 +1,8 @@
---
title: 'List Layout'
bookcase_cover_src: 'cover/list.png'
bookcase_cover_src_dark: 'cover/list_dark.png'
type: "bookcase"
---
List layout is the built-in section layout. Monochrome add options to adjust its behavior.

View File

@@ -0,0 +1,14 @@
---
title: 'List Layout Demo'
bookcase_cover_src: 'cover/list.png'
bookcase_cover_src_dark: 'cover/list_dark.png'
weight: 40
---
```
.
├── _index.md <- you're here!
├── post1.md
├── post2.md
└── post3.md
```

View File

@@ -0,0 +1,7 @@
---
title: 'post1'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post2'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post3'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,40 @@
---
title: 'List Layout Document'
bookcase_cover_src: 'cover/list.png'
bookcase_cover_src_dark: 'cover/list_dark.png'
weight: 40
changelogs:
---
List layout is the built-in section layout. Monochrome add options to adjust its behavior.
## Configuration
### Group by year
An option to control group setting.
```yaml
group_by_year: false
```
> default: theme's [`list_layout.enable_group_by_year`](/hugo-theme-monochrome/configuration/theme/#group-by-year)
### Show date
Show / Hide date right after the post entry.
```yaml
show_date: false
```
> default: theme's [`list_layout.enable_show_date`](/hugo-theme-monochrome/configuration/theme/#show-date)
### Pagination
```yaml
pagination: false
```
> default: theme's [`list_layout.enable_pagination`](/hugo-theme-monochrome/configuration/theme/#pagination)

View File

@@ -0,0 +1,10 @@
---
title: 'Postcard Layout'
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
type: "bookcase"
---
Postcard layout shows summary of regular posts, its useful for creating home page. Postcard layout paginates page according to your `paginate` config setting.
> This layout can only be used on section page. (`_index.md`)

View File

@@ -0,0 +1,18 @@
---
title: 'Postcard Layout Demo'
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
type: 'postcard'
weight: 40
---
```
.
├── _index.md <- you're here!
├── post1.md
├── post2.md
├── post3.md
├── post4.md
├── post5.md
└── post6.md
```

View File

@@ -0,0 +1,7 @@
---
title: 'post1'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post2'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post3'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post4'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post5'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,7 @@
---
title: 'post6'
date: 2021-02-06
search_hidden: true
---
Hello world!

View File

@@ -0,0 +1,21 @@
---
title: 'Postcard Layout Document'
bookcase_cover_src: 'cover/catalogue.png'
bookcase_cover_src_dark: 'cover/catalogue_dark.png'
weight: 40
changelogs:
---
Postcard layout show summary of regular posts, it's useful for creating home page.
> This layout can only be used on list layout.
## Configuration
```yaml
---
type: 'postcard'
---
```
> Specify `type` in front-matter will change the template lookup order.

View File

@@ -0,0 +1,9 @@
+++
aliases = ["posts", "articles", "blog", "showcase", "docs"]
title = "Posts"
author = "Hugo Authors"
tags = ["index"]
type = "postcard"
+++
Some posts from [hugoBasicExample](https://github.com/gohugoio/hugoBasicExample).

View File

@@ -0,0 +1,45 @@
+++
author = "Hugo Authors"
title = "Emoji Support"
date = "2019-03-05"
description = "Guide to emoji usage in Hugo"
tags = [
"emoji",
]
+++
Emoji can be enabled in a Hugo project in a number of ways.
<!--more-->
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
***
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
{{< highlight html >}}
.emoji {
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}
{{< /highlight >}}
{{< css.inline >}}
<style>
.emojify {
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
font-size: 2rem;
vertical-align: middle;
}
@media screen and (max-width:650px) {
.nowrap {
display: block;
margin: 25px 0;
}
}
</style>
{{< /css.inline >}}

View File

@@ -0,0 +1,159 @@
+++
author = "Hugo Authors"
title = "Markdown Syntax Guide"
date = "2019-03-11"
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
tags = [
"markdown",
"css",
"html",
]
categories = [
"themes",
"syntax",
]
series = ["Themes Guide"]
aliases = ["migrate-from-jekyl"]
+++
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
<!--more-->
## Headings
The following HTML `<h1>``<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
#### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.
#### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
Name | Age
--------|------
Bob | 27
Alice | 23
#### Inline Markdown within tables
| Italics | Bold | Code |
| -------- | -------- | ------ |
| *italics* | **bold** | `code` |
## Code Blocks
```
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block with backticks
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block indented with four spaces
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
#### Code block with Hugo's internal highlight shortcode
{{< highlight html >}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
{{< /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
## Other Elements — abbr, sub, sup, kbd, mark
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

View File

@@ -0,0 +1,45 @@
---
author: Hugo Authors
title: Math Typesetting
date: 2019-03-08
description: A brief guide to setup KaTeX
math: true
---
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
<!--more-->
In this example we will be using [KaTeX](https://katex.org/)
- Create a partial under `/layouts/partials/math.html`
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
- Include the partial in your templates like so:
```bash
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
```
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
- To enable KaTex on a per page basis include the parameter `math: true` in content files
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
{{< math.inline >}}
{{ if or .Page.Params.math .Site.Params.math }}
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
{{ end }}
{{</ math.inline >}}
### Examples
Inline math: $\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…$
Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$

View File

@@ -0,0 +1,45 @@
+++
author = "Hugo Authors"
title = "Placeholder Text"
date = "2019-03-09"
description = "Lorem Ipsum Dolor Si Amet"
tags = [
"markdown",
"text",
]
+++
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
1. Exierant elisi ambit vivere dedere
2. Duce pollice
3. Eris modo
4. Spargitque ferrea quos palude
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
1. Comas hunc haec pietate fetum procerum dixit
2. Post torum vates letum Tiresia
3. Flumen querellas
4. Arcanaque montibus omnes
5. Quidem et
# Vagus elidunt
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
## Mane refeci capiebant unda mulcebat
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
{{< css.inline >}}
<style>
.canon { background: white; width: 100%; height: auto; }
</style>
{{< /css.inline >}}

View File

@@ -0,0 +1,30 @@
+++
author = "Hugo Authors"
title = "Rich Content"
date = "2019-03-10"
description = "A brief description of Hugo Shortcodes"
tags = [
"shortcodes",
"privacy",
]
+++
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
<!--more-->
---
## YouTube Privacy Enhanced Shortcode
{{< youtube ZJthWmvUzzc >}}
---
## Twitter Simple Shortcode
{{< twitter_simple user="designreviewed" id="1085870671291310081" >}}
---
## Vimeo Simple Shortcode
{{< vimeo_simple 48912912 >}}

View File

@@ -0,0 +1,96 @@
---
title: 'Setup'
---
This document shows a brief guide to setup hugo-theme-monochrome in your hugo project.
## Quick Start
### Install Hugo
You need "extended" version of hugo to support SASS. Checkout [Install Hugo](https://gohugo.io/getting-started/installing/) for more details.
Take Linux for example:
```bash
snap install hugo --channel=extended
```
> The minimum hugo version that hugo-theme-monochrome required is `0.112.0`
### Create a New Site
```bash
hugo new site <project name>
```
### Add a Theme
```bash
cd <project name>
git init
git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome
```
Then add `theme = "hugo-theme-monochrome"` to your `config.toml`
### Customize the Theme
See [Configuration](/hugo-theme-monochrome/configuration/).
### Start the Hugo server
```bash
hugo server
```
Minify CSS and JS resources. The minifier of JavaScript here is powered by [ESBuild](https://github.com/evanw/esbuild).
```bash
hugo server --environment production
```
### Build static pages
Generate files to `/public` folder, `--minify` option can minify other resouces (e.g. HTML/XML/JSON...).
See [Configure Minify](https://gohugo.io/getting-started/configuration/#configure-minify) to adjust the behavior of hugo minifier (powered by [minify](https://github.com/tdewolff/minify)).
```bash
hugo --environment production --minify
```
### Deployment
Push `/public` folder to your server.
> For reference, this site is built by using Github Action and Github Pages. The CI script is available [here](https://github.com/kaiiiz/hugo-theme-monochrome/blob/main/.github/workflows/gh-pages.yml).
#### Deployment on github
If you want to deploy your own site on github and you would like it to be built using Github Action and Github Pages you can follow [these instructions](https://gohugo.io/hosting-and-deployment/hosting-on-github/#build-hugo-with-github-action) on the HUGO website with the only change being to uncomment the following line in Setup Hugo:
```
# extended: true
```
This is needed since Monochrome uses SCSS.
Otherwise the Github Action will fail with the following message:
```
Run hugo --minify
Start building sites …
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb linux/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio
Error: Error building site: TOCSS: failed to transform "scss/core.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Total in 156 ms
Error: Process completed with exit code 255.
```
## Run exampleSite
```bash
git clone https://github.com/kaiiiz/hugo-theme-monochrome
cd hugo-theme-monochrome/exampleSite
hugo --themesDir=../.. server
```

View File

@@ -0,0 +1,7 @@
---
title: 'Shortcodes'
group_by_year: false
show_date: false
---
See [Shortcodes](https://gohugo.io/content-management/shortcodes/) for more details.

View File

@@ -0,0 +1,35 @@
---
title: 'Bookcase'
---
# Bookcase
Render bookcase layout
## Usage
```
{{</* bookcase section="" /*/>}}
```
`section`: Content resources. Must be a section. Path can be an absolute path (with `/` prefix, relative to base URL), or relative path (without `/`, relative to current path)
> Hugo will handle multilingual scenario out of the box
For example:
```
https://kaiiiz.github.io/hugo-theme-monochrome/configuration
\____________________________________/\____________/
base URL section path
```
## Examples
```html
{{</* bookcase section="/configuration" */>}}
```
{{< bookcase section="/configuration" >}}

View File

@@ -0,0 +1,23 @@
---
title: 'Breadcrumbs'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# Breadcrumbs
Render breadcrumbs navigation
## Usage
```
{{</* breadcrumbs /*/>}}
```
## Examples
```html
{{</* breadcrumbs */>}}
```
{{< breadcrumbs >}}

View File

@@ -0,0 +1,27 @@
---
title: 'CodePen'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# CodePen
Embeded codepen to page.
## Usage
```
{{</* codepen id="" */>}}
```
Paramters:
* `id`: codepen id
## Examples
```html
{{</* codepen id="Vwmpjba" */>}}
```
{{< codepen id="Vwmpjba" >}}

View File

@@ -0,0 +1,79 @@
---
title: 'Color Block'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# Color Block
A block with color
## Usage
```
{{</* color-block style="" */>}}
{{</* /color-block */>}}
```
Paramters:
* `style`: block style
* success
* info
* warning
* error
## Examples
```html
{{</* color-block */>}}
hello world
{{</* /color-block */>}}
```
{{< color-block >}}
hello world
{{< /color-block >}}
```html
{{</* color-block style="success" */>}}
hello world
{{</* /color-block */>}}
```
{{< color-block style="success" >}}
hello world
{{< /color-block >}}
```html
{{</* color-block style="info" */>}}
hello world
{{</* /color-block */>}}
```
{{< color-block style="info" >}}
hello world
{{< /color-block >}}
```html
{{</* color-block style="warning" */>}}
hello world
{{</* /color-block */>}}
```
{{< color-block style="warning" >}}
hello world
{{< /color-block >}}
```html
{{</* color-block style="error" */>}}
hello world
{{</* /color-block */>}}
```
{{< color-block style="error" >}}
hello world
{{< /color-block >}}

View File

@@ -0,0 +1,39 @@
---
title: 'Embed github'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# Embed github
Directly embed github source code like gist with Prism.js syntax highlight.
## Usage
```
{{</* emgithub target="" lang="" hl="" tab_size="" /*/>}}
```
Paramters:
* `target` (required): A valid github file url, for example:
* https://github.com/torvalds/linux/blob/v5.4/README
* https://github.com/torvalds/linux/blob/v5.4/README#L1
* https://github.com/torvalds/linux/blob/v5.4/README#L1-L7
* `lang` (optional): Which language should use for syntax highlighting? `text` will be applied by default.
* `hl` (optional): Line highlight settings. For details, please refer [Prism.js Line Highlight Plugin](https://prismjs.com/plugins/line-highlight/)
* `tab_size` (optional): Default setting is 4 characters.
## Examples
```html
{{</* emgithub target="https://github.com/torvalds/linux/blob/v5.4/README" /*/>}}
```
{{< emgithub target="https://github.com/torvalds/linux/blob/v5.4/README" >}}
```html
{{</* emgithub target="https://github.com/torvalds/linux/blob/v5.4/arch/arm64/kernel/stacktrace.c#L171-L199" lang=c tab_size=8 hl="172-173,192" /*/>}}
```
{{< emgithub target="https://github.com/torvalds/linux/blob/v5.4/arch/arm64/kernel/stacktrace.c#L171-L199" lang=c tab_size=8 hl="171-172,192" >}}

View File

@@ -0,0 +1,33 @@
---
title: 'Icon Group'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# Icon Group
Wrap icons with grid layout
## Usage
```
{{</* icon-group */>}}
{{</* /icon-group */>}}
```
## Examples
```html
{{</* icon-group */>}}
{{</* icon vendor="feather" name="github" */>}}
{{</* icon vendor="feather" name="rss" */>}}
{{</* icon vendor="feather" name="twitter" */>}}
{{</* /icon-group */>}}
```
{{< icon-group >}}
{{< icon vendor="feather" name="github" >}}
{{< icon vendor="feather" name="rss" >}}
{{< icon vendor="feather" name="twitter" >}}
{{< /icon-group >}}

View File

@@ -0,0 +1,44 @@
---
title: "Icon"
bookcase_cover_src: "cover/coding.png"
bookcase_cover_src_dark: "cover/coding_dark.png"
---
# Icon
Monochrome built-in icons.
## Usage
```
{{</* icon vendor="" name="" link="" */>}}
```
Paramters:
- `vendor`: Icon vendor (Supported value: `feather`)
- `link`: Render link for icon
- `name`: Icon name
## Available Icons
Icons from [Feather icons](https://feathericons.com/)
| name | svg |
| -------- | ------------------------------------ |
| globe | {{< icon vendor="feather" name="globe" >}} |
| moon | {{< icon vendor="feather" name="moon" >}} |
| sun | {{< icon vendor="feather" name="sun" >}} |
| github | {{< icon vendor="feather" name="github" >}} |
| facebook | {{< icon vendor="feather" name="facebook" >}} |
| rss | {{< icon vendor="feather" name="rss" >}} |
| twitter | {{< icon vendor="feather" name="twitter" >}} |
| mail | {{< icon vendor="feather" name="mail" >}} |
## Examples
```html
{{</* icon vendor="feather" name="github" link="https://github.com/kaiiiz/hugo-theme-monochrome" */>}}
```
{{< icon vendor="feather" name="github" link="https://github.com/kaiiiz/hugo-theme-monochrome" >}}

View File

@@ -0,0 +1,27 @@
---
title: 'JSFiddle'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# JSFiddle
Embeded jsfiddle to page.
## Usage
```
{{</* jsfiddle id="" */>}}
```
Paramters:
* `id`: jsfiddle id
## Examples
```html
{{</* jsfiddle id="5byh90rz" */>}}
```
{{< jsfiddle id="5byh90rz" >}}

View File

@@ -0,0 +1,26 @@
---
title: 'Recent Posts'
---
# Recent Posts
Render recent posts list
## Usage
```
{{</* recent-posts sortby="" limit="" */>}}
```
Paramters:
* `sortby`: `publishDate` or `lastMod`
* `limit`: positive integer, `0` means unlimited
## Examples
```html
{{</* recent-posts sortby="lastMod" limit=5 */>}}
```
{{< recent-posts sortby="lastMod" limit=5 >}}

View File

@@ -0,0 +1,33 @@
---
title: 'Terms Cloud'
bookcase_cover_src: 'cover/coding.png'
bookcase_cover_src_dark: 'cover/coding_dark.png'
---
# Terms Cloud
Render terms cloud, hugo supports `tag` and `category` terms by default, if you want to add your custom terms. Follow the instructions in the [document](https://gohugo.io/content-management/taxonomies/#configure-taxonomies).
## Usage
```
{{</* terms-cloud terms="" /*/>}}
```
Paramters:
* `terms`: terms name
## Examples
```html
{{</* terms-cloud terms="tags" */>}}
```
{{< terms-cloud terms="tags" >}}
```html
{{</* terms-cloud terms="series" */>}}
```
{{< terms-cloud terms="series" >}}

View File

@@ -0,0 +1,6 @@
---
---
{{< icon vendor="feather" name="github" link="https://github.com/kaiiiz/hugo-theme-monochrome" >}}
This is the demo of multilingual capability of hugo-theme-monochrome.

View File

@@ -0,0 +1,45 @@
+++
author = "Hugo Authors"
title = "Emoji Support"
date = "2019-03-05"
description = "Guide to emoji usage in Hugo"
tags = [
"emoji",
]
+++
Emoji can be enabled in a Hugo project in a number of ways.
<!--more-->
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
***
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
{{< highlight html >}}
.emoji {
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}
{{< /highlight >}}
{{< css.inline >}}
<style>
.emojify {
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
font-size: 2rem;
vertical-align: middle;
}
@media screen and (max-width:650px) {
.nowrap {
display: block;
margin: 25px 0;
}
}
</style>
{{< /css.inline >}}

View File

@@ -0,0 +1,159 @@
+++
author = "Hugo Authors"
title = "Markdown Syntax Guide"
date = "2019-03-11"
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
tags = [
"markdown",
"css",
"html",
]
categories = [
"themes",
"syntax",
]
series = ["Themes Guide"]
aliases = ["migrate-from-jekyl"]
+++
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
<!--more-->
## Headings
The following HTML `<h1>``<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
#### Blockquote without attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.
#### Blockquote with attribution
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
## Tables
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
Name | Age
--------|------
Bob | 27
Alice | 23
#### Inline Markdown within tables
| Italics | Bold | Code |
| -------- | -------- | ------ |
| *italics* | **bold** | `code` |
## Code Blocks
```
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block with backticks
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block indented with four spaces
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
#### Code block with Hugo's internal highlight shortcode
{{< highlight html >}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
{{< /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
## Other Elements — abbr, sub, sup, kbd, mark
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

View File

@@ -0,0 +1,45 @@
---
author: Hugo Authors
title: Math Typesetting
date: 2019-03-08
description: A brief guide to setup KaTeX
math: true
---
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
<!--more-->
In this example we will be using [KaTeX](https://katex.org/)
- Create a partial under `/layouts/partials/math.html`
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
- Include the partial in your templates like so:
```bash
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
```
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
- To enable KaTex on a per page basis include the parameter `math: true` in content files
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
{{< math.inline >}}
{{ if or .Page.Params.math .Site.Params.math }}
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
{{ end }}
{{</ math.inline >}}
### Examples
Inline math: $\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…$
Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$

View File

@@ -0,0 +1,45 @@
+++
author = "Hugo Authors"
title = "Placeholder Text"
date = "2019-03-09"
description = "Lorem Ipsum Dolor Si Amet"
tags = [
"markdown",
"text",
]
+++
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
1. Exierant elisi ambit vivere dedere
2. Duce pollice
3. Eris modo
4. Spargitque ferrea quos palude
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
1. Comas hunc haec pietate fetum procerum dixit
2. Post torum vates letum Tiresia
3. Flumen querellas
4. Arcanaque montibus omnes
5. Quidem et
# Vagus elidunt
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
## Mane refeci capiebant unda mulcebat
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
{{< css.inline >}}
<style>
.canon { background: white; width: 100%; height: auto; }
</style>
{{< /css.inline >}}

View File

@@ -0,0 +1,30 @@
+++
author = "Hugo Authors"
title = "Rich Content"
date = "2019-03-10"
description = "A brief description of Hugo Shortcodes"
tags = [
"shortcodes",
"privacy",
]
+++
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
<!--more-->
---
## YouTube Privacy Enhanced Shortcode
{{< youtube ZJthWmvUzzc >}}
---
## Twitter Simple Shortcode
{{< twitter_simple user="designreviewed" id="1085870671291310081" >}}
---
## Vimeo Simple Shortcode
{{< vimeo_simple 48912912 >}}

View File

@@ -0,0 +1 @@
{"Target":"style.min.fae245b6ce34259555eab2b011d31eb69cfeb04f46398e9c82df62439ad6edea66fa04d14a95b4bbf3ce9679be82b4badfed247f9962c2af62f53d0f389b424f.css","MediaType":"text/css","Data":{"Integrity":"sha512-+uJFts40JZVV6rKwEdMetpz+sE9GOY6cgt9iQ5rW7epm+gTRSpW0u/POlnm+grS63+0kf5liwq9i9T0POJtCTw=="}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -0,0 +1,46 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 470" style="enable-background:new 0 0 470 470;" xml:space="preserve">
<g>
<path d="M235,0C132.991,0,50,82.99,50,185c0,50.538,19.963,108.442,53.401,154.894c17.384,24.147,37.048,43.376,58.448,57.151
c17.553,11.3,35.629,18.457,53.948,21.404c-10.86,11.882-17.169,27.572-17.169,44.051c0,4.143,3.358,7.5,7.5,7.5h57.744
c4.142,0,7.5-3.357,7.5-7.5c0-16.479-6.309-32.168-17.169-44.051c18.318-2.948,36.394-10.104,53.948-21.404
c21.4-13.775,41.064-33.004,58.448-57.151C400.037,293.442,420,235.538,420,185C420,82.99,337.009,0,235,0z M214.196,455
c2.055-13.481,9.573-25.693,20.804-33.605c11.231,7.912,18.749,20.124,20.804,33.605H214.196z M354.425,331.13
c-34.29,47.634-76.7,73.868-119.419,73.87c-42.73-0.002-85.141-26.237-119.431-73.87C84.379,287.794,65,231.8,65,185
c0-93.738,76.262-170,170-170s170,76.262,170,170C405,231.8,385.621,287.794,354.425,331.13z"/>
<path d="M235,40c-79.953,0-145,65.047-145,145c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5c0-71.683,58.318-130,130-130
c4.142,0,7.5-3.357,7.5-7.5S239.142,40,235,40z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Some files were not shown because too many files have changed in this diff Show More