Site icon R-bloggers

Setting up your blog with RStudio and blogdown III: modify your theme

R on

[This article was first published on R on , and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

This is Part III of my series of posts about how to setup you blog with RStudio and blogdown. The other parts are: – Part I: about to setup the blog using Hugo, RStudio and blogdown – Part II explains my workflow of creating new posts. – Part III (this one) how to modify the theme.

In this post I am going to show how I modified the original theme casper-two that I use for my blog. It is a great theme, but for sure you would like to change the menus, the appearance, the structure of the information in the blog, etc.

But before that we have to learn a little bit about how Hugo and our theme works underneath our blog. If you have a look the folder where your blog is, you will find this structure

The last directory (hugo-casper-two) contains the theme files and has this structure:

The folder layouts contains a lot of html files in HUGO format that specify how our pages are going to be rendered. Each file is a mixture of html and HUGO variables. For example, this is how the index.html looks like

{{ partial "head" . }}

<body class="home-template"><div class="site-wrapper">

{{ partial "header" . }}

<main id="site-main" class="site-main outer" role="main">
  <div class="inner">
    <div class="post-feed">
      {{ partial "post-list-main" . }}
    </div>

    <nav class="pagination" role="navigation">
      {{if .Paginator.HasPrev}}
          <a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
      {{end}}
      <span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
      {{if .Paginator.HasNext}}
          <a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
      {{end}}
    </nav>
  </div>
</main>

{{ partial "footer" . }}
</div>{{ partial "js" . }}</body></html>

Each {{ }} command tells Hugo to do something. In particular the first one ({{ partial "head" . }}) includes in that position the partial head.html which is also in the layouts. Then it comes some for HTML, another partial header.html, etc. Hugo also controls which content is going to be in the final index.html (see for example the if control {{if .Paginator.HasPrev}}) or output some variables in the code depending on the context ({{ .Paginator.Prev.URL }}), etc.

Google Analytics

If you want to use Google Analytics for your blog, you can do it by specifying your Google Analytics tracking id in the config.toml

googleAnalytics = "UA-XXXXYYZZY-X"

It works great, but there is something that I didn’t like: the tracking works even in your production environment when you are under the blogdown::serve_site(). This means that when you are writing a post, updating locally your pictures, etc, you will get them reported in Google Analytics and counted as a visit to your blog.

We are going to modify the theme so that only visits from others are counted in Google Analytics. To do that we are going to

Math equations

Custom CSS

Show only some posts in the main page

To leave a comment for the author, please follow the link and comment on their blog: R on .
R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.