JustToThePoint English Website Version
JustToThePoint en español
JustToThePoint in Thai

Hugo V: Social Media. Buy me a Coffee. Related Content.


The footer is a section of the site that appears at the very bottom of every page. It typically contains a copyright notice and links to your privacy policy, terms of use, and social media. To reduce maintenance, we are going to use Hugo’s configuration file, config.yaml, to place these links and information:

params:
    author: PhD. Máximo Núñez Alarcón, Anawim
    og_image: https://www.justtothepoint.com/myImages/logotipoMagotipoCabecera.png
    description: Free bilingual e-books, articles, resources, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.
    social:
        profiles: 
            facebook: "https://www.facebook.com/nmaximo7"
            github: "https://github.com/nmaximo7"
            twitter: "http://Twitter.com/justtothepoint"
            instagram: "http://instagram.com/justtothepoint"
            linkedin: "https://www.linkedin.com/in/justtothepoint"
            youtube: "https://youtube.com/justtothepoint"
        share:
            facebook: true
            linkedin: true
            twitter: true
            whatsapp: true
            email: true
            line: true

    # My footer
    websiteTermsEs: "/contactes/terminos-y-condiciones-de-uso/"
    privacyPolicyEs: "/contactes/politica-de-cookies/"
    websiteTermsEn: "/contact/website-terms-and-conditions-of-use/"
    privacyPolicyEn: "/contact/cookies-policy/"
    copyrightStart: "2011"

    # Related posts. Hugo provides a sensible default configuration of Related Content, but you can fine-tune it in Hugo's configuration file.
    related:
      threshold: 70
      includeNewer: true
      toLower: false
      indices:
      - name : "keywords"
        weight: 150
      - name: "categories"
        weight: 80
      - name : "date"
        weight: 10
        pattern: "2006"

Next, we will create a new partial under layout/partials/footer.html that is referenced in _default/baseof.html:

<div class="site-info">
    <div class="site-info-container">
       <center>
        <img src="{{ "myImages/nenes2.png" | absURL }}" width="60%" ></center>
        <p><a href="https://justtothepoint.com/">JustToThePoint</a> Copyright &copy; {{ .Site.Params.copyrightStart }} - {{ dateFormat "2006" now }} {{ .Site.Params.author }}. ALL RIGHTS RESERVED. Bilingual e-books, articles, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.</p>

Let’s add Copyright information to our footer. We are adding {{ dateFormat "2006" now }}, so we don’t need to update our copyright info every year. now returns the current local time. We use the .Format function to display only the current year.

       {{ range $key, $url := site.Params.social.profiles }}

Please observe that Hugo variables are always prefixed with a $sign. To look through a list of items, we use the Range function. We are initializing two variables at once, a key-value pair, e.g., $key (facebook) and $url (https://www.facebook.com/nmaximo7).

            {{ if eq $key "facebook"}}

Observe that if is the condition, and eq is a function. It compares the first parameter ($key) with the following one, in this particular case, facebook. If the key is Facebook, then we will show the corresponding icon (we are using Awesome fonts) and href will point to our Facebook link (it is provided in config.yaml).

                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-facebook fa-2x" ></i></a>
            {{ else if eq $key "twitter" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-twitter fa-2x" ></i></a>
            {{ else if eq $key "github" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-github fa-2x" ></i></a>
            {{ else if eq $key "instagram" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-instagram fa-2x" ></i></a>
            {{ else if eq $key "youtube" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-youtube fa-2x" ></i></a>
            {{ else if eq $key "linkedin" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-linkedin fa-2x" ></i></a>
            {{ end }}   
        {{ end }}       
        {{ if eq (string .Params.language) "es" }}      
            <p>Esta web utiliza 'cookies' propias y de terceros para ofrecerte una mejor experiencia y servicio. <br>Al navegar o utilizar nuestros servicios, estas aceptando nuestra <a href="{{ .Site.Params.privacyPolicyEs }}">Política de Cookies</a>, así como, nuestros <a href="{{ .Site.Params.websiteTermsEs }}">Términos y condiciones de uso.</a></p>
        {{ else }} 
            <p>This website uses cookies to improve your navigation experience.<br> By continuing, you are consenting to our use of cookies, in accordance with our <a href="{{ .Site.Params.privacyPolicyEn }}">Cookies Policy</a> and <a href="{{ .Site.Params.websiteTermsEn }}">Website Terms and Conditions of use.</a></p>
        {{ end }}
       
   </div> <!-- .site-info-container -->
</div><!-- .site-info -->

We are going to create another partial to show our social icons and share our links on social media. You can copy the below code snippet as a reference and save it under layout/partials/socialshare.html:

<!-- Social Share Button HTML -->
<style> <!-- We can add a separate .css file to Hugo, but we can also add an internal stylesheet. Adapt your own CSS style based on your theme -->
  .myButtonShare  {
  padding: 0;
  border: 0;
  background: transparent;
}
 .myImageShare {
  display: block;
}
.containerBitcoin {
    background: url( "/myImages/myBitcoin.png" ) no-repeat;
    display: inline-block;
    background-size: 100px 100px; /* image's size */
    height: 100px; /* image's height */
    padding-left: 100px; 
}

.containerBitcoin span {
    height: 100px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

</style>
<section class="social-share">
  {{ $title := .Title }}
  {{ $url := printf "%s" .Permalink }}
  {{ $body := print .Site.Title " " .Params.description }}
  <!-- We create and initialize three variables: title, url, and body. Observe that we use "printf" to format our URL (.Permalink), and "print" to concatenate the Site's title with the page's description. -->
  <!-- Twitter -->
  {{ if .Site.Params.social.share.twitter }}

We have added: params, social, share, twitter: true in our main Hugo’s configuration file, config.yaml, so we can enable and disable our social media icons and links site-wide.

  <a href="https://twitter.com/intent/tweet?hashtags=justtothepoint&amp;url={{ .Permalink }}&amp;text={{ $body }}&amp;" target="_blank" rel="noopener" aria-label="Share on Twitter">
    <button class="myButtonShare" >
      <img class="myImageShare" src="/myImages/twitter.png">
    </button>
  </a>
  {{ end }}
  <!-- Facebook -->
  {{ if .Site.Params.social.share.facebook }}
  <a href="https://facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener" aria-label="Share on Facebook">
    <button class="myButtonShare" >
      <img class="myImageShare" src="/myImages/facebook.png">
    </button>
  </a>
  {{ end }}

  <!-- LinkedIn -->
  {{ if .Site.Params.social.share.linkedin }}
  <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $url }}&amp;source={{ $url }}&amp;title={{ $title }}&amp;summary={{ $title }}" target="_blank" rel="noopener" aria-label="Share on LinkedIn">
    <button class="myButtonShare" >
      <img class="myImageShare" src="/myImages/linked-in.png">
    </button>
  </a>
  {{ end }}

  <!-- WhatsApp -->
  {{ if .Site.Params.social.share.whatsapp }}
  <a href="whatsapp://send?text={{ $body }}-{{ $url }}" target="_blank" rel="noopener" aria-label="Share on WhatsApp">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/whatsapp.png">
    </button>
  </a>
  {{ end }}

  <!-- Email -->
  {{ if .Site.Params.social.share.email }}
  <a href="mailto:?subject={{ .Site.Title }} - {{ $title }}.&amp;body={{ $body }} - {{ $url }}" target="_self" rel="noopener" aria-label="Share by E-Mail">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/email.png">
    </button>
  </a>
  {{ end }} 

  <!-- Line -->
  {{ if .Site.Params.social.share.line }}
  <a href="https://social-plugins.line.me/lineit/share?url={{ $url }}" target="_blank" rel="noopener" aria-label="Share on Line">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/line.png">
    </button>
  </a>
  {{ end }} 

  <!-- Buy me a coffee -->
  <a href="https://buymeacoffee.com/justtothepoint" target="_blank" rel="noopener">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/buyMeCoffee.png">
    </button>
  </a>

Hugo supports a solution for related content Hugo, Related Content out of the box.

<!-- Related Posts -->
<div id="relatedposts">
<h2>Related Posts</h2>
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<ul>
  {{ range . }}
  <li>
    <a href="{{ .Permalink }}">
      <img src="{{ .Params.featured_image | absURL  }}" alt="{{ .Title }}"/>
      <p>{{ .Title }}</p></a>
  </li>
  {{ end }}
</ul>
{{ end }}
</div>

Finally, we have added our socialshare partial to the single.html file:

{{- define "main" }}
[....]
{{ partial "socialshare.html" . }}
{{- end }}
Bitcoin donation

JustToThePoint Copyright © 2011 - 2022 PhD. Máximo Núñez Alarcón, Anawim. ALL RIGHTS RESERVED. Bilingual e-books, articles, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.

This website uses cookies to improve your navigation experience.
By continuing, you are consenting to our use of cookies, in accordance with our Cookies Policy and Website Terms and Conditions of use.