Blog

Theme Features

Jul 25, 2020 | 4 minutes read

Tag: code

Here are some helpful tips for setting up this theme.

Syntax Highlighting

Introduction allows the use of Hugo’s rich built-in syntax highlighting capabilities. See Syntax Highlighting in the Hugo docs.

Below is an example configuration for Highlight. See Highlight in the Hugo docs for more.

[markup]
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    # For styles, see https://xyproto.github.io/splash/docs/longer/all.html
    style = "friendly"
    tabWidth = 4

Shortcodes

Custom shortcodes can be added to a layouts/shortcodes/ directory in your site root. Below, I use two custom shortcodes to display a data file: the current configuration file for this site! See the source for this page to understand how to use shortcodes.

Show HTML in Posts

To ensure Hugo renders any HTML that your shortcode or other additions like Font Awesome uses in posts, make sure these lines for the Goldmark renderer are in your config.toml:

[markup]
defaultMarkdownHandler = "goldmark"

[markup.goldmark]

[markup.goldmark.renderer]
unsafe = true

Configuration

Introduction can be easily configured using Hugo’s configuration file. You can copy the config.toml in the exampleSite/ to your site root get started.

Here are all the options included in the configuration file for this example site!


baseURL                          = "http://example.com/"   # Your domain name. Must end with "/"
theme                            = "introduction"
DefaultContentLanguage           = "en"                    # Default language for multilingual sites
# disqusshortname                 = ""                     # https://gohugo.io/content-management/comments
# googleAnalytics                 = ""                     # https://gohugo.io/templates/internal/#google-analytics

[params]
    themeStyle                   = "light"                 # Choose "light" or "dark"
    favicon                      = "/img/fav.ico"          # Path to favicon file
    showRSSButton                = false                   # Show rss button in navigation
    fadeIn                       = true                    # Turn on/off the fade-in effect
    fadeInIndex                  = false                   # Turn on/off the fade-in effect on the index page even if fade-in was otherwise turned off
    dateFormat                   = "Jan 2, 2006"
    email                        = "youremail@email.com"   # E-mail address for contact section
    # customCSS                  = ["foo.css"]             # Include custom css files placed under assets/

    # Configure the home page
    [params.home]
        introHeight              = "fullheight"            # Input either "medium" or "large" or "fullheight"
        showLatest               = true                    # Show latest blog post summary
        showAllPosts             = false                   # Set true to list all posts on home page, or set false to link to separate blog list page
        numberOfProjectsToShow   = 3                       # Maximum number of projects to show on home page. Unset or comment out to show all projects
        localTime                = true                    # Show your current local time in contact section
        timeZone                 = "America/Los_Angeles"   # Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
        timeFormat               = "h:mm A"                # https://momentjs.com/docs/#/displaying/format/
    [params.projects]
        useTwoColumns            = false                   # Use a layout with two columns instead of three

    # Share buttons on blog post pages
    [params.share]
        twitter                  = true
        facebook                 = true
        googlePlus               = true
        pinterest                = true

    # Social icons appear in introduction and contact section. Add as many more as you like.
    # Icon pack "fab" includes social network icons, see: https://fontawesome.com/icons?d=gallery&s=brands&m=free
    # Icon pack "fas" includes solid style icons, see: https://fontawesome.com/icons?d=gallery&s=solid&m=free
    [[params.social]]
        url   = "https://twitter.com/"
        icon  = "twitter" # icon name without the 'fa-'
        icon_pack = "fab"
    [[params.social]]
        url   = "https://facebook.com/"
        icon  = "facebook-f" # icon name without the 'fa-'
        icon_pack = "fab"
    [[params.social]]
        url   = "https://linkedin.com/"
        icon  = "linkedin-in" # icon name without the 'fa-'
        icon_pack = "fab"
    [[params.social]]
        url = "mailto:youremail@email.com"  # For a direct email link, use "mailto:test@example.org".
        icon = "paper-plane" # icon name without the 'fa-'
        icon_pack = "fas"
    [[params.social]]
        url   = "https://mastodon.social/"
        icon  = "mastodon" # icon name without the 'fa-'
        icon_pack = "fab"
        html_attributes = "rel=\"me\"" # Add rel attribute for Mastodon profile link verification


# If you don't want to use the default menu, you can define one by yourself
# [[menu.main]]
#     name    = "Home"
#     url     = "/"
#     weight  = 0
# [[menu.main]]
#     name    = "Blog"
#     url     = "/blog/"
#     weight  = 1

# We only use tag as a taxonomies
# You can add more by yourself
[taxonomies]
  tag = "tags"

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
  [markup.goldmark.renderer]
    unsafe = true
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    # For styles, see https://xyproto.github.io/splash/docs/longer/all.html
    style = "friendly"
    tabWidth = 4

[languages]
    [languages.en]
        languageName     = "English"
        languageCode     = "en-us"
        contentDir       = "content/en"
        weight           = 0
        title            = "Introduction"
        [languages.en.params]
            description  = "Website Description"   # Max 160 characters show in search results
            # footerText   = ""                      # Text to override default footer text (markdown allowed)

    [languages.es]
        languageName     = "Español"
        languageCode     = "es"
        contentDir       = "content/es"
        weight           = 1
        title            = "Introducción"
        [languages.es.params]
            description  = "Descripcion del sitio web"
            # footerText   = ""

    [languages.de]
        languageName     = "Deutsch"
        languageCode     = "de"
        contentDir       = "content/de"
        weight           = 2
        title            = "Vorstellung"
        [languages.de.params]
            dateFormat   = "2. January 2006"
            description  = "Beschreibung der Webseite"
            # footerText   = ""