Google Analytics
As someone who adores stats, we of course need to set up stats for the website! Google analytics provides a free service that provides fairly detailed metrics on website performance. These statistics include:
- Number of users
- How long users stay on the website
- How users are acquired
- User retention
- Geographical location of users
- General user behavior
Setup was extremely simple. After a quick registration where you provide the website URL and select privacy options, the google analytics account is created. In blogdown, the R package used for this website, simply scroll to the config.toml website and include the following code:
googleAnalytics = ""
Where the quotation marks is the tracking ID.
That’s it. We now have stats!
Light / Dark Mode Button (WIP)
Currently, the website defaults to the browser preference for light and dark mode. Let’s give users more autonomy in their choice.
First, let’s review how other themes include this option. From the Academia Hugo theme, we can navigate to /layouts/partials/navbar.html. There, we find the following HTML code:
{{ if site.Params.day_night }}
<li class="nav-item">
<a class="nav-link js-dark-toggle" href="#"><i class="fas fa-moon" aria-hidden="true"></i></a>
</li>
{{ end }}
day_night is a (boolean) parameter specified in cofig.toml, where TRUE enables the toggle button. The rest of the classes seem self explanatory, but may not appear in the coder theme configuration. Let’s investigate what we have as the defaults.
In our hugo-coder theme, we navigate to /layouts/partials/header.html. Immediately at the top, we notice the following code:
{{ if or .Site.Menus.main .Site.IsMultiLingual }}
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle"><i class="fas fa-bars"></i></label>
It seems that there was a menu-toggle option already. Since our website is not going to be multilingual, perhaps we can just modify this for the light/night mode toggle.
First, let’s add the day_night parameter to config.toml. Originally, we simply had a colorscheme parameter which sets the color to “dark”, “light”, and “auto”, where auto is what we currently have (defaults to browser preference).
If we can just add a button to the navigation bar that changes the colorscheme parameter, we are set!
(to be continued)