13 KiB
weight | title | date | draft | summary | categories | tags | ||||
---|---|---|---|---|---|---|---|---|---|---|
4 | Migración de este blog a la última versión del tema FixIt | 2024-01-12T17:30:10+0100 | Apuntes de la migración del blog al nuevo FixIt |
|
|
Intro
Estos son los apuntes que he tomado cambiándo a la última versión del tema FixIt.
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
-
Nos creamos un repo en Github a partir del template que Lruihao (el autor del tema) ha publicado aqui.
-
Clonamos este nuevo repo en nuestro disco. Me he hecho copias de este template tanto en git.comacero.com como en mi gitlab
git clone --recursive https://github.com/salvari/newFixItgit
Para actualizar el tema en el futuro:
git submodule update --remote --merge themes/FixIt
-
Probamos el tema:
hsrv # hsrv: aliased to hugo --buildDrafts server --disableFastRender
-
Procedemos con la configuración
Configuración
Vamos a usar un directorio de configuración como se describe 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:
# -------------------------------------------------------------------------------------
# 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
.
# -------------------------------------------------------------------------------------
# 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.
# 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.
# 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.
# 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.
# 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.
# 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:
[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.
# -------------------------------------------------------------------------------------
# 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"