Skip to main content

Modificación de tarjetas de inicio

Para modificar las tarjetas de inicio de la página web, debemos seguir los siguientes pasos:

  1. Acceder a la carpeta static/json y entrar en el archivo tarjetas.json.
  2. Dentro, encontraremos distintos objetos que representan las tarjetas de la página de inicio:
[
    {
      "title": "Tarjeta de ejemplo",
      "color": "pink",
      "Svg": "note35.svg",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.",
      "link": "/example",
      "title_en": "Example card",
      "description_en": "I'm translated!",
      "link_en": "/en/example"
    },
    ...
]
  1. Para modificar una tarjeta, debemos cambiar los valores de title, color, Svg, description y link, y si se desea, los valores de title_en, description_en y link_en para la versión en inglés. Los campos son los siguientes:
    • title: Título de la tarjeta.
    • color: Color de fondo de la tarjeta. Se pueden utilizar colores en formato hexadecimal (#716BBD), nombres de colores en inglés (blue) o utilizando rgb o rgba (rgb(255, 0, 0)/rgba(250,170,6,0.5)). Para conseguir hexadecimales de colores, se puede utilizar la herramienta HTML Color Codes.
    • Svg: Icono de la tarjeta. Se encuentran en la carpeta src/static/icons/svg y se pueden añadir nuevos iconos en formato SVG o utilizar los ya existentes simplemente poniendo el nombre del archivo.
    • description: Descripción de la tarjeta. Puede no utilizar ninguna escribiendo null (sin comillas) u omitiendo este campo.
    • link: Enlace al que se redirige al hacer clic en la tarjeta. Se pueden utilizar rutas internas como /about-us o links como www.example.com. Puede no utilizar ninguna escribiendo null (sin comillas) u omitiendo este campo.
    • title_en: Título de la tarjeta en inglés. Si no se desea traducir, puede escribir null (sin comillas) u omitir este campo. Si no se añade, se utilizará el valor de title.
    • description_en: Descripción de la tarjeta en inglés. Si no se desea traducir, puede escribir null (sin comillas) u omitir este campo. Si no se añade, se utilizará el valor de description.
    • link_en: Enlace al que se redirige al hacer clic en la tarjeta en inglés. Tiene su utilidad para los enlaces internos de la web, ya que todas las páginas en inglés tendrán una ruta de la forma /en/example. Si no se desea traducir, puede escribir null (sin comillas) u omitir este campo. Si no se añade, se utilizará el valor de link.
  2. Para añadir una tarjeta, debemos añadir un nuevo objeto al final del archivo con los campos title, color, Svg, description, link, y si se quiere añadir una versión en inglés, se pueden añadir los campos, title_en, description_en o link_en, de forma similar a los objetos ya existentes:
[
    ...
    {
      "title": "Nueva tarjeta",
      "color": "#007784",
      "Svg": "user82.svg",
      "description": "Descripción de la nueva tarjeta",
      "link": null,
      "title_en": "New card",
      "description_en": "I'm a new card description!",
      "link_en": null
    }
]
  1. Así debería quedar la tarjeta añadida: Example Image