3.3 KiB
3.3 KiB
title, intro, redirect_from, product, versions, topics
| title | intro | redirect_from | product | versions | topics | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Agregar un tema a tu sitio de Páginas de GitHub con Jekyll | Puedes personalizar tu sitio Jekyll agregando y personalizando un tema. |
|
{% data reusables.gated-features.pages %} |
|
|
Las personas con permisos de escritura para un repositorio pueden agregar un tema a un sitio de {% data variables.product.prodname_pages %} con Jekyll.
{% data reusables.pages.test-locally %}
Agregar un tema
{% data reusables.pages.navigate-site-repo %} {% data reusables.pages.navigate-publishing-source %} 2. Navega hasta _config.yml. {% data reusables.repositories.edit-file %} 4. Agrega una nueva línea al archivo para el nombre del tema.
- Para utilizar un tema compatible, teclea
theme: THEME-NAME, reemplazando THEME-NAME con el nombre del tema como se muestra en el archivo README del repositorio del tema. Para conocer la lista de temas compatibles, consulta "Temas compatibles" en el sitio de {% data variables.product.prodname_pages %}.
- Para usar cualquier otro tema de Jekyll alojado en {% data variables.product.prodname_dotcom %}, escribe
remote_theme: THEME-NAME, reemplazando THEME-NAME por el nombre del tema, tal como se muestra en el README del repositorio del tema.
{% data reusables.files.write_commit_message %}
{% data reusables.files.choose-commit-email %}
{% data reusables.files.choose_commit_branch %}
{% data reusables.files.propose_file_change %}
Personalizar el CSS de tu tema
{% data reusables.pages.best-with-supported-themes %}
{% data reusables.pages.theme-customization-help %}
{% data reusables.pages.navigate-site-repo %} {% data reusables.pages.navigate-publishing-source %}
- Crea un archivo nuevo denominado /assets/css/style.scss.
- Agrega el siguiente contenido en la parte superior del archivo:
---
---
@import "{{ site.theme }}";
- Agrega cualquier CSS o Sass personalizado que quieras (incluidas importaciones) inmediatamente después de la línea
@import.
Personalizar el diseño HTML de tu tema
{% data reusables.pages.best-with-supported-themes %}
{% data reusables.pages.theme-customization-help %}
- En {% data variables.product.prodname_dotcom %}, desplázate hasta el repositorio fuente de tu tema. Por ejemplo, el repositorio fuente para Minima es https://github.com/jekyll/minima.
- En la carpeta _layouts, desplázate hasta el archivo default.html de tu tema.
- Copia los contenidos del archivo. {% data reusables.pages.navigate-site-repo %} {% data reusables.pages.navigate-publishing-source %}
- Crea un archivo denominado _layouts/default.html.
- Pega el contenido del diseño personalizado que copiaste anteriormente.
- Personaliza el diseño como desees.