An open API service indexing awesome lists of open source software.

https://github.com/devidw/hugo-theme-cik

Hugo Theme built on the “Content is King” philosophy. 👑
https://github.com/devidw/hugo-theme-cik

blog-theme blog-theme-hugo blog-themes blogging cik content-is-king contentisking hugo hugo-blog hugo-blog-theme hugo-theme simple static static-theme theme theme-ui

Last synced: 3 months ago
JSON representation

Hugo Theme built on the “Content is King” philosophy. 👑

Awesome Lists containing this project

README

        

# Content first Hugo Theme

This Hugo theme focuses purely on content: Content is king. Layout and appearance are simply by design. The primary goal of the theme is to give the website visitor maximal user experience for reading and enjoying the published content elegantly. No Sidebars or any other annoying elements that interrupt the reading experience.

![Screenshot](./images/screenshot.png)

## Installation

1. Clone this theme to your `themes` directory

```cmd
git submodule add https://github.com/devidw/hugo-theme-cik ./themes/hugo-theme-cik
```

2. Add this theme to your list of themes inside your config-file
Using `config.toml`

```toml
theme = ["…", "hugo-theme-cik", "…"]
```

Using `config.yaml`

```yaml
theme: ["…", "hugo-theme-cik", "…"]
```

or

```yaml
theme:
- "…"
- "hugo-theme-cik"
- "…"
```

3. (Optional) Install additional hugo theme components to extend the theme. Some suggestions:
* https://github.com/devidw/hugo-theme-component-asciidoctor-skin
* https://github.com/devidw/hugo-theme-component-structured-data
* https://github.com/devidw/hugo-theme-component-webmentions
* https://github.com/devidw/hugo-theme-component-oembed
* Or create your own one using https://github.com/devidw/cookiecutter-hugo-theme-component

## Update

```cmd
git submodule update --init --recursive --remote
```

## Configuration

### Params

#### Main Sections

Please specifiy in which sections you posts are located:

```yaml
mainSections:
- posts
```

#### Author

```yaml
author:
name: David Wolf
email: [email protected]
signature: signature.svg # static file path
```

#### Payments

Generates `` links and adds them to the ``

```yaml
payments:
- https://paypal.me/devidwolf
- https://buymeacoffee.com/dwolf
```

#### Theme color

```yaml
themeColor: "#8b7355"
```

#### Icons

```yaml
icons:
favicon: logo.svg
touchIcon: logo.svg # Safari
maskIcon: logo.svg # Safari
```

### Frontmatter

#### No index

```yaml
noindex: true
```

- sets robots meta tag
- excludes via `robots.txt`
- excludes from `sitemap.xml`
- excludes from RSS feed

### Hooks

You can inject custom HTML markup by creating hook partial files inside your projects `layouts/partials/hooks` directory.

For example to hook directly before the closing `` tag you can create a `body/end.html` file in your `layouts/partials/hooks` directory. The full path in this case would be `layouts/partials/hooks/body/end.html`.

Available hooks:

* `head/start.html` to inject HTML right after the opening `` tag
* `head/end.html` to inject HTML right before the closing `` tag
* `body/start.html` to inject HTML right after the opening `` tag
* `body/end.html` to inject HTML right before the closing `` tag

### Styles

You can add additional custom styles to the Hugo theme via the `/assets/sass/_custom.sass` file.

If there is no `/assets/sass/_custom.sass` file in your project you can simply create it.

#### Using SASS

Simply add your SASS rules into `_custom.sass`.

All your custom styles will be compiled from SASS to CSS and minified automatically via Hugo pipes.

#### Using SCSS or CSS

If you not so familiar with SASS you can also write SCSS or just plain CSS.

To do so you only have to import your `.scss` or `.css` file into `_custom.sass` by doing a SASS-import using the `@import` method.

```sass
@import
```

##### Example

Say you want to include some CSS styles, which you write into `/assets/sass/my-custom-styles.css`.

To add them to the theme you add the following into `/assets/sass/_custom.sass`:

```sass
@import my-custom-styles
```

Do not include the file extension like `.scss` or `.css` in the path of the `@import` rule.