--- 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 --- ## Referencias - [Documentación de FixIt](https://fixit.lruihao.cn/categories/documentation/) ## 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 = 'CC BY-NC-SA 4.0' # 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" ``` ## Actualizaciones ### 2024-07-05 - Actualizado hugo a la versión v0.128.2 - Actualizado FixIt a la versión v0.3.8 - Busquedas con `lunr` dejan de funcionar, cambiamos a `fuse` - Actualizados los ficheros de configuración copiando del template