Hi! π
For the past few days, I've been looking on how to add a "Certifications" section in the "About" widget of the Wowchemy Academic Resume theme and the entire process wasn't as obvious as I first imagined.
π©βπ» If you'd like another example of how this is done I recommend Rohit Salecha's website which is where I borrowed the code from!
You can find the specific commits that incorporates these details on my site at commit f6a2801, 6047df4, 239294, 43501de, 842895b. The layout of this issue was inspired by spcanelon/silvia#19.
Step 1: Create the layouts/partials/widgets folders and an about.html file
If you created your Hugo website using the latest template from Wowchemy, you'll need to create two folders under the root directory of your site.
The first one is called layouts and contains another folder called partials which itself contains another folder called widgets. You have to manually create all of them.
In the last folder (so under layouts/partials/widgets
), create an about.html
file and paste the following code in it.
{{ $ := .root }}
{{ $page := .page }}
{{ $author := "" }}
{{ if .author }}
{{ $author = .author }}
{{ else }}
{{ $author = $page.Params.author }}
{{end}}
{{ $person_page_path := (printf "/authors/%s" $author) }}
{{ $person_page := site.GetPage $person_page_path }}
{{ if not $person_page }}
{{ errorf "Could not find an author page at `%s`. Please check the value of `author` in your About widget and create an associated author page if one does not already exist. See https://wowchemy.com/docs/page-builder/#about " $person_page_path }}
{{end}}
{{ $person := $person_page.Params }}
{{ $avatar := ($person_page.Resources.ByType "image").GetMatch "*avatar*" }}
{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
<!-- About widget -->
<div class="row">
<div class="col-12 col-lg-4">
<div id="profile">
{{ if site.Params.avatar.gravatar }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=270')" alt="{{$person_page.Title}}">
{{ else if $avatar }}
{{ $avatar_image := $avatar.Fill "270x270 Center" }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{$person_page.Title}}">
{{ end }}
<div class="portrait-title">
<h2>{{ $person_page.Title }}</h2>
{{ with $person.role }}<h3>{{ . | markdownify | emojify }}</h3>{{ end }}
{{ range $person.organizations }}
<h3>
{{ with .url }}<a href="{{ . }}" target="_blank" rel="noopener">{{ end }}
<span>{{ .name }}</span>
{{ if .url }}</a>{{ end }}
</h3>
{{ end }}
</div>
<ul class="network-icon" aria-hidden="true">
{{ range $person.social }}
{{ $pack := or .icon_pack "fas" }}
{{ $pack_prefix := $pack }}
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
{{ $pack_prefix = "fa" }}
{{ end }}
{{ $link := .link }}
{{ $scheme := (urls.Parse $link).Scheme }}
{{ $target := "" }}
{{ if not $scheme }}
{{ $link = .link | relLangURL }}
{{ else if in (slice "http" "https") $scheme }}
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
{{ end }}
<li>
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} aria-label="{{ .icon }}">
<i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }} big-icon"></i>
</a>
</li>
{{ end }}
</ul>
</div>
</div>
<div class="col-12 col-lg-8">
{{/* Only display widget title in explicit instances of about widget, not in author pages. */}}
{{ if and $page.Params.widget $page.Title }}<h1>{{ $page.Title | markdownify | emojify }}</h1>{{ end }}
<div class="article-style">
{{ $person_page.Content }}
</div>
<div class="row">
{{ with $person.interests }}
<div class="col-md-5">
<div class="section-subheading">{{ i18n "interests" | markdownify }}</div>
<ul class="ul-interests">
{{ range . }}
<li>{{ . | markdownify | emojify }}</li>
{{ end }}
</ul>
</div>
{{ end }}
<!-- CERTIFICATIONS -->
<!-- Inspired by rohitsalecha.com -->
{{ with $person.certification }}
<div class="col-md-6">
<h3>{{ i18n "certification" | markdownify }}</h3>
<ul class="ul-edu fa-ul">
{{ range .certificates }}
<li>
<i class="fa-li fas fa-award"></i>
<div class="description">
<p class="course"><a href="{{ .link }}" target="_blank">{{ .certificate }}</a></p>
<p class="institution">{{ .validity }}</p>
<p class="institution">{{ .institution }}</p>
</div>
</li>
{{ end }}
</ul>
</div>
{{ end }}
{{ with $person.education }}
<div class="col-md-7">
<div class="section-subheading">{{ i18n "education" | markdownify }}</div>
<ul class="ul-edu fa-ul">
{{ range .courses }}
<li>
<i class="fa-li fas fa-graduation-cap"></i>
<div class="description">
<p class="course">{{ .course }}{{ with .year }}, {{ . }}{{ end }}</p>
<p class="institution">{{ .institution }}</p>
</div>
</li>
{{ end }}
</ul>
</div>
{{ end }}
</div>
</div>
</div>
Partials are used to break down Hugo pages into smaller βcomponentsβ. To learn more about it, read the Partial Templates on the Hugo website and the Partial Tutorial on CloudCannon.
What we did here is telling Hugo to generate the About section as it normally would but in between the Interests and the Education section we added the Certifications section.
The original html template code for the About
widget can be found in the /wowchemy-hugo-theme/ repository.
Step 2: Create the i18n folder and an en.yaml file
In the code above, you can see that the copy for the h3 titles are not in the about.html
file itself but in another file that we have to create.
<h3>{{ i18n "certification" | markdownify }}</h3>
Create an i18n folder under the root directory of your site and in this new folder, create an en.yaml
file with the following code in it.
# Navigation
- id: toggle_navigation
translation: Toggle navigation
- id: table_of_contents
translation: Table of Contents
- id: on_this_page
translation: Contents
- id: back_to_top
translation: Back to top
# General
- id: related
translation: Related
- id: minute_read
translation: min read
- id: previous
translation: Previous
- id: next
translation: Next
- id: figure
translation: "Figure %d:"
- id: edit_page
translation: Edit this page
# Buttons
- id: btn_preprint
translation: Preprint
- id: btn_pdf
translation: PDF
- id: btn_cite
translation: Cite
- id: btn_slides
translation: Slides
- id: btn_video
translation: Video
- id: btn_code
translation: Code
- id: btn_dataset
translation: Dataset
- id: btn_project
translation: Project
- id: btn_poster
translation: Poster
- id: btn_source
translation: Source Document
- id: btn_copy
translation: Copy
- id: btn_download
translation: Download
# About widget
- id: interests
translation: Interests
- id: education
translation: Education
# Certification section inspired by rohitsalecha.com
- id: certification
translation: Certifications
- id: user_profile_latest
translation: Latest
# Accomplishments widget
- id: see_certificate
translation: See certificate
# Experience widget
- id: present
translation: Present
# Pages widget
- id: more_pages
translation: See all
- id: more_posts
translation: See all posts
- id: more_talks
translation: See all talks
- id: more_publications
translation: See all publications
# Contact widget
- id: contact_name
translation: Name
- id: contact_email
translation: Email
- id: contact_message
translation: Message
- id: contact_send
translation: Send
- id: book_appointment
translation: Book an appointment
# Publication/Talk details
- id: abstract
translation: Abstract
- id: publication
translation: Publication
- id: publication_type
translation: Type
- id: date
translation: Date
- id: last_updated
translation: Last updated on
- id: event
translation: Event
- id: location
translation: Location
- id: pub_uncat
translation: Uncategorized
- id: pub_conf
translation: Conference paper
- id: pub_journal
translation: Journal article
- id: pub_preprint
translation: Preprint
- id: pub_report
translation: Report
- id: pub_book
translation: Book
- id: pub_book_section
translation: Book section
- id: pub_thesis
translation: Thesis
- id: pub_patent
translation: Patent
# Project details
- id: open_project_site
translation: Go to Project Site
# Default titles for archive pages
- id: posts
translation: Posts
- id: publications
translation: Publications
- id: talks
translation: Talks
- id: projects
translation: Projects
# Search
- id: search
translation: Search
- id: search_placeholder
translation: Search...
- id: search_results
translation: results found
- id: search_no_results
translation: No results found
# Error 404
- id: page_not_found
translation: Page not found
- id: 404_recommendations
translation: Perhaps you were looking for one of these?
# Cookie consent
- id: cookie_message
translation: This website uses cookies to ensure you get the best experience on our website.
- id: cookie_dismiss
translation: Got it!
- id: cookie_learn
translation: Learn more
Step 3: Add your certification(s)
In the content/authors/admin/_index.md
file, create a new section below education to add your certification(s) with the following code.
# Certification to show in About widget
certification:
certificates:
- certificate: Project Management Professional (PMP)
institution: Project Management Institute
validity: December 2021
link: https://www.credly.com/badges/4768fdc4-a22e-43b3-bf48-973eeb1bebc4/linked_in_profile
And that's it, you're done! π
References
- Rohit Salecha's website
- About widget: add more flexibility to Education section Github issue
- Silvia's Github issue