Migración De Este Blog a La Última Versión Del Tema FixIt

2024-01-12 2024-07-05 Aproximadamente 2200 palabras 11 minutos

Contenido

Referencias

Documentación de 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
1

git clone --recursive https://github.com/salvari/newFixItgit
Para actualizar el tema en el futuro:
1

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

Probamos el tema:

1
2


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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# -------------------------------------------------------------------------------------
# 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


# -------------------------------------------------------------------------------------
# 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


# 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.

 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110


# 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.

112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148


# 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.

149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179


# 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.

181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208


# 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:

1
2
3
4
5
6
7
8


[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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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