comacero_apuntes/content/posts/notes_general/notes_thisblog.md

---
weight: 4
title: "Migración de este blog a la última versión del tema FixIt"
date: 2024-01-12T17:30:10+0100
draft:
summary: "Apuntes de la migración del blog al nuevo FixIt"
categories:
- notes
tags:
- hugo
- blog
- FixIt
---

## Intro

Estos son los apuntes que he tomado cambiándo a la última versión del tema [_FixIt_](https://fixit.lruihao.cn/).

Al cambiar la versión del tema he aprovechado para pulir algunos pequeños errores y de momento lo dejo en un sólo idioma. Nunca conseguí tiempo para hacer las traducciones de los artículos.

## Instalación

1. Nos creamos un repo en Github a partir del template que Lruihao (el autor del tema) ha publicado [aqui](https://github.com/hugo-fixit/hugo-fixit-starter1/blob/main/README.en.md).

2. Clonamos este nuevo repo en nuestro disco. Me he hecho copias de este template tanto en [git.comacero.com](https://git.comacero.com) como en [mi gitlab](https://gitlab.com/salvari)

   ```bash
   git clone --recursive https://github.com/salvari/newFixItgit
   ```

   Para actualizar el tema en el futuro:

   ```bash
   git submodule update --remote --merge themes/FixIt
   ```

3. Probamos el tema:

   ```bash
   hsrv
   # hsrv: aliased to hugo --buildDrafts server --disableFastRender
   ```

4. Procedemos con la configuración


## Configuración

Vamos a usar un directorio de configuración como [se describe](https://gohugo.io/getting-started/configuration/#configuration-directory) en la documentación de Hugo.

### `config.toml`

En el directorio de configuración tenemos la configuración organizada en distintos ficheros. El primero que necesitamos es `config.toml` que queda con el siguiente contenido:

```toml {title="config.toml",hl_lines=["7-8","10-11"]}
# -------------------------------------------------------------------------------------
# Hugo Configuration
# See: https://gohugo.io/getting-started/configuration/
# -------------------------------------------------------------------------------------

# title = "Hugo FixIt Blog"
title = "comacero"
baseURL = "http://comacero.com/"
theme = "FixIt"
defaultContentLanguage = "es"
languageCode = "es"
hasCJKLanguage = true
enableRobotsTXT = true
enableEmoji = true
enableGitInfo = true
relativeURLs = false
buildDrafts = false
summaryLength = 150
# ignore some build errors
ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"]
```

### `params.toml`

A continuación configuramos el fichero `params.toml`

En la primera sección del fichero cambiamos sólo tres líneas, configurando la descripción y el tema por defecto. Y ademas desativamos (de momento) la opción `gitRepo`.

```toml{linenos=table,hl_lines=[9,13,15]}
# -------------------------------------------------------------------------------------
# Theme Core Configuration
# See: https://fixit.lruihao.cn/theme-documentation-basics/#site-configuration
# -------------------------------------------------------------------------------------

# FixIt 0.2.15 | CHANGED FixIt theme version
version = "0.2.X" # e.g. "0.2.X", "0.2.15", "v0.2.15" etc.
# site description
description = "Notas personales sobre hardware y software libres"
# site keywords
keywords = ["Hugo", "FixIt"]
# site default theme ["light", "dark", "auto"]
defaultTheme = "dark"
# public git repo url only then enableGitInfo is true
# gitRepo = ""
# FixIt 0.1.1 | NEW which hash function used for SRI, when empty, no SRI is used
# ["sha256", "sha384", "sha512", "md5"]
fingerprint = ""
# FixIt 0.2.0 | NEW date format
dateFormat = "2006-01-02"
# website images for Open Graph and Twitter Cards
images = []
# FixIt 0.2.12 | NEW enable PWA
enablePWA = false
# FixIt 0.2.14 | NEW whether to add external Icon for external links automatically
externalIcon = false
# FixIt 0.2.14 | NEW FixIt will, by default, inject a theme meta tag in the HTML head on the home page only.
# You can turn it off, but we would really appreciate if you don’t, as this is a good way to watch FixIt's popularity on the rise.
disableThemeInject = false

```

En las secciones siguientes (`app` y `search`) del fichero `params.toml` no cambiamos nada de momento. Aunque probablemente probemos con otros motores de búsqueda en el futuro.

```toml
# FixIt 0.2.0 | NEW App icon config
[app]
  # optional site title override for the app when added to an iOS home screen or Android launcher
  title = ""
  # whether to omit favicon resource links
  noFavicon = false
  # modern SVG favicon to use in place of older style .png and .ico files
  svgFavicon = ""
  # Safari mask icon color
  iconColor = "#5bbad5"
  # Windows v8-10 tile color
  tileColor = "#da532c"
  # FixIt 0.2.12 | CHANGED Android browser theme color
  [app.themeColor]
    light = "#f8f8f8"
    dark = "#252627"

# FixIt 0.2.0 | NEW Search config
[search]
  enable = true
  # type of search engine ["lunr", "algolia", "fuse"]
  type = "lunr"
  # max index length of the chunked content
  contentLength = 4000
  # placeholder of the search bar
  placeholder = "test"
  # FixIt 0.2.1 | NEW max number of results length
  maxResultLength = 10
  # FixIt 0.2.3 | NEW snippet length of the result
  snippetLength = 30
  # FixIt 0.2.1 | NEW HTML tag name of the highlight part in results
  highlightTag = "em"
  # FixIt 0.2.4 | NEW whether to use the absolute URL based on the baseURL in search index
  absoluteURL = false
  [search.algolia]
    index = ""
    appID = ""
    searchKey = ""
  [search.fuse]
    # FixIt 0.2.17 | NEW https://fusejs.io/api/options.html
    isCaseSensitive = false
    minMatchCharLength = 2
    findAllMatches = false
    location = 0
    threshold = 0.3
    distance = 100
    ignoreLocation = false
    useExtendedSearch = false
    ignoreFieldNorm = false
```

En la siguiente sección (`header`) si que hacemos cambios. Configuramos el logo, el nombre de la web. y el subtítulo que aparecerá en la cabecera.

Para configurar el logo tendremos que añadir el fichero `cerito.svg` en el directorio `assets/images`. Tendremos que crear ese directorio y copiar el fichero `cerito.svg` en el mismo.

```toml{linenos=table,linenostart=81,hl_lines=[10,12,22],}
# Header config
[header]
  # FixIt 0.2.13 | CHANGED desktop header mode ["sticky", "normal", "auto"]
  desktopMode = "sticky"
  # FixIt 0.2.13 | CHANGED mobile header mode ["sticky", "normal", "auto"]
  mobileMode = "auto"
  # FixIt 0.2.0 | NEW Header title config
  [header.title]
    # URL of the LOGO
    logo = "/images/cerito.svg"
    # title name
    name = "comacero"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = " "
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    # FixIt 0.2.5 | NEW whether to use typeit animation for title name
    typeit = false
  # FixIt 0.2.12 | NEW Header subtitle config
  [header.subtitle]
    # subtitle name
    name = "Notas sobre hardware y software libres"
    # whether to use typeit animation for subtitle name
    typeit = false

# FixIt 0.2.18 | NEW Breadcrumb config
[breadcrumb]
  enable = false
  sticky = false
  showHome = false
```


En la sección `footer` cambiamos sólo el parámetro _site creation year_.

```toml{linenos=table,linenostart=112,hl_lines=[14],}
# Footer config
[footer]
  enable = true
  # FixIt 0.2.17 | CHANGED Custom content (HTML format is supported)
  # For advanced use, see parameter `params.customFilePath.footer`
  custom = ""
  # FixIt 0.2.0 | NEW whether to show Hugo and theme info
  hugo = true
  # FixIt 0.2.0 | NEW whether to show copyright info
  copyright = true
  # FixIt 0.2.0 | NEW whether to show the author
  author = true
  # Site creation year
  since = 2019
  # FixIt 0.2.14 | NEW whether to show total word count of site content
  wordCount = true
  # FixIt 0.2.12 | NEW Public network security only in China (HTML format is supported)
  gov = ""
  # ICP info only in China (HTML format is supported)
  icp = ""
  # license info (HTML format is supported)
  license = '<a rel="license external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>'
  # FixIt 0.2.17 | CHANGED Site creation time
  # FixIt 0.2.17 | CHANGED Site creation time
  [footer.siteTime]
    enable = false
    animate = true
    icon = "fa-solid fa-heartbeat"
    pre = ""
    value = "" # e.g. "2021-12-18T16:15:22+08:00"
  # FixIt 0.2.17 | NEW footer lines order, optional values: ["first", 0, 1, 2, 3, 4, 5, "last"]
  [footer.order]
    powered = 0
    copyright = 0
    statistics = 0
    visitor = 0
    beian = 0
```

En las secciones `section`, `list` y `tagcloud` no hacemos cambios de momento.

```toml{linenos=table,linenostart=149}
# FixIt 0.2.0 | NEW Section (all posts) page config
[section]
  # special amount of posts in each section page
  paginate = 20
  # date format (month and day)
  dateFormat = "01-02"
  # amount of RSS pages
  rss = 10
  # FixIt 0.2.13 | NEW recently updated posts settings
  [section.recentlyUpdated]
    enable = false
    rss = false
    days = 30
    maxCount = 10

# FixIt 0.2.0 | NEW List (category or tag) page config
[list]
  # special amount of posts in each list page
  paginate = 20
  # date format (month and day)
  dateFormat = "01-02"
  # amount of RSS pages
  rss = 10

# FixIt 0.2.17 | NEW TagCloud config for tags page
[tagcloud]
  enable = false
  min = 14 # Minimum font size in px
  max = 32 # Maximum font size in px
  peakCount = 10 # Maximum count of posts per tag
  orderby = "name" # Order of tags, optional values: ["name", "count"]
```

En la seccion `home` hacemos los cambios marcados en el listado. Es **importante** borrar el correo del _gravatar_ para que el tema cargue la imagen que le pasamos.

```toml{linenos=table,linenostart=181,hl_lines=[9,11,17]}
# Home page config
[home]
  # FixIt 0.2.0 | NEW amount of RSS pages
  rss = 10
  # Home page profile
  [home.profile]
    enable = true
    # Gravatar Email for preferred avatar in home page
    gravatarEmail = ""
    # URL of avatar shown in home page
    avatarURL = "/images/cerito.svg"
    # FixIt 0.2.17 | NEW identifier of avatar menu link
    avatarMenu = ""
    # FixIt 0.2.7 | CHANGED title shown in home page (HTML format is supported)
    title = ""
    # subtitle shown in home page
    subtitle = "Apuntes personales de hardware y software libres"
    # whether to use typeit animation for subtitle
    typeit = true
    # whether to show social links
    social = true
    # FixIt 0.2.0 | NEW disclaimer (HTML format is supported)
    disclaimer = "Sólo para autoconsumo (^_^)"
  # Home page posts
  [home.posts]
    enable = true
    # special amount of posts in each home posts page
    paginate = 6
```

En la sección `social` puedes rellenar todas las RRSS que te apetezca que aparezcan en tu página. No voy a detallar todos los cambios pero pego la configuración para mastodon y gitea que, al menos en mi caso, es un poco especial:

```toml
[social.Mastodon]
  id = "@salvari"
  prefix = "https://mastodon.gal/"
  title = "Mastodon"
[social.gitea]
  id = "salvari"
  prefix = "https://git.comacero.com/"
  title = "Gitea"
```

Por el momento no hacemos más cambios en el fichero `params.toml`

### `menus.toml`

Editamos el fichero y lo dejamos con los cambios marcados en el listado a continuación.

```toml{linenos=table,hl_lines=[31,"47-66"]}
# -------------------------------------------------------------------------------------
# Menu Configuration
# See: https://fixit.lruihao.cn/theme-documentation-basics/#menu-advanced-configuration
# -------------------------------------------------------------------------------------

[[main]]
  identifier = "posts"
  # you can add extra information before the name (HTML format is supported), such as icons
  pre = ""
  # you can add extra information after the name (HTML format is supported), such as icons
  post = ""
  name = "Posts"
  url = "/posts/"
  # title will be shown when you hover on this menu link
  title = ""
  weight = 1
  # FixIt 0.2.14 | NEW add user-defined content to menu items
  [main.params]
    # add css class to a specific menu item
    class = ""
    # whether set as a draft menu item whose function is similar to a draft post/page
    draft = false
    # FixIt 0.2.16 | NEW add fontawesome icon to a specific menu item
    icon = "fa-solid fa-archive"
    # FixIt 0.2.16 | NEW set menu item type, optional values: ["mobile", "desktop"]
    type = ""
[[main]]
  identifier = "categories"
  pre = ""
  post = ""
  name = "Categorias"
  url = "/categories/"
  title = ""
  weight = 2
  [main.params]
    icon = "fa-solid fa-th"
[[main]]
  identifier = "tags"
  pre = ""
  post = ""
  name = "Etiquetas"
  url = "/tags/"
  title = ""
  weight = 3
  [main.params]
    icon = "fa-solid fa-tags"
[[main]]
  identifier = "links"
  pre = ""
  post = ""
  name = "Enlaces"
  url = "/links/"
  title = ""
  weight = 6
  [main.params]
    icon = "fa-solid fa-link"
[[main]]
  identifier = "about"
  pre = ""
  post = ""
  name = "Acerca de"
  url = "/about/"
  title = ""
  weight = 10
  [main.params]
    icon = "fa-solid fa-info-circle"
```