Cómo Cargar Un Archivo CSS en Gin Framework

Nube Colectiva

hace 2 meses

Cómo Cargar Un Archivo CSS en Gin Framework

En esta página:

Cuando creamos un proyecto web con el framework Gin que esta basado en el lenguaje de programación Go.

Necesitamos agregarle una hoja de estilos CSS que nos permita aplicarle estilos, propiedades, reglas y más elementos a una página HTML.

En este tutorial te enseñaré a cómo cargar un archivo CSS en Gin Framework, vamos con ello.

Los archivos CSS permiten mejorar el aspecto visual de los elementos de una página web

Cargando el Proyecto con Gin Framework

Por ejemplo tengo el siguiente archivo llamado app.go con el código estándar para cargar solo una página HTML:


package main

// Importamos Gin Framework
import "github.com/gin-gonic/gin"

func main() {

	// Creamos una instancia de Gin Framework
	r := gin.Default()

	// Cargamos nuestra página HTML
	r.LoadHTMLFiles("templates/index.tmpl.html")

	// Ruta de la página
	r.GET("/nosotros", func(c *gin.Context) {
		c.HTML(200, "index.tmpl.html", gin.H{
			"titulo": "Nosotros", // Título de la página
		})
	})

	// Iniciamos el servidor de Gin (8080)
	r.Run()
}

package main

// Importamos Gin Framework

import "github.com/gin-gonic/gin"

func main() {

// Creamos una instancia de Gin Framework

r := gin.Default()

// Cargamos nuestra página HTML

r.LoadHTMLFiles("templates/index.tmpl.html")

// Ruta de la página

r.GET("/nosotros", func(c *gin.Context) {

c.HTML(200, "index.tmpl.html", gin.H{

"titulo": "Nosotros", // Título de la página

})

// Iniciamos el servidor de Gin (8080)

r.Run()

}

Fijate en el código anterior que la ruta de la página es /nosotros

La forma de cargar un archivo CSS que te mostraré a continuación te servirá para una ruta personalizada como “/nosotros” o para la ruta principal que seria solo “/”.

Por defecto Gin Framework usa el puerto 8080 para cargar la página HTML.

Si ejecutamos el servidor de Gin Framework y nos dirigimos a la ruta local http://localhost:8080/nosotros

Podemos ver que la página HTML carga sin problemas:

Podemos agregarle diferentes elementos HTML a nuestra página web

En la imagen anterior puedes ver que la página web carga sin problemas, pero aún no le hemos agregado estilos CSS.

Cargando un Archivo CSS en Gin Framework

Para poder cargar nuestro archivo CSS debemos crear un directorio para nuestras hojas de estilos CSS.

Creamos el directorio static en el directorio principal de nuestro proyecto, dentro de él creamos un directorio con el nombre css y dentro de él creamos un archivo llamado estilos.css:


/gin-proyecto
├── /static
    ├── /css
        ├── estilos.css // Crea este archivo CSS
├── /templates
    ├── index.tmpl.html 
├── app.go 
├── README.md

/gin-proyecto

├── /static

├── /css

├── estilos.css // Crea este archivo CSS

├── /templates

├── index.tmpl.html

├── app.go

├── README.md

Tú le puedes poner el nombre que desees a tu archivo CSS.

Paso seguido en la función principal o main() hay que agregar la línea de código: r.Static(“/static”, “./static/”)

Esta línea de código nos permite cargar los archivos de nuestro directorio static:


package main

// Importamos Gin Framework
import "github.com/gin-gonic/gin"

func main() {

	// Creamos una instancia de Gin Framework
	r := gin.Default()

	// Cargamos nuestra página HTML
	r.LoadHTMLFiles("templates/index.tmpl.html")
	r.Static("/static", "./static/") // Cargamos el directorio 'static'

	// Ruta de la página
	r.GET("/nosotros", func(c *gin.Context) {
		c.HTML(200, "index.tmpl.html", gin.H{
			"titulo": "Nosotros", // Título de la página
		})
	})

	// Iniciamos el servidor de Gin (8080)
	r.Run()
}

package main

// Importamos Gin Framework

import "github.com/gin-gonic/gin"

func main() {

// Creamos una instancia de Gin Framework

r := gin.Default()

// Cargamos nuestra página HTML

r.LoadHTMLFiles("templates/index.tmpl.html")

r.Static("/static", "./static/") // Cargamos el directorio 'static'

// Ruta de la página

r.GET("/nosotros", func(c *gin.Context) {

c.HTML(200, "index.tmpl.html", gin.H{

"titulo": "Nosotros", // Título de la página

})

// Iniciamos el servidor de Gin (8080)

r.Run()

}

Con ello estamos llamando a los archivos que están dentro del directorio CSS.

Sigue los pasos tal cual como te indico, para que todo salga bien.

Por último en el archivo HTML de la página, debemos instanciar el archivo CSS llamado estilos.css de la manera habitual:


<!DOCTYPE html>
<head>

    <title>{{ .titulo }}</title>

    <!-- Instanciamos el archivo CSS -->
    <link rel="stylesheet" href="static/css/estilos.css">

</head>

<body>

  <div class="contenedor">

    <h1>Nosotros</h1>
    <p>En esta sección encontrarás información sobre Nosotros.</p>

    <h2>Misión</h2>
    <p>Nuestra misión es la de ofrecer las mejores tortas de chocolate.</p>

    <h2>Visión</h2>
    <p>Nuestra visión es ser la mejor panadería de la región.</p>

    <h2>Objetivo</h2>
    <p>Fomentar la preparación de tortas en la región</p>

  </div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>{{ .titulo }}</title>

</head>

<body>

<h1>Nosotros</h1>

<p>En esta sección encontrarás información sobre Nosotros.</p>

<h2>Misión</h2>

<p>Nuestra misión es la de ofrecer las mejores tortas de chocolate.</p>

<h2>Visión</h2>

<p>Nuestra visión es ser la mejor panadería de la región.</p>

<h2>Objetivo</h2>

<p>Fomentar la preparación de tortas en la región</p>

</div>

</body>

</html>

A continuación te comparto todo el código del archivo estilos.css:


.contenedor {
   background-color: #ebebeb;
   padding: 20px;
}

h1 {
   font-size: 20px;
   color: #4169e1;
}

h2 {
   font-size: 15px;
   color: #006400;
}

.contenedor {

background-color: #ebebeb;

padding: 20px;

}

h1 {

font-size: 20px;

color: #4169e1;

}

h2 {

font-size: 15px;

color: #006400;

}

Si detenemos y volvemos ejecutamos el servidor de Gin Framework y nos dirigimos a la ruta local http://localhost:8080/nosotros

Podemos ver que la página HTML carga sin problemas con el archivo CSS y los estilos determinados:

Le estamos aplicando propiedades CSS a los elementos de la página web

Así de fácil puedes cargar uno o varios archivos CSS en el framework Gin.

Aprende a Como Pasar Parámetros En Rutas En Gin Framework.

Conclusión

En este tutorial, has aprendido a cómo cargar un archivo CSS en Gin Framework.

Te permitirá cargar varios archivos CSS en tu proyecto.

Practica y practica mucho, solo así dominará por completo Gin Framework.

Nota (s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.