hugo theme fiber

Un tema de Hugo para los minimalistas. ¡Fibre utiliza un mínimo de JavaScript y CSS para que su sitio pueda cargarse más rápido! ¡También posee una interfaz de usuario limpia que es excelente para los ojos!

Tabla de contenido

• Instalación
  • Usando el submódulo
  • Descarga directa del tema
• Características
  • Listo para SEO
  • Códigos cortos
    • ASCIINema
    • ¿Puedo usar?
  • Haga clic para copiar el código
  • Hermosas notas
• Capturas de pantalla
• Configuración del tema
  • Listado de contenido en la página de inicio
    • Lista de blogs, notas, etc.
    • Listado de contenido personalizado
  • Resaltado de código
  • Elementos del menú
  • Título del sitio
• Escribir contenido
  • Escribir notas
  • Frontasunto

Instalación

Hay dos formas en que este tema podría usarse con cualquier sitio basado en Hugo.

1. Uso de submódulos de Git (recomendado)
2. Descargando el tema directamente a <hugo-site-root>/themes/

Usando el submódulo

1. Crea tu sitio usando hugo new site SITE_NAME
2. cd a SITE_NAME
3. Inicialice un repositorio de git: git init . Esto es necesario porque tenemos que agregar un submódulo git.
4. Agregue un submódulo ejecutando git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
5. Ahora, inicie el servidor Hugo localmente usando hugo serve

Si hay una actualización en el repositorio de temas, puede obtenerla usando git submodule update --remote

Descarga directa del tema

Utilice este método si no puede utilizar Git por algún motivo.

1. Descargue esto y extraiga su contenido a SITE_ROOT/themes/hugo-theme-fiber/ .
2. Inicie hugo localmente ejecutando hugo serve desde la terminal.

Características

Listo para SEO

Este tema está cargado con SEO básico y con datos JSON-LD mínimos de Schema.org.

Códigos cortos

Además de los códigos cortos listos para usar, tiene algunos otros códigos cortos útiles que a veces pueden resultar útiles.

ASCIINema

Incruste un elenco AsciiNema. Código corto a usar: {{< asciinema id="id of a public cast" >}}

¿Puedo usar?

Este shortcode muestra los datos más recientes del sitio web caniuse.com. Útil para desarrolladores web. Ejemplo:

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

Haga clic para copiar el código

Los visitantes del sitio web pueden copiar el contenido de cualquier bloque de código con un solo clic. ¡Esto no romperá las sangrías del código!

Hermosas notas

Todo lo que pongas dentro de content/notes recibirá anotaciones aproximadas. Esto hace que sea más fácil reconocer cosas importantes en las notas.

Las anotaciones preliminares se controlan mediante etiquetas como strong , em y strikethrough . Para generar una nueva entrada notes , primero debe crear el directorio content/notes . Luego use hugo new notes/file-name.md para generar una nota. Este archivo contendría información sobre cómo anotar cosas con las etiquetas mencionadas anteriormente.

Capturas de pantalla

Configuración del tema

Listado de contenido en la página de inicio

La página de inicio se puede configurar de dos maneras diferentes. Puede enumerar su sección favorita/más importante del directorio content .

O coloque contenido personalizado en su interior.

¡O puedes hacer ambas cosas! Asegúrese de crear un archivo content/_index.md que tenga un title de propiedad dentro de fromtmatter. Esta propiedad title es útil para SEO. Ejemplo:

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

Lista de blogs, notas, etc.

Para crear una lista de contenido en la página de inicio, debe configurar una variable llamada mainSections en el archivo config.toml . Ejemplo:

[ params ]
mainSections = [ " posts " ]

Listado de contenido personalizado

Para enumerar contenido personalizado, simplemente colóquelo dentro content/_index.md con el texto inicial adecuado.

Resaltado de código

Por defecto, Hugo no usaría ninguna clase. Pero esto no funcionaría para este tema ya que algunas de las características dependen de ello.

Necesita ejecutar clases para bloques de código. Así es como lo harías:

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

Elementos del menú

De forma predeterminada, solo hay un elemento de menú en el menú superior. Para agregar más elementos allí, es necesario definir elementos de menú dentro de config.toml . A continuación se muestra un ejemplo del config.toml de mi sitio:

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

Título del sitio

El título del sitio se controla mediante los siguientes parámetros en config.toml :

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

Escribir contenido

Escribir notas

Notes es un tipo especial codificado en este tema. Los contenidos de este tipo recibirían anotaciones aproximadas (lo que facilita la gestión de notas).

Genere una página de notas usando el comando hugo new notes/your-filename.md para aprender a usar anotaciones preliminares dentro de la página de notas.

Se incluye el arquetipo de notas amables.

Frontasunto

Este tema utiliza frontmatter para manejar la descripción de la publicación personalizada y la metaimagen para SEO. Si no puede encontrar meta.image y meta.description , recurrirá a /images/default-meta-image.png y .Summary respectivamente.

Utilice estos dos campos al frente de esta manera:

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->