hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Añadiendo shields.io en tu README (o donde quieras)

100 palabras
1 minutos
July 21, 2020
blogjavascript

Para incluir badges que informen de la versión npm de tu paquete (por ejemplo) sólo necesitas introducir una imagen con una url específica

Shields.io

Para la gestión de librerías (paquetes) una de las cosas que hay que preparar es a la documentación

Y la documentación mínima es la del README, que al menos para github sirve como casi-página principal en cuanto miras la página en concreto (del paquete)

Por ejemplo si vas a uno de los themes de kuworking, por ejemplo este starter, lo que ves (aparte del explorador de archivos) es lo que tienes en el archivo README.md, donde el .md se refiere a que está en formato markdown (puedes explorar el formato markdown aquí)

Bien

Si te fijas en la segunda línea sale la versión de esa librería en npm, lo mismo que aquí abajo

ejemplo

Y esto cómo se añade?

Utilizando shields.io, que su página principal tiene una ristra de categorías para mostrar desde licencias hasta tamaños, o incluso el estado de las dependencias

Es clicar una categoría y ya tienes todos los ejemplos para esa categoría

El ejemplo de arriba:

js
// el funcionamiento general
const url = "https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>""
// la imagen en html (dentro de un componente de React)
const Image = () => (
<img
src="https://img.shields.io/npm/v/kuworking-theme-affiliate?style=flat-square"
alt="shield label"
/>
)
// la imagen en markdown
![npm](https://img.shields.io/npm/v/kuworking-theme-affiliate?style=flat-square)

Listos!

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]