Skip to content

Customizing the theme

Ishaat Chowdhury edited this page Dec 21, 2019 · 1 revision

The site is built on the Syna theme. Syna is a theme that is built upon what they term "fragments". Each fragment is basically a markdown file with the fragment variable set to the particular fragment type. One page in Hugo can be listed under a directory and can contain multiple fragments. Refer to the documentation for a more detailed explanation of Syna and how fragments work in Syna.

Custom Fragments

As per Syna documentation, new custom fragments are located in layouts/partials/fragments/. Currently, the theme has the following custom fragments: custom_nav, custom_footer, and custom_copyright. These fragments are essentially the same as their Syna counterparts: nav, footer, and copyright.

Overriding fragments and other layouts

Similar to how custom fragments can be created in layouts/partials/fragments/, if you add a new file in this folder that has the same name as a fragment in themes/syna/layouts/partials/fragments/, then the original fragment from the theme will be overriden. Since fragments in Syna are just Hugo partials, any fragment can be overriden. Also, any layouts from the theme can be overriden as well as per the Hugo documentation.

For example, in our repo layouts/head.html overrides themes/syna/layouts/head.html in order to add a fullcalendar config setting in the Syna config fragment.

For the fullcalendar config setting, fullcalendar.calendarElement revers to the html div id that contains a calendar to embed into the page. fullcalendar.calendarObj is basically a fullcalendar.calendar object with fullcalendar.calendarObj.events always being a url of a json file relative to content/.

[[fullcalendar]]
  calendarElement = "upcomingEventsCalendar"

  [fullcalendar.calendarObj]    
    events = "events/index.json"
    plugins = ["bootstrap", "list"]
    themeSystem = "bootstrap"
    header = false
    defaultView = "list"
    [fullcalendar.calendarObj.views]
        [fullcalendar.calendarObj.views.list]
            [fullcalendar.calendarObj.views.list.duration]
                days = 240
Clone this wiki locally