Giter Club home page Giter Club logo

hugo-theme-knowing-less's Introduction

HUGO Theme Knowing Less

GitHub license GitHub release (latest by date including pre-releases)

The Knowing Less theme is a HUGO theme for podcasts.

δΈ­ζ–‡θ―΄ζ˜Ž

Screenshot

Feature

  • Responsive: Elegant responsive double column layout.
  • Design for podcast: Support generate podcast RSS feed from published episodes automatically and has many podcast related options.
  • Multi-languages support: currently zh-CN, zh-TW, en and de, PR welcome.
  • Dark mode support

Installation

Clone This Repo

Clone it to themes/knowing-less:

git clone https://github.com/LGiki/hugo-theme-knowing-less themes/knowing-less

Or if you already have a git repo in your site folder and don't want to make any changes to this theme, you can add it as a submodule:

git submodule add https://github.com/LGiki/hugo-theme-knowing-less themes/knowing-less

Copy Site Config

Copy the config.toml file from exampleSite folder to the root folder of your Hugo site:

cp themes/knowing-less/exampleSite/config.toml hugo.toml

Feel free to change it.

Edit Site Config

Following needs to be changed in config.toml, not all config needs customization, you just change what you need.

Menu Settings

If you want to display some links in the sidebar, set it like following:

[[menu.main]]
  name = "Episodes"
  weight = 20
  identifier = "episodes"
  url = "/episode/"
[[menu.main]]
  name = "Tags"
  weight = 30
  identifier = "tags"
  url = "/tags/"
[[menu.main]]
  name = "Categories"
  weight = 40
  identifier = "categories"
  url = "/categories/"

Social Links Settings

You can configure the social links in the sidebar like following:

[[params.links]]
  title = "Apple Podcast"
  fontAwesomeIcon = "fas fa-podcast"
  link = "https://example.org"
  svg = ""

If you leave the link field blank, this link will not displayed in the sidebar.

You can specify icon by fontAwesome or svg field:

  • If using fontAwesome, simply fill the fontAwesome field with class name of icon. For example:

    fontAwesomeIcon = "fas fa-podcast"
  • If using svg, you need put your SVG icon to static/icons/, then specify the svg field. For example:

    svg = "/icons/cosmos.svg"

This theme also support show WeChat Official Account QR code in sidebar, you can set weChatQRCode as your WeChat Official Account QR code image URL, when you mouse over the WeChat link in the sidebar, will display this QR code automatically.

Podcast Related Settings

Podcast Basic Information

  • Podcast Title

    Specify the title field to set the podcast title.

  • Podcast Author

    Set podcast author like following:

    [author]
      name = "LGiki"
      email = "[email protected]"
  • Podcast Cover Image

    Specify the podcastImage field with image URL to set the podcast cover image.

  • Podcast Category

    Set podcast category like following:

    [[params.podcastCategory]]
      title = "Society & Culture"
      subTitle = "Personal Journals"
    [[params.podcastCategory]]
      title = "Society & Culture"
      subTitle = "Relationships"
    [[params.podcastCategory]]
      title = "Society & Culture"
      subTitle = "Documentary"

Podcast RSS

This theme will automatically generate podcast RSS feed from published episodes. The generated RSS feed link will be displayed in the sidebar.

If your podcast already has an RSS feed link and you don't want to use the RSS feed generated by this theme, you can specify podcastRSS field with your own RSS feed link, then the link you set will displayed in the sidebar.

New episode

For this theme, you should use episode instead of posts:

hugo new episode/your-title-here.md

Update Theme

If you make any changes to this theme, please commit them first. You can only pull when your workspace is clean.

Then use git pull to get the newest commits, if there is a conflict, merge it manually:

cd ./themes/knowing-less
git pull

Front Matter

The archetypes/default.md shows all available parameters. Copy this file to the archetypes folder in the root of your Hugo site, then new episode will use this template automatically.

Podcast related front matter as following:

coverImage: ""
enclosureURL: ""
enclosureType: ""
enclosureLength: ""
author: ""
# The duration can be either string or integer (in seconds), for example:
# If set duration to 12345 will displayed 03:25:45
# If set duration to "12:34" will displayed 12:34
duration: 0
hiddenFromRSS: false
  • coverImage

    Episode cover image URL.

  • enclosure

    There are three enclosure related parameters:

    • enclosureURL: episode audio file URL.

    • enclosureType: episode audio file MIME type, e.g., audio/x-m4a, audio/mpeg.

    • enclosureLength: episode audio file length (in bytes).

    These parameters are used to generate podcast RSS feed and also for the player in the episode page.

    For example, if set enclosure related parameters like this:

    enclosureURL: "https://example.org/episode1.mp3"
    enclosureType: "audio/mpeg"
    enclosureLength: "123456"

    Will generated in RSS feed as following:

    <enclosure url="https://example.org/episode1.mp3" type="audio/mpeg" length="123456" />
  • author

    Episode author.

  • duration

    The duration can be either string or integer (in seconds), for example:

    • If you set the duration to 12345, will displayed as 03:25:45
    • If you set the duration to "12:34", will displayed as "12:34"
  • hiddenFromRSS

    If you set this parameter to true, the episode will not appear in the generated RSS feed.

Shortcodes

This theme provides player shortcode for insert podcast player into posts.

The usage of player is:

{{% player "Title here" "Author here" "Cover image URL here" "Audio file URL here" %}}

Acknowledgements

hugo-theme-knowing-less's People

Contributors

lgiki avatar skippysteve avatar stdevel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.