Descargar hugo toigian - descarga del código fuente hugo toigian

hugo toigian

Otras categorias

1.0.0

Descargar

Hugo Toigián

Un tema minimalista de Hugo con Tailwind CSS

Toigian - Tối giản (vietnamita): Minimalista (inglés)
Descargo de responsabilidad : no soy un desarrollador front-end, solo un tipo al que le gusta modificar cosas, por lo que es posible que mi código no sea bonito/limpio. Intento aprender Tailwind CSS y el resultado es hugo-toigian.

0. escaparate
1. Características
2. Requisitos previos
3. Instalación
3. Configuración
- 3.1. Configuración del sitio
- 3.2. Configuración de página
4. Códigos cortos
5. Personalización
6. Contribuyendo
7. Créditos

0. escaparate

Estas capturas de pantalla pueden estar desactualizadas. Eche un vistazo al sitio de demostración para conocer las últimas novedades.

Oscuro	Luz

1. Características

Diseño minimalista ( tối giản ). Muy inspirado en mellow.dev.
Utilice la elegante paleta de colores minimalista Rosé Pine.
Personalizable.
Admite modo claro/oscuro.
Contadores anidados para rumbo.
Tabla de contenido flotante lateral.
Códigos cortos útiles.
Soporte de comentarios.
Resaltado de sintaxis: use la solución del lado del servidor (Chroma, hugo integrado), agregué estilos Rosé Pine a Chroma, para que todo tenga la misma vibra.

2. Requisitos previos

git , npm instalado.
Una versión mínima "extendida" de Hugo de v0.93.0 y superior.

snap install hugo --channel=extended

PostCSS de Hugo Pipe requiere que el paquete JavaScript postcss-cli esté instalado en el entorno ( npm install -g postcss postcss-cli ) junto con cualquier complemento PostCSS utilizado (por ejemplo, npm install -g autoprefixer ). Si está utilizando el paquete Hugo Snap, PostCSS y los complementos deben instalarse localmente dentro del directorio de su sitio Hugo, por ejemplo, npm install postcss-cli sin el indicador -g.

3. Instalación

Vaya al directorio raíz de su sitio web Hugo o cree un nuevo sitio con:

hugo new site hugo-example-site
cd hugo-example-site
git init

Añade el tema.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Instale los módulos de Nodejs.

 cd themes/hugo-toigian
npm install

Finalmente, actualice el tema en su archivo de configuración config.toml en el directorio raíz de su sitio web Hugo.

 theme = " hugo-toigian "

Ejecute el servidor para ver una vista previa en vivo del mismo.

hugo server -DF --disableFastRender

Construir páginas estáticas

hugo --environment production --minify

3. Configuración

3.1. Configuración del sitio

Hay algunas opciones de configuración que puede agregar al archivo config.toml.

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. Configuración de página

Puede especificar parámetros adicionales en la portada de páginas individuales.

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. Códigos cortos

Consulte los códigos cortos.

5. Personalización

Parciales: hay parciales de diseño disponibles para que pueda anular fácilmente los componentes del tema en layouts/partials/ .

vacío parcial	Colocación	Uso
`layouts/partials/custom/head.html`	Antes de cerrar la etiqueta `<head>`	Agregar css/js personalizado
`layouts/partials/custom/content-before.html`	Antes del contenido de la página
`layouts/partials/custom/content-after.html`	Después del contenido de la página
`layouts/partials/font.html`		Importar fuentes personalizadas

Personalización adicional:

Archivo	Descripción
`assets/css/custom.css`	Personalizar o anular estilos CSS

Por ejemplo, si no te gusta la fuente elegida (Inconsolata) y quieres usar tu propia elección, sigue estos pasos:

Crea layouts/partials/font.html para importar tus fuentes:

 <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>

Crear assets/css/custom.css :

 // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. Contribuyendo

Como ya sabes, no soy desarrollador front-end. Por lo tanto, si encuentra algún problema o desea mejorarlo, no dude en abrir una solicitud de edición o extracción.

Los objetivos principales son: