Básicamente Basic es un tema de Jekyll pensado como sustituto del Minima predeterminado, con algunas mejoras incluidas por si acaso:
Si está ejecutando Jekyll v3.5+ y es autohospedado, puede instalar rápidamente el tema como una gema Ruby. Si aloja GitHub Pages, puede instalarlo como un tema remoto o copiar directamente todos los archivos del tema (consulte la estructura a continuación) en su proyecto.
Agregue esta línea al Gemfile
de su sitio Jekyll:
gem "jekyll-theme-basically-basic"
Agregue esta línea al archivo _config.yml
de su sitio Jekyll:
theme : jekyll-theme-basically-basic
Luego ejecute Bundler para instalar la gema del tema y las dependencias:
bundle install
GitHub Pages ha agregado soporte completo para cualquier tema alojado en GitHub.
Reemplace gem "jekyll"
con:
gem "github-pages" , group : :jekyll_plugins
Ejecute bundle update
y verifique que todas las gemas se instalen correctamente.
Agregue remote_theme: "mmistakes/[email protected]"
a su archivo _config.yml
. Elimine cualquier otro theme:
o remote_theme:
entradas.
Nota: Su sitio Jekyll debería poder verse inmediatamente en http://USERNAME.github.io. Si no es así, puede forzar una reconstrucción personalizando su sitio (consulte a continuación para obtener más detalles).
Si aloja varios sitios basados en Jekyll con el mismo nombre de usuario de GitHub, tendrá que utilizar páginas de proyecto en lugar de páginas de usuario. Básicamente, cambia el nombre del repositorio a otro que no sea USERNAME.github.io y crea una rama gh-pages
fuera de master
. Para obtener más detalles sobre cómo configurar las cosas, consulte la documentación de GitHub.
Si bifurcó o descargó el repositorio jekyll-theme-basically-basic
puede eliminar de forma segura los siguientes archivos y carpetas:
.editorconfig
.gitattributes
.github
.scss-lint.yml
CHANGELOG.md
jekyll-theme-basically-basic.gemspec
LICENSE
Rakefile
README.md
screenshot.png
/docs
/example
Si está utilizando Ruby Gem o versiones remotas de Basic Basic, la actualización es bastante sencilla.
Para comprobar qué versión está utilizando actualmente, vea el código fuente de su sitio creado y debería hacer algo similar a:
<!--
Basically Basic Jekyll Theme 1.4.5
Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE
-->
En la parte superior de cada archivo .html
, /assets/css/main.css
y /assets/js/main.js
.
Simplemente ejecute bundle update
si está usando Bundler (tiene un Gemfile
) o gem update jekyll-theme-basically-basic
si no lo está.
Verifique que tenga la última versión asignada en _config.yml
remote_theme: "mmistakes/[email protected]"
Nota: Si se omite @xxx
, se utilizará la rama master
actual del tema. Se recomienda "bloquear" remote_theme
en una versión específica para evitar introducir cambios importantes en su sitio.
El siguiente paso requiere reconstruir su sitio de páginas de GitHub para que pueda obtener las últimas actualizaciones del tema. Esto se puede lograr impulsando un compromiso en su repositorio de GitHub.
Una confirmación vacía también hará el trabajo si no tienes nada que impulsar en este momento:
git commit --allow-empty -m "Force rebuild of site"
Si desea aprovechar al máximo el flujo de trabajo de Jekyll + GitHub Pages, deberá utilizar Git. Para desplegar actualizaciones de temas, primero debe asegurarse de que haya un control remoto ascendente. Si bifurcaste el repositorio del tema, entonces probablemente estés listo.
Para volver a verificar, ejecute git remote -v
y verifique que pueda recuperar desde origin https://github.com/mmistakes/jekyll-theme-basically-basic.git
.
Para agregarlo puedes hacer lo siguiente:
git remote add upstream https://github.com/mmistakes/jekyll-theme-basically-basic.git
Ahora puedes extraer cualquier confirmación realizada en la rama master
del tema con:
git pull upstream master
Dependiendo de la cantidad de personalizaciones que hayas realizado después de la bifurcación, es probable que haya conflictos de fusión. Resuelva los archivos conflictivos que Git marca, prepare los cambios que desea conservar y luego confírmelos.
Otra forma de lidiar con las actualizaciones es descargar el tema, reemplazando manualmente sus diseños, inclusiones y recursos con los más nuevos. Para asegurarse de no perderse ningún cambio, probablemente sea una buena idea revisar el historial de confirmaciones del tema para ver qué ha cambiado desde entonces.
Aquí hay una lista de verificación rápida de las carpetas/archivos importantes que querrá tener en cuenta:
Nombre | |
---|---|
_layouts | Reemplace todo. Aplique ediciones si personalizó algún diseño. |
_includes | Reemplace todo. Aplique ediciones si personalizó alguna inclusión. |
assets | Reemplace todo. Aplique ediciones si personalizó hojas de estilo o scripts. |
_sass | Reemplace todo. Aplique ediciones si personalizó los parciales de Sass. |
_data/theme.yml | Seguro de conservar. Verificar que no hubo cambios o adiciones estructurales importantes. |
_config.yml | Seguro de conservar. Verificar que no hubo cambios o adiciones estructurales importantes. |
Nota: Si no ve la última versión, asegúrese de vaciar las cachés del navegador y de la CDN. Dependiendo de su entorno de alojamiento, es posible que se almacenen en caché versiones anteriores de /assets/css/main.css
, /assets/js/main.js
o *.html
.
Los diseños, las inclusiones, los parciales de Sass y los archivos de datos se colocan en sus ubicaciones predeterminadas. Hojas de estilo y scripts en assets
y algunos archivos relacionados con el desarrollo en el directorio raíz del proyecto.
Tenga en cuenta: si instaló Basic Basic mediante el método Ruby Gem, faltarán los archivos de temas que se encuentran en /_layouts
, /_includes
, /_sass
y /assets
. Esto es normal ya que vienen incluidos con la gema jekyll-theme-basically-basic
.
jekyll-theme-basically-basic
├── _data # data files
| └── theme.yml # theme settings and custom text
├── _includes # theme includes and SVG icons
├── _layouts # theme layouts (see below for details)
├── _sass # Sass partials
├── assets
| ├── javascripts
| | └── main.js
| └── stylesheets
| └── main.scss
├── _config.yml # sample configuration
└── index.md # sample home page (all posts/not paginated)
Después de crear un Gemfile
e instalar el tema, necesitarás agregar y editar los siguientes archivos:
_config.yml
/_data/theme.yml
index.md
Nota: Consulte la documentación de paginación a continuación para obtener instrucciones sobre cómo habilitarla para la página de inicio.
jekyll new
Usar el jekyll new
lo pondrá en funcionamiento más rápido.
Edite _config.yml
y cree _data/theme.yml
como se indicó anteriormente y estará listo.
La configuración de los elementos de todo el sitio ( lang
, title
, description
, logo
, author
, etc.) se realiza en _config.yml
de su proyecto. Consulte la configuración de ejemplo en este repositorio para obtener referencia adicional.
Descripción | |
---|---|
lang | Se utiliza para indicar el idioma del texto (p. ej., en-US, en-GB, fr) |
title | El título de su sitio (por ejemplo, Sitio impresionante de Dungan) |
description | Breve descripción del sitio (p. ej., un blog sobre puré de saltamontes) |
url | La URL completa de su sitio (por ejemplo, https://groverloaf.org) |
author | Información global del autor (ver más abajo) |
logo | Ruta a un logotipo para todo el sitio ~100x100px (p. ej., /assets/your-company-logo.png) |
twitter_username | Nombre de usuario de Twitter en todo el sitio, utilizado como enlace en la barra lateral |
github_username | Nombre de usuario de GitHub en todo el sitio, utilizado como enlace en la barra lateral |
Para obtener más opciones de configuración, asegúrese de consultar la documentación de: jekyll-seo-tag , jekyll-feed , jekyll-paginate y jekyll-sitemap .
Este tema viene en seis aspectos diferentes (variaciones de color). Para cambiar máscaras, agregue uno de los siguientes a su archivo /_data/theme.yml
:
skin: default | skin: night | skin: plum |
---|---|---|
skin: sea | skin: soft | skin: steel |
---|---|---|
Este tema le permite utilizar fácilmente Google Fonts en todo el tema. Simplemente agregue lo siguiente a su /_data/theme.yml
, reemplazando el name
de la fuente y weights
en consecuencia.
google_fonts :
- name : " Fira Sans "
weights : " 400,400i,600,600i "
- name : " Fira Sans Condensed "
Para cambiar el texto que se encuentra en todo el tema, agregue lo siguiente a su archivo /_data/theme.yml
y personalícelo según sea necesario.
t :
skip_links : " Skip links "
skip_primary_nav : " Skip to primary navigation "
skip_content : " Skip to content "
skip_footer : " Skip to footer "
menu : " Menu "
search : " Search "
site_search : " Site Search "
results_found : " Result(s) found "
search_placeholder_text : " Enter your search term... "
home : " Home "
newer : " Newer "
older : " Older "
email : " Email "
subscribe : " Subscribe "
read_more : " Read More "
posts : " Posts "
page : " Page "
of : " of "
min_read : " min read "
present : " Present "
cv_awards : " Awards "
cv_summary_contact : " Contact "
cv_summary_contact_email : " Email "
cv_summary_contact_phone : " Phone "
cv_summary_contact_website : " Website "
cv_location : " Location "
cv_education : " Education "
cv_education_courses : " Courses "
cv_interests : " Interests "
cv_languages : " Languages "
cv_publications : " Publications "
cv_references : " References "
cv_skills : " Skills "
cv_volunteer : " Volunteer "
cv_work : " Work "
De forma predeterminada, todas las páginas internas con un title
se agregarán al menú "fuera del lienzo". Para un control y clasificación más granulares de estos enlaces de menú:
Cree una lista personalizada para anular la configuración predeterminada agregando una matriz de navigation_pages
a su archivo /_data/theme.yml
.
Agregue rutas de páginas sin formato en el orden que desee:
navigation_pages :
- about.md
- cv.md
El título y la URL de cada enlace del menú se completarán según su title
y permalink
respectivamente.
Divida la lista principal de publicaciones en listas más pequeñas y muéstrelas en varias páginas habilitando la paginación.
Incluya el complemento jekyll-paginate
en su Gemfile
.
group :jekyll_plugins do
gem "jekyll-paginate"
end
Agregue jekyll-paginate
a la matriz gems
en su archivo _config.yml
y la siguiente configuración de paginación:
paginate : 5 # amount of posts to show per page
paginate_path : /page:num/
Cree index.html
(o cambie el nombre de index.md
) en la raíz de su proyecto y agregue el siguiente texto frontal:
layout : home
paginate : true
Para habilitar la búsqueda en todo el sitio, agregue search: true
a su _config.yml
.
La búsqueda predeterminada utiliza Lunr para crear un índice de búsqueda de todos sus documentos. Este método es 100% compatible con sitios alojados en GitHub Pages.
Nota: Solo las primeras 50 palabras del contenido del cuerpo de una publicación o página se agregan al índice de búsqueda de Lunr. Configurar search_full_content
en true
en su _config.yml
anulará esto y podría afectar el rendimiento de carga de la página.
Para una búsqueda más rápida y relevante (ver demostración):
Agregue la gema jekyll-algolia
a su Gemfile
, en la sección :jekyll_plugins
.
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
gem "jekyll-algolia"
end
Una vez hecho esto, descargue todas las dependencias ejecutando bundle install
.
Cambie los proveedores de búsqueda de lunr
a algolia
en su archivo _config.yml
:
search_provider : algolia
Agregue las siguientes credenciales de Algolia a su archivo _config.yml
. Si no tiene una cuenta de Algolia, puede abrir un plan comunitario gratuito. Una vez que haya iniciado sesión, podrá obtener sus credenciales desde su panel de control.
algolia :
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key : # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), false
Una vez que sus credenciales estén configuradas, puede ejecutar la indexación con el siguiente comando:
ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia
Para los usuarios de Windows, deberá utilizar set
para asignar la variable de entorno ALGOLIA_API_KEY
.
set ALGOLIA_API_KEY=your_admin_api_key
bundle exec jekyll algolia
Tenga en cuenta que ALGOLIA_API_KEY
debe configurarse en su clave API de administrador.
Para utilizar la búsqueda de Algolia con sitios alojados en GitHub Pages, siga esta guía de implementación. O esta guía para implementar en Netlify.
Nota: El complemento Jekyll Algolia se puede configurar de varias maneras. Asegúrese de consultar su documentación completa sobre cómo excluir archivos y otras configuraciones valiosas.
La información del autor se utiliza como metadatos para publicaciones "por líneas" y propaga el campo creator
de las tarjetas de resumen de Twitter con el siguiente texto frontal en _config.yml
:
author :
name : John Doe
twitter : johndoetwitter
picture : /assets/images/johndoe.png
La información del autor de todo el sitio se puede anular en la portada de un documento de la misma manera:
author :
name : Jane Doe
twitter : janedoetwitter
picture : /assets/images/janedoe.png
O especificando una clave correspondiente en la portada del documento, que existe en site.data.authors
. Por ejemplo, tiene lo siguiente en la portada del documento:
author : megaman
Y tienes lo siguiente en _data/authors.yml
:
megaman :
name : Mega Man
twitter : megamantwitter
picture : /assets/images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /assets/images/drlight.png
Actualmente, author.picture
solo se usa en layout: about
. El tamaño recomendado es 300 x 300
píxeles.
Para habilitar el recuento de tiempo de lectura, agregue read_time: true
a la portada YAML de una publicación o página.
Opcionalmente, si tienes una cuenta de Disqus, puedes mostrar una sección de comentarios debajo de cada publicación.
Para habilitar los comentarios de Disqus, agregue su nombre corto de Disqus al archivo _config.yml
de su proyecto:
disqus :
shortname : my_disqus_shortname
Los comentarios están habilitados de forma predeterminada y solo aparecerán en producción cuando se creen con el siguiente valor de entorno: JEKYLL_ENV=production
Si no desea mostrar comentarios para una publicación en particular, puede deshabilitarlos agregando comments: false
al inicio de esa publicación.
Para habilitar Google Analytics, agregue su ID de seguimiento a _config.yml
así:
google_analytics : UA-NNNNNNNN-N
De manera similar a los comentarios, el script de seguimiento de Google Analytics solo aparecerá en producción cuando se utilice el siguiente valor de entorno: JEKYLL_ENV=production
.
De forma predeterminada, la línea de derechos de autor en el pie de página muestra el año actual (en el momento de la creación) seguido del título de su sitio. por ejemplo © 2018 Basically Basic.
Si desea cambiar esto, agregue copyright
a su archivo _config.yml
con el texto apropiado:
copyright : " My custom copyright. "
Este tema proporciona los siguientes diseños, que puede usar configurando el layout
Portada en cada página, así:
---
layout : name
---
layout: default
Este diseño maneja toda la estructura básica de la página colocando el contenido de la página entre los elementos del encabezado y el pie de página. Todos los demás diseños heredan este y brindan estilos y características adicionales dentro del bloque {{ content }}
.
layout: post
Este diseño se adapta a lo siguiente:
# optional alternate title to replace page.title at the top of the page
alt_title : " Basically Basic "
# optional sub-title below the page title
sub_title : " The name says it all "
# optional intro text below titles, Markdown allowed
introduction : |
Basically Basic is a Jekyll theme meant to be a substitute for the default --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
# optional call to action links
actions :
- label : " Learn More "
icon : github # references name of svg icon, see full list below
url : " http://url-goes-here.com "
- label : " Download "
icon : download # references name of svg icon, see full list below
url : " http://url-goes-here.com "
image : # URL to a hero image associated with the post (e.g., /assets/page-pic.jpg)
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
twitter : johndoetwitter
comments : false # disable comments on this post
Nota: Las imágenes destacadas se pueden superponer con un color "acento" transparente para unificarlas con la paleta del tema. Para habilitarlo, personalice el CSS con la siguiente anulación de variable Sass:
$intro-image-color-overlay : true;
layout: page
Visualmente, este diseño se ve y actúa igual que layout: post
, con dos diferencias menores.
layout: home
Este diseño incluye el mismo texto frontal que layout: page
, con la adición de lo siguiente:
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), grid
De forma predeterminada, las publicaciones se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página.
layout: posts
Este diseño muestra todas las publicaciones agrupadas por año de publicación. Tiene la misma portada que layout: page
.
De forma predeterminada, las publicaciones se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página.
layout: categories
Este diseño muestra todas las publicaciones agrupadas por categoría. Tiene la misma portada que layout: page
.
De forma predeterminada, las publicaciones se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página.
layout: tags
Este diseño muestra todas las publicaciones agrupadas por etiqueta. Tiene la misma portada que layout: page
.
De forma predeterminada, las publicaciones se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página.
layout: collection
Este diseño muestra todos los documentos agrupados por una colección específica. Tiene la misma portada que layout: page
con la adición de lo siguiente:
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse
Para crear una página que muestre todos los documentos en la colección recipes
, crearía recipes.md
en la raíz de su proyecto y agregaría este tema inicial:
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes
De forma predeterminada, los documentos se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página. Si desea ordenar la colección por título, agregue sort_by: title
. Si desea realizar una ordenación inversa, agregue sort_order: reverse
.
layout: category
Este diseño muestra todas las publicaciones agrupadas por una categoría específica. Tiene la misma portada que layout: page
con la adición de lo siguiente:
taxonomy : # category name
entries_layout : # list (default), grid
De forma predeterminada, las publicaciones se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página.
Para crear una página que muestre todas las publicaciones asignadas a la categoría foo
crearías foo.md
en la raíz de tu proyecto y agregarías esta portada:
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foo
layout: tag
Este diseño muestra todas las publicaciones agrupadas por una etiqueta específica. Tiene la misma portada que layout: page
con la adición de lo siguiente:
taxonomy : # tag name
entries_layout : # list (default), grid
De forma predeterminada, las publicaciones se muestran en una vista de lista. Para cambiar a una vista de cuadrícula, agregue entries_layout: grid
al inicio de la página.
Para crear una página que muestre todas las publicaciones asignadas a la etiqueta foo bar
crearías foo-bar.md
en la raíz de tu proyecto y agregarías esta portada:
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo bar
layout: about
Este diseño incluye la misma portada que layout: page
, con la adición de lo siguiente para mostrar una imagen del autor:
author :
name : John Doe
picture : /assets/images/johndoe.png
El tamaño picture
recomendado es de aproximadamente 300 x 300
píxeles. Si el objeto author
no se establece explícitamente en la portada de la página Acerca de, el tema adoptará de forma predeterminada el valor establecido en _config.yml
.
Si está en blanco, no aparecerá ninguna imagen.
layout: cv
Este diseño se adapta a la misma portada que layout: page
. Aprovecha un estándar de archivos basado en JSON para los datos del currículum y así representar cómodamente un currículum vitae o un currículum sin complicaciones.
Simplemente use el generador de currículums en el navegador de JSON Resume para exportar un archivo JSON y guardarlo en su proyecto como _data/cv.json
.
Los tamaños de imagen sugeridos en píxeles son los siguientes:
Imagen | Descripción | Tamaño |
---|---|---|
page.image.path | Imagen de documento grande de ancho completo. | Las imágenes altas empujarán el contenido hacia abajo en la página. 1600 x 600 es un buen tamaño medio al que aspirar. |
page.image | Abreviatura de page.image.path cuando se usa solo (sin thumbnail , caption u otras variables). | Igual que page.image.path |
page.image.thumbnail | Imagen de documento pequeño utilizada en vista de cuadrícula. | 400 x 200 |
author.picture | Imagen de la página del autor. | 300 x 300 |
La estructura, el estilo y los scripts predeterminados de este tema se pueden anular y personalizar de las dos formas siguientes.
Los valores predeterminados del tema se pueden anular colocando un archivo con el mismo nombre en el directorio _includes
o _layouts
de su proyecto. Por ejemplo:
_includes/head.html
, cree un directorio _includes
en su proyecto, copie _includes/head.html
de la carpeta de gemas de Basic Basic a <your_project>/_includes
y comience a editar ese archivo. Consejo profesional: para localizar los archivos del tema en su computadora, ejecute bundle info jekyll-theme-basically-basic
. Esto devuelve la ubicación de los archivos del tema basado en gemas.
Para anular el Sass predeterminado (ubicado en el directorio _sass
del tema), realice una de las siguientes acciones:
Copie directamente desde la gema Básicamente Básica
bundle info jekyll-theme-basically-basic
para obtener la ruta)./assets/stylesheets/main.scss
desde allí a <your_project>
.<your_project>/assets/stylesheets/main.scss
.Copiar de este repositorio.
<your_project>
.<your_project/assets/stylesheets/main.scss
. Nota: Para realizar cambios más extensos y personalizar los parciales de Sass incluidos en la gema. Deberá copiar el contenido completo del directorio _sass
a <your_project>
debido a la forma en que Jekyll lee actualmente esos archivos.
Para realizar ajustes básicos al estilo del tema, las variables Sass se pueden anular agregándolas a <your_project>/assets/stylesheets/main.scss
. Por ejemplo, para cambiar el color de acento utilizado en todo el tema, agregue lo siguiente:
$accent-color : red ;
Para anular el JavaScript predeterminado incluido en el tema, realice una de las siguientes acciones:
Copie directamente desde la gema Básicamente Básica
bundle info jekyll-theme-basically-basic
para obtener la ruta)./assets/javascripts/main.js
desde allí a <your_project>
.<your_project>/assets/javascripts/main.js
.Copiar de este repositorio.
<your_project>
.<your_project>/assets/javascripts/main.js
. El tema utiliza logotipos de redes sociales y otra iconografía guardada como SVG para mayor rendimiento y flexibilidad. Dichos SVG se encuentran en el directorio _includes
y tienen el prefijo icon-
. Cada ícono ha sido dimensionado y diseñado para caber en un cuadro de visualización 16 x 16
y optimizado con SVGO.
Icono | Nombre del archivo |
---|---|
icono-flecha-izquierda.svg | |
icono-flecha-derecha.svg | |
icono-bitbucket.svg | |
icono-calendario.svg | |
icono-codepen.svg | |
icono-descargar.svg | |
icono-dribbble.svg | |
icono-correo electrónico.svg | |
icono-facebook.svg | |
icono-flickr.svg | |
icono-github.svg | |
icono-gitlab.svg | |
icono-googleplus.svg | |
icono-instagram.svg | |
icono-lastfm.svg | |
icono-linkedin.svg | |
icono-pdf.svg | |
icono-pinterest.svg | |
icono-rss.svg | |
icono-soundcloud.svg | |
icono-stackoverflow.svg | |
icono-cronómetro.svg | |
icono-tumblr.svg | |
icono-twitter.svg | |
icono-xing.svg | |
icono-youtube.svg |
Los colores de relleno se definen en el parcial _sass/basically-basic/_icons.scss
y se configuran con .icon-name
donde el nombre de la clase coincide con el icono correspondiente.
Por ejemplo, al ícono de Twitter se le asigna un color de relleno de #1da1f2
, así:
< span class =" icon icon--twitter " > {% include icon-twitter.svg %} </ span >
Además de los recursos SVG, hay funciones auxiliares de iconos que ayudan a generar enlaces de redes sociales.
Incluir parámetro | Descripción | Requerido |
---|---|---|
username | Nombre de usuario en una red social determinada | Requerido |
label | Texto utilizado para el hipervínculo | Opcional, por defecto es username |
Por ejemplo, el siguiente icon-github.html
incluye:
{% include icon-github . html username = jekyll label = 'GitHub' %}
Generará el siguiente HTML:
< a href =" https://github.com/jekyll " >
< span class =" icon icon--github " > < svg viewBox =" 0 0 16 16 " xmlns =" http://www.w3.org/2000/svg " fill-rule =" evenodd " clip-rule =" evenodd " stroke-linejoin =" round " stroke-miterlimit =" 1.414 " > < path d =" M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 " > </ path > </ svg > </ span >
< span class =" label " > GitHub </ span >
</ a >
Para configurar su entorno para desarrollar este tema:
cd
en /example
y ejecute bundle install
.Para probar el tema localmente a medida que le realiza cambios:
cd
en la carpeta raíz del repositorio (por ejemplo, jekyll-theme-basically-basic
).bundle exec rake preview
y abra su navegador en http://localhost:4000/example/
. Esto inicia un servidor Jekyll utilizando los archivos del tema y el contenido del directorio example/
. A medida que se realicen modificaciones, actualice su navegador para ver los cambios.
¿Encontró un error tipográfico en la documentación? ¿Está interesado en agregar una función o corregir un error? Luego, envíe un problema o intente enviar una solicitud de extracción. Si esta es su primera solicitud de extracción, puede resultar útil leer en GitHub Flow.
Al enviar una solicitud de extracción:
master
y asígnele un nombre significativo (por ejemplo, my-awesome-new-feature
) y describa la característica o solución. Puede encontrar páginas de muestra en las carpetas /docs
y /example
si desea abordar cualquier "fruta madura", como corregir errores tipográficos, mala gramática, etc.
michael rosa
La licencia MIT (MIT)
Copyright (c) 2017-2021 Michael Rose y colaboradores
Por el presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el "Software"), para operar con el Software sin restricciones, incluidos, entre otros, los derechos de uso, copia, modificación, fusión. , publicar, distribuir, sublicenciar y/o vender copias del Software, y permitir que las personas a quienes se les proporciona el Software lo hagan, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGÚN RECLAMO, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN CONTRACTUAL, AGRAVIO O DE OTRA MANERA, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTRAS NEGOCIOS EN EL SOFTWARE.
Básicamente Basic incorpora íconos de The Noun Project. Los iconos se distribuyen bajo Creative Commons Attribution 3.0 Estados Unidos (CC BY 3.0 US).
Básicamente Basic incorpora fotografías de Unsplash.
Básicamente Basic incorpora Susy, Copyright (c) 2017, Miriam Eric Suzanne. Susy se distribuye bajo los términos de la Licencia BSD "Nueva" o "Revisada" de 3 cláusulas.
Básicamente Basic incorpora Breakpoint. Breakpoint se distribuye bajo los términos de las licencias MIT/GPL.