Antes de empezar

Es muy importante nunca modificar la carpeta del tema directamente, esto por motivos de reproducibilidad, ya que cualquier cambio que haga el creador del tema no podremos trazarlo de buena forma si es que nosotras hicimos algún cambio dentro de la carpeta original.

Pero, ¿cómo podemos cambiar el tema entonces?

Debemos hacerlo generando una carpeta en el directorio raíz llamada layouts. Lo que se encuentre dentro de esta carpeta sobreescribirá las opciones que trae el tema por defecto pero sin modificarlo directamente dentro de la carpeta mi_tema/layouts que es en donde se encuentran los archivos que determinan la estructura de las páginas del blog.

Puedes encontrar más información aquí.

Enlaces para compartir en redes sociales

Es importante averiguar primero si tu tema de Hugo ya trae estas opciones, el que yo uso no trae estas utilidades, así que tuve que ingresarlas de forma manual.

Son cinco los pasos fundamentales, los códigos está modificados por mí y la fuente original es el blog codingnconcepts.com.

También pueden encontrar un código que reúne los pasos 1 y 2 en el blog hugocodex.org.

Pasos:

1. Agregar código html para botones: este código determina las características de los botones y debe ponerse dentro de la carpeta ~/layouts/partials. Yo nombré este archivo como socialshare.html y generé botones para Twitter, Facebook y LinkedIn con Feather Icons que vienen por defecto con mi tema de Hugo.

Si no tienes estos íconos puedes seguir los pasos del tutorial de codingnconcepts.com en donde ingresan los íconos como svg.

Debes tener en cuenta que en la línea 4 ingresé la ruta de inicio de mi página.

<!-- Social Share Button HTML -->
{{- if .Param "socialshare" }}
  {{ $title := .Title }}
  {{ $url := printf "%s" "https://sporella.netlify.app" }}
  {{ $body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }}

  <section class="social-share">
    <ul class="share-icons">
      <!-- Twitter -->
      {{ if .Site.Params.social.share.twitter }}
      <li>
        <a href="https://twitter.com/intent/tweet?&amp;url={{ $url }}{{.Permalink}}&amp;text={{ .Title }}%20%40sporella" target="_blank" rel="noopener" aria-label="Share on Twitter" class="share-btn twitter">
          <i data-feather="twitter"></i>
          <p>Twitter</p>
          </a>
      </li>
      {{ end }}
      <!-- Facebook -->
      {{ if .Site.Params.social.share.facebook }}
      <li>
        <a href="https://www.facebook.com/sharer.php?u={{ $url }}{{.Permalink}}" target="_blank" rel="noopener" aria-label="Share on Facebook" class="share-btn facebook">
          <i data-feather="facebook"></i>
          <p>Facebook</p>
          </a>
      </li>
      {{ end }}

      <!-- LinkedIn -->
      {{ if .Site.Params.social.share.linkedin }}
      <li>
        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $url }}{{.Permalink}}&amp;source={{ $url }}&amp;title={{ $title }}&amp;summary={{ $title }}" target="_blank" rel="noopener" aria-label="Share on LinkedIn" class="share-btn linkedin">
          <i data-feather="linkedin"></i>
            <p>LinkedIn</p>
          </a>
      </li>
      {{ end }}
      
{{- end }}

2. Darle estilo a los íconos: En la misma carpeta, generar un archivo que se llame style.html en donde pondremos el código que define el estilo de los íconos. Este código contiene también el código original que trae mi tema, el cual se encuentra al principio.

<!-- codigo original del tema-->
<style>
.container {
  max-width: {{ .Site.Params.containerMaxWidth | default "700px" | safeCSS }};
}
#nav a {
  font-weight: bold;
  color: inherit;
}
#nav a.nav-link-active {
  background-color: #212529;
  color: #fff;
}
#nav-border {
  border-bottom: 1px solid #212529;
}
#main {
  margin-top: 1em;
  margin-bottom: 4em;
}
#home-jumbotron {
  background-color: inherit;
}
#footer .container {
  padding: 1em 0;
}
#footer a {
  color: inherit;
  text-decoration: underline;
}
.font-125 {
  font-size: 125%;
}
.tag-btn {
  margin-bottom: 0.3em;
}
pre {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
}
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit; 
  background-color: transparent;
  border-radius: 0;
}
code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}
img,
iframe,
embed,
video,
audio {
  max-width: 100%;
}
.card-img,
.card-img-top,
.card-img-bottom {
  width: initial;
}


<!-- codigo para darle estilo a los botones -->

.social-share {
    position: relative;
    top: -0.5em;
}
 
.social-share ul {
    margin: 0;
}
 
.social-share ul li p {
    display: none;
}
 
.social-share .share-icons li {
    padding: 0 !important;
    padding-bottom: 10px !important;
}
 
.social-share .share-btn {
    padding: 0.25em;
    width: 3em;
}
 
.social-share-nav .share-btn h3{
    color: #ffffff;
}

ul.share-icons {
    cursor: default;
    list-style: none;
    padding-left: 0;
    margin-top: 1em;
}

ul.share-icons li {
    display: inline-block;
    padding: 0 1em 0 0;
}

ul.share-icons li:last-child {
    padding-right: 0;
}

ul.share-icons li > * {
    text-decoration: none;
    border: 0;
}

ul.share-icons li > *:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

ul.share-icons li > * .label {
    display: none;
}
 
.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
    text-decoration: none;
}
 
.share-btn:hover {
    color: #343a40 !important;
}

.share-btn:active {
    position: relative;
    top: 2px;
    box-shadow: none;
    color: #e2e2e2;
    outline: none;
}
.share-btn .widget-social__link-icon {
    margin: 0;
}
 
.share-btn.twitter     { background: #343a40; }
.share-btn.facebook    { background: #343a40; }
.share-btn.linkedin    { background: #343a40; }


.share-btn.twitter:hover     { background: #ffffff; }
.share-btn.facebook:hover    { background: #ffffff; }
.share-btn.linkedin:hover    { background: #ffffff; }
    
</style>

3. Modificar archivo single.html: este archivo determina de qué forma se estructura el formato de la entrada del blog. En mi caso, lo podremos dentro de layouts/post e indica que pondrá:el título, luego la fecha y las etiquetas, luego el contenido. Y al final agregué “Compartir en:” y el código {{ partial "socialshare.html" . }}

No confundir el archivo post/single.html con el que se encuentra dentro de la carpeta _default, ya que este determina la estructura de las páginas que no son entradas del blog.

{{ define "main" }}

<h1>{{ .Title }}</h1>
{{ partial "date-and-tags.html" . }}
<br><br>
{{ .Content }}

<br><br>
<hr>

Compartir en: 
{{ partial "socialshare.html" . }}
{{ end }}

4. Modificar archivo config.toml y agregar lo siguiente:

[Params.social.share]
  facebook = true
  linkedin = true
  twitter = true

5. Modificar YAML en la entrada: ahora, cuando escribimos nuestras entradas, debemos poner socialshare: true dentro del YAML para que aparezcan los íconos. Por ejemplo, para escribir esta entrada yo puse lo siguiente:

---
title: Agregando utilidades al blog
author: Stephanie Orellana
date: '2020-10-12'
slug: agregando-utilidades-hugo
categories:
  - R
tags:
  - blogdown
  - R
  - LatinR
socialshare: true
---

¡Y ya puedes ver los enlaces para compartir!

Cosas a tener en consideración:

• Al elegir esta opción pensé en alguna entrada a futuro en la que quizás no quería poner los botones de compartir, por eso elegí poner esta opción de forma manual en cada una y porque tenía sólo tres entradas anteriores. Si tu blog tiene muchos posteos, sería más eficiente escribir un código para que los botones aparezcan por defecto.

• Revisar que todos los enlaces se generen de forma correcta y funcionen. Los códigos, en especial el del paso 1, pueden variar dependiendo del tema y otros ajustes que se tengan.

Sección de comentarios

Para poner la sección de comentarios seguí el tutorial de Maëlle Salmon para hacerlo mediante Utterances.

Utterances funciona utilizando los issues de GitHub, así que los requisitos fundamentales son:

• Tener el repositorio del sitio web alojado en GitHub

• El repositorio debe ser público para que las personas puedan interactuar mediante los issues

• Las personas deben verificarse mediante una cuenta de GitHub

• Debes tener instalado Utterances

Pasos:

1. Subir repositorio a GitHub

2. Instalar Utterances desde https://utteranc.es/#configuration

3. Agregar código html para cuadro de comentarios: este código lo copié desde la configuración de Utterances y debe ponerse dentro de la carpeta ~/layouts/partials. Yo nombré este archivo como comments.html

<script src="https://utteranc.es/client.js"
        repo="sporella/blog"
        issue-term="pathname"
        label="comment"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

3. Modificar archivo single.html: es el mismo que modificamos en el paso 3 de la sección anterior, el que se encuentra en ~/layouts/post. Debe quedar así:

{{ define "main" }}

<h1>{{ .Title }}</h1>
{{ partial "date-and-tags.html" . }}
<br><br>
{{ .Content }}

<br><br>
<hr>

Compartir en: 
{{ partial "socialshare.html" . }}
{{ partial "comments.html" . }}
{{ end }}

¡Y con esto ya puedes ver tu caja de comentarios!

Cosas a tener en consideración:

• Probar que la sección de comentarios funcione correctamente.

• Dejar un comentario de prueba.

Comentarios finales

Después de trabajar en estas mejoras, mi blog parece mucho más funcional y estoy muy entusiasmada para ver cómo funciona y recibir las primeras interacciones :)

Recomiendo mucho el tutorial de Maëlle y también el resto de las actividades que se realizaron en LatinR y que están en su canal de Youtube, el cual quedó como un muy buen repositorio de recursos en español, portugués e inglés para aprender sobre R.