2.4 Temas
Un tema de Hugo es una colección de plantillas y archivos opcionales del sitio web, como archivos CSS y JavaScript. En pocas palabras, un tema define el aspecto de su sitio web después de que su contenido fuente se presente a través de las plantillas.
Hugo ha proporcionado una gran cantidad de temas aportados por los usuarios en https://themes.gohugo.io. A menos que sea un diseñador web experimentado, es mejor que comience desde un tema existente aquí. La calidad y la complejidad de estos temas varían mucho, y debe elegir uno con precaución. Por ejemplo, puede ver el número de estrellas de un repositorio de temas en GitHub, así como si el repositorio todavía está relativamente activo. No recomendamos utilizar un tema que no se haya actualizado durante más de un año.
En esta sección, explicaremos cómo funciona el tema predeterminado en blogdown, que también puede brindarle algunas ideas sobre cómo comenzar con otros temas.
2.4.1 El tema por defecto
El tema predeterminado en blogdown, hugo-lithium-theme, está alojado en GitHub en https://github.com/yihui/hugo-lithium-theme. Fue escrito originalmente por Jonathan Rutheiser, y he realizado varios cambios en él. Este tema es adecuado para quienes prefieren estilos mínimos y desean crear un sitio web con algunas páginas y algunas publicaciones en el blog.
Normalmente, un repositorio de temas en GitHub tiene un archivo README
, que también sirve como la documentación del tema. Después de leerlo, el siguiente archivo para buscar es config.toml
en el directorio exampleSite
, que contiene configuraciones de muestra para un sitio web basado en este tema. Si un tema no tiene un archivo README
oexampleSite
, probablemente no debería usarlo.
El config.toml
del tema hugo-lithium-theme contiene las siguientes opciones:
baseurl = "/"
relativeurls = false
languageCode = "en-us"
title = "A Hugo website"
theme = "hugo-lithium-theme"
googleAnalytics = ""
disqusShortname = ""
ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown", "_files$", "_cache$"]
[permalinks]
post = "/:year/:month/:day/:slug/"
[[menu.main]]
name = "About"
url = "/about/"
[[menu.main]]
name = "GitHub"
url = "https://github.com/rstudio/blogdown"
[[menu.main]]
name = "Twitter"
url = "https://twitter.com/rstudio"
[params]
description = "A website built through Hugo and blogdown."
highlightjsVersion = "9.11.0"
highlightjsCDN = "//cdn.bootcss.com"
highlightjsLang = ["r", "yaml"]
highlightjsTheme = "github"
MathJaxCDN = "//cdn.bootcss.com"
MathJaxVersion = "2.7.1"
[params.logo]
url = "logo.png"
width = 50
height = 50
alt = "Logo"
Algunas de estas opciones pueden ser obvias para comprender, y algunas pueden necesitar explicaciones:
baseurl
: Puede configurar esta opción después, después de tener un nombre de dominio para su sitio web. No olvide la barra inclinada.relativeurls
: Esto es opcional. Puede configurarlo comotrue
solo si tiene la intención de ver su sitio web localmente a través de su visor de archivos, por ejemplo, hacer doble clic en un archivo HTML y verlo en su navegador. Esta opción tiene como valor predeterminadofalse
en Hugo, y significa que su sitio web debe ser visto a través de un servidor web, por ejemplo,blogdown::serve_site()
ha proporcionado un servidor web local, por lo que puede obtener una vista previa localmente cuandorelativeurls = false
.title
: El título de su sitio web. Típicamente esto se muestra en la barra de título del buscador web o sobre una pestaña de página.theme
: El nombre del directorio del tema. Debe tener mucho cuidado al cambiar los temas, porque un tema puede ser drásticamente diferente de otro tema en términos de configuraciones. Es muy posible que un tema diferente no funcione con suconfig.toml
actual. De nuevo, debe leer la documentación de un tema para saber qué opciones son compatibles o requeridas.googleAnalytics
: El ID de seguimiento de Google Analytics (por ejemplo,UA-000000-2
). Puede inscribirse en https://analytics.google.com para obtener un IDde seguimiento.disqusShortname
: El ID de Disqus que creó durante el proceso de configuración de la cuenta en https://disqus.com. Esto es necesario para habilitar los comentarios en su sitio.23 Tenga en cuenta que debe configurar unbaseurl
funcional y publicar su sitio web antes de que los comentarios de Disqus pueda funcionar.ignoreFiles
ypermalinks
: Estas opciones han sido explicadas en la sección 2.2.2.menu
: Esta lista de opciones especifica el texto y la URL de los elementos del menú en la parte superior. Ver la figura 1.1 para una página de muestra. Puede cambiar o agregar más elementos de menú. Si desea ordenar los artículos, puede asignar unpeso
a cada artículo, e.g.,[[menu.main]] name = "Home" url = "/" weight = 1 [[menu.main]] name = "About" url = "/about/" weight = 2 [[menu.main]] name = "GitHub" url = "https://github.com/rstudio/blogdown" weight = 3 [[menu.main]] name = "CV" url = "/vitae/" weight = 4 [[menu.main]] name = "Twitter" url = "https://twitter.com/rstudio" weight = 5
En el ejemplo anterior, agregué un elemento de menú
CV
con la URL/vitae/
, y se supone que hay un archivo fuente correspondientevitae.md
debajo del directoriocontent/
para generar la página/vitae/index.html
, por lo que el enlace realmente funcionará.params
: Diversos parámetros del tema.description
: Una breve descripción de su sitio web. No es visible en las páginas web (solo puede verlo desde la fuente HTML), pero debe dar a los motores de búsqueda una pista sobre su sitio web.highlightjs*
: Estas opciones se usan para configurar las librerías de JavaScript highlight.js para resaltar la sintaxis de los bloques de código sobre las páginas web. Puede cambiar la versión (e.g.,9.12.0
), el hosto CND (e.g., usando cdnjs://cdnjs.cloudflare.com/ajax/libs
), agregar más lenguajes (e.g.,["r", "yaml", "tex"]
), y cambiar el tema (e.g.,atom-one-light
). Vea https://highlightjs.org/static/demo/ para todos los lenguajes y temas que highlight.js soporta.MathJax*
: La librería de JavaScript MathJax puede renderizar expresiones matemáticas en LaTeX sobre páginas web. De la misma forma quehighlightjsCDN
, puede especificar el host CDN de MathJax, e.g.,//cdnjs.cloudflare.com/ajax/libs
, y puede especificar la versión de MathJax.logo
: Una lista de opciones para definir el logo del sitio web. Por defecto, la imagenlogo.png
bajo el directoriostatic/
se usa.
Si quiere ser un desarrollador de temas y comprender completamente todos los detalles técnicos sobre estas opciones, debe comprender las plantillas de Hugo, que presentaremos en la sección 2.5.
Como mencionamos en la sección @ref(sitios estáticos), blogdown genera contenido estático e inmutable. Para agregar algo dinámico y siempre cambiante (como la posibilidad de que sus seguidores dejen comentarios), debe incorporar un sistema de comentarios externo como Disqus.↩