You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

407 lines
13 KiB

---
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 dont, 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"
```