so simple theme
3.2.0
So Simple es un tema simple de Jekyll para tus palabras e imágenes. Construido para proporcionar:
Vea las novedades en CHANGELOG. documentación v2 .
| Descripción | ||
|---|---|---|
| Una publicación con una imagen de héroe grande. | Avance | Fuente |
| Una publicación con una variedad de elementos HTML comunes que muestra cómo les da estilo el tema. | Avance | Fuente |
| Publicación que muestra el código resaltado. | Avance | Fuente |
| Una publicación que muestra imágenes con una variedad de alineaciones. | Avance | Fuente |
| Todas las publicaciones agrupadas por año. | Avance | Fuente |
| Todas las publicaciones agrupadas por categoría. | Avance | Fuente |
| Todas las publicaciones agrupadas por etiqueta. | Avance | Fuente |
| Página de categoría. | Avance | Fuente |
| Listado de documentos en vista de cuadrícula. | Avance | Fuente |
Se pueden ver publicaciones de muestra adicionales en el sitio de demostración. Los archivos fuente de estos (y de todo el sitio de demostración) se pueden encontrar en la carpeta /docs .
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 (o cree uno):
gem "jekyll-theme-so-simple" Agregue esta línea al archivo _config.yml de su sitio Jekyll:
theme : jekyll-theme-so-simpleLuego 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 enviando confirmaciones vacías a GitHub (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 funciona esto, consulte la documentación de GitHub.
Si bifurcó o descargó el repositorio so-simple-theme , puede eliminar de forma segura los siguientes archivos y carpetas:
.githubdocsexample.editorconfig.gitattributesbanner.jsCHANGELOG.mdGemfilejekyll-theme-so-simple.gemspecpackage.jsonRakefileREADME.mdREADME-OLD.mdscreenshot.pngSi está utilizando Ruby Gem o versiones remotas de So Simple, 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:
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
Esto estará 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 (tenga un Gemfile ) o gem update jekyll-theme-so-simple 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 descargar actualizaciones de temas manualmente, 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/so-simple-theme.git .
Para agregarlo puedes hacer lo siguiente:
git remote add upstream https://github.com/mmistakes/so-simple-theme.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, revise el historial de confirmaciones del tema para ver qué ha cambiado.
Aquí hay una lista de verificación rápida de las carpetas/archivos importantes que querrás 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/navigation.yml | Seguro de conservar. Verificar que no hubo cambios o adiciones estructurales importantes. |
_data/text.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 archivos /assets/css/main.css , /assets/js/main.min.js o *.html .
Los diseños, las inclusiones, los parciales de Sass y los archivos de datos se colocan en sus ubicaciones predeterminadas. Las hojas de estilo y los scripts se pueden encontrar en assets y algunos archivos relacionados con el desarrollo en el directorio raíz del proyecto.
Tenga en cuenta: si instaló So Simple a través de Ruby Gem o métodos de tema remotos, los archivos de tema que se encuentran en /_layouts , /_includes , /_sass y /assets faltarán en su proyecto. Esto es normal ya que vienen incluidos con la gema jekyll-theme-so-simple .
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
Después de crear un Gemfile e instalar el tema, necesitarás agregar y editar los siguientes archivos:
_config.yml/_data/navigation.yml/_data/text.ymlindex.mdNota: Consulte la documentación de paginación a continuación para obtener instrucciones sobre cómo habilitarla en la página de inicio.
jekyll new Usar el jekyll new lo pondrá en funcionamiento más rápido.
Edite sus archivos Gemfile y _config.yml siguiendo la guía de instalación anterior y la guía de configuración a continuación, luego cree _data/text.yml como se indicó anteriormente.
La configuración de los elementos de todo el sitio ( locale , title , description , url , logo , author , etc.) ocurre en _config.yml de su proyecto. Consulte la configuración de ejemplo en este repositorio para obtener referencia adicional.
| Nombre | Descripción | Ejemplo |
|---|---|---|
locale | Idioma principal del sitio. | "en-us" |
title | Título del sitio. | "My Awesome Site" |
description | Una breve descripción. | "This is my site, it is awesome." |
baseurl | Se utiliza para probar el sitio web en la misma URL base en la que se implementará. | /my-base-path |
url | La URL completa de su sitio. | "https://your-site.com" |
logo | Ruta a un logotipo para todo el sitio utilizado en la cabecera. | /images/your-logo.png |
Hay tres máscaras (predeterminada, clara y oscura) disponibles para cambiar la paleta de colores del tema.
default.css | light.css | dark.css |
|---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "Para utilizar una máscara personalizada distinta de las proporcionadas:
/assets/css/skins/default.scss a su repositorio local.skin en _config.yml para hacer referencia a este nuevo archivo .css del skin. site.locale se utiliza para declarar el idioma principal de cada página web dentro del sitio.
Ejemplo: configuración regional: "en-US" establece el atributo de idioma del sitio en el estilo de inglés de Estados Unidos, mientras que en-GB sería para el estilo de inglés del Reino Unido. Los códigos de país son opcionales y la variación locale: "en" también es aceptable. Para encontrar los códigos de idioma y país, consulte esta tabla de referencia.
Configurar correctamente la configuración regional es importante para asociar el texto localizado que se encuentra en el archivo de datos de texto.
Nota: El tema predeterminado es texto en inglés ( en , en-US , en-GB ). Si cambia la configuración regional en _config.yml a otra cosa, asegúrese de agregar la clave de configuración regional correspondiente y el texto traducido a _data/text.yml .
El nombre de host base y el protocolo de su sitio. Si aloja páginas de GitHub, esto será algo así como url: "https://github.io.mmistakes" o url: "https://your-site.com" si tiene un nombre de dominio personalizado.
GitHub Pages ahora fuerza https:// para sitios nuevos, así que tenga esto en cuenta al configurar su URL para evitar advertencias de contenido mixto.
Nota: Jekyll anula el valor de url con http://localhost:4000 cuando ejecuta jekyll serve localmente en desarrollo. Si desea evitar este comportamiento, configure JEKYLL_ENV=production para forzar el entorno a producción.
Esta opción provoca todo tipo de confusión en la comunidad Jekyll. Si no aloja su sitio como una página de proyecto de GitHub o en una subcarpeta (por ejemplo, /blog ), no lo modifique.
En el caso del sitio de demostración So Simple , está alojado en GitHub en https://mmistakes.github.io/so-simple-theme. Para configurar correctamente esta ruta base, usaría url: "https://mmistakes.github.io" y baseurl: "/so-simple-theme" .
Para obtener más información sobre cómo utilizar correctamente site.url y site.baseurl según lo previsto por los mantenedores de Jekyll, consulte la publicación de Parker Moore sobre el tema.
Nota: Cuando utilice baseurl recuerde incluirlo como parte de su enlace y rutas de activos en su contenido. Los valores de url: y baseurl: "/blog" harían que su sitio local fuera visible en http://localhost:4000/blog y no en http://localhost:4000. Puede anteponer todas las rutas de sus activos y enlaces internos con {{ site.baseurl }} o utilizar relative_url de Jekyll.
Para utilizar los valores de ejemplo sobre la siguiente ruta de imagen de {{ '/images/my-image.jpg' | relative_url }} saldría correctamente como http://localhost:4000/blog/images/my-image.jpg .
Sin el filtro relative_url faltaría la ruta del activo /blog y tendrías una imagen rota en tu página.
Puede cambiar el formato de fecha predeterminado especificando date_format en _config.yml . Acepta cualquiera de los formatos de fecha estándar de Liquid.
Por ejemplo, el valor predeterminado de "%B %-d, %Y" podría cambiarse así:
date_format : " %Y-%m-%d " Habilite fragmentos de tiempo de lectura estimado en todo el sitio con read_time: true . Se ha establecido 200 como valor predeterminado de palabras por minuto, que se puede cambiar a través de words_per_minute en su archivo _config.yml .
read_time : true
words_per_minute : 200Habilite MathJax (un motor de visualización de JavaScript para matemáticas) en todo el sitio con
mathjax :
enable : true La opción combo le permite elegir una combinación de componentes de MathJax; el valor predeterminado es "tex-svg". Y la opción tags le permite controlar la numeración de ecuaciones; las opciones son "ams" (predeterminado), "todos" y "ninguno".
Configuración de muestra:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all" Utilice fácilmente Google Fonts en todo su sitio reemplazando el name de la fuente y weights en consecuencia. Las combinaciones de fuentes sugeridas son las siguientes:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Nota: Si se utilizan otras familias de fuentes, asegúrese de agregar y luego anular las siguientes variables SCSS en /assets/css/main.scss con los valores font-family que proporciona Google.
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;Consulte la documentación de la hoja de estilo a continuación para obtener más información sobre cómo anular las variables predeterminadas del tema.
Divida la lista principal de publicaciones en la página de inicio 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 plugins (anteriormente gems ) en su archivo _config.yml y la siguiente configuración de paginación:
paginate : 10 # 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 indexar el contenido completo de sus documentos para usarlos en una página de búsqueda, establezca search_full_content en true en _config.yml :
search_full_content : true Nota: Grandes cantidades de publicaciones aumentarán el tamaño del índice de búsqueda, lo que afectará el rendimiento de carga de la página. Establecer search_full_content en false (el valor predeterminado) restringe la indexación a las primeras 50 palabras del contenido del cuerpo.
De forma predeterminada, las categorías y etiquetas agregadas a una publicación no están vinculadas a páginas de archivo de taxonomía. Para habilitar este comportamiento y vincular a páginas con publicaciones agrupadas por categoría o etiqueta, agregue lo siguiente:
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# " Estas rutas deben imitar los enlaces permanentes utilizados para sus categorías y páginas de archivo de etiquetas . El # al final es necesario para apuntar a la sección de taxonomía correcta en las páginas.
Por ejemplo, si tuviera que crear categories.md con el siguiente contenido inicial:
title : Categories Archive
layout : categories
permalink : /foo/ Deberías cambiar category_archive_path a "/foo/# para que los enlaces de categorías funcionen correctamente.
Nota: Puede crear páginas dedicadas a categorías y etiquetas manualmente con layout: category y layout: tag . O utilice complementos como jekyll-archives o jekyll-paginate-v2 para generarlos automáticamente.
Si tiene una cuenta de Disqus , puede 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 solo aparecen en producción cuando se crean con el siguiente valor de entorno: JEKYLL_ENV=production para evitar contaminar su cuenta de Disqus con contenido localhost .
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 anteriores de Disqus, el script de seguimiento de Google Analytics solo aparecerá en producción cuando se utilice el siguiente valor de entorno: JEKYLL_ENV=production .
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 proporciona los siguientes diseños, que puede utilizar configurando la portada layout 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: postEste diseño se adapta a lo siguiente:
| Nombre | Tipo | Descripción |
|---|---|---|
image | Cadena | Ruta a una imagen grande asociada a la publicación. También se utiliza para OpenGraph, Twitter Cards y la miniatura del feed del sitio si está habilitado. Tamaños de imagen sugeridos. |
image.path | Cadena | Lo mismo que arriba. Se utiliza cuando también es necesario asignar una thumbnail o caption al objeto image . |
image.caption | Cadena | Describe la imagen o proporciona crédito. Se permite la reducción. |
author | Objeto o cadena | Especifique name del autor de una publicación, picture , twitter , links , etc. |
comments | Booleano | Desactivar comentarios con comments: false . |
share | Booleano | Agregue enlaces para compartir en redes sociales a una publicación con share: true . |
Ejemplo de imagen de publicación:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) " Nota: la portada de image.feature ha quedado obsoleta para ser totalmente compatible con jekyll-seo-tag. Si no utiliza thumbnail o caption la imagen de la publicación se puede asignar de manera más concisa como image: /images/your-post-image.jpg .
Ejemplo de autor de publicación:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Nota: La información del autor se puede centralizar en _data/authors.yml haciendo lo siguiente en la portada del documento:
author : johndoe Con la clave de autor correspondiente en _data/authors.yml :
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Nota: el tamaño recomendado author.picture es de 150 x 150 píxeles.
Para definir qué enlaces aparecen en la barra lateral del autor, utilice la clave authors.links en _config.yml o /_data/authors.yml .
| Nombre | Descripción |
|---|---|
title | Describe el enlace. No visible, utilizado con fines de accesibilidad. |
url | URL a la que apunta el enlace. |
icon | Corresponde con un icono de Font Awesome, por ejemplo, fab fa-twitter-square . |
Ejemplo:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-squareNota: Para deshabilitar completamente los enlaces de autor, utilice:
author :
links : falselayout: page Visualmente, este diseño se ve y actúa de manera similar layout: post , con las siguientes diferencias.
El diseño de página forma la base para varios otros diseños como home , posts , categories , tags , collection , category , tag y search .
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), gridCuando la paginación no está habilitada, la página muestra de forma predeterminada las 10 últimas publicaciones. Para cambiar la cantidad de publicaciones mostradas, asigne un valor límite agregando lo siguiente al inicio de la página.
posts_limit : 5 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 . Si simplemente busca una lista que muestre títulos de recetas (sin extractos), agregue show_excerpts: false .
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 : foolayout: 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 barlayout: searchEste diseño muestra un formulario de búsqueda y muestra páginas relacionadas según la consulta.
Índice de contenido de la página: title , excerpt , content (cuando está habilitado), categories , tags y url .
Si desea excluir páginas/publicaciones específicas del índice de búsqueda, configure el indicador de búsqueda en false en su portada.
search : false Para indexar el contenido completo de sus documentos, establezca search_full_content en true en _config.yml :
search_full_content : true Nota: Grandes cantidades de publicaciones aumentarán el tamaño del índice de búsqueda, lo que afectará el rendimiento de carga de la página. Establecer search_full_content en false (el valor predeterminado) restringe la indexación a las primeras 50 palabras del contenido del cuerpo.
Los tamaños de imagen sugeridos en píxeles son los siguientes:
| Imagen | Descripción | Tamaño |
|---|---|---|
site.logo | Logotipo de todo el sitio utilizado en la cabecera. | 200 x 200 |
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 del autor en la barra lateral de la publicación. | 150 x 150 |
Para cambiar el texto que se encuentra en todo el tema, copie el siguiente archivo /_data/text.yml y personalícelo según sea necesario.
Al agregar nuevos textos, asegúrese de que las claves coincidan con estos códigos de idioma/país, que pueden usarse para site.locale .
Para definir qué páginas están vinculadas en la navegación superior:
Cree un archivo /_data/navigation.yml .
Agregue páginas en el orden en que desea que aparezcan:
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/Nota: Los títulos largos o muchos enlaces pueden hacer que la barra de navegación se divida en varias líneas, especialmente en pantallas más pequeñas. Tenga esto en cuenta a medida que desarrolle la navegación principal de su sitio.
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 : /images/johndoe.pngLa 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 : /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 : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png Actualmente, author.picture solo se usa en layout: post . El tamaño recomendado es 150 x 150 píxeles.
Tanto los enlaces del pie de página como el texto de derechos de autor se pueden personalizar.
Los enlaces de pie de página se configuran en _config.yml bajo la clave footer_links .
| Nombre | Descripción |
|---|---|
title | Describe el enlace. No visible, utilizado con fines de accesibilidad. |
url | URL a la que apunta el enlace. |
icon | Corresponde con un ícono de Font Awesome 5, por ejemplo, fab fa-twitter-square . |
Ejemplos:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square Nota: Para deshabilitar completamente los enlaces de pie de página, utilice footer_links: false .
De forma predeterminada, los derechos de autor insertan el año actual, site.title y las palabras "Powered by Jekyll & So Simple." Para cambiar esto, agregue copyright a su _config.yml de esta manera (se permite Markdown):
copyright : " This site is made with <3 by *me, myself, and I*. " Puedes pensar en estos ayudantes de Jekyll como códigos cortos. Dado que GitHub Pages no permite la mayoría de los complementos, las etiquetas personalizadas están descartadas. En cambio, el tema aprovecha incluye para hacer algo similar.
Incruste un vídeo de YouTube/Vimeo o cualquier otro contenido iframe cuyo tamaño se adapte al ancho de su formato principal.
| Parámetro | Requerido | Descripción |
|---|---|---|
url | Sí | URL del vídeo o iframe, por ejemplo, https://www.youtube.com/watch?v=-PVofD2A9t8 |
ratio | Opcional | Proporción del contenido del vídeo o iframe. 21:9 , 16:9 , 4:3 , 1:1 . Si no se asigna una proporción, se utiliza 16:9 . |
Ejemplo:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}Para incluir una tabla de contenido generada automáticamente para publicaciones y páginas, agregue el siguiente asistente donde desee que aparezca.
{% include toc %}Entonces Simple 3 es una reescritura importante de todo el tema. Los cambios más notables se resumen a continuación, seguidos de cambios más específicos.
Es seguro decir que probablemente querrás deshacerte de todos los archivos _layouts , _includes , _sass , .css y .js de v2 y usar la gema Ruby o las opciones de instalación remota de temas.
_layouts , _includes , _sass y JavaScript.site.url y site.baseurl aprovechando los filtros relative_url y absolute_url ./_includes/open-graph.html personalizado con jekyll-seo-tag .tags y posts ) para facilitar su uso.404.mdatom.xml personalizado con jekyll-feed .favicon.ico y favicon.png .float para que las cosas no se vean demasiado rotas en los navegadores que no admiten display: grid y flexbox. El formato ha cambiado de en_US (con un guión bajo) a en-US con un guión.
site.owner ahora es site.author para admitir mejor jekyll-seo-tag y jekyll-feed.
| v2 | v3 |
|---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | obsoleto , reemplazado por jekyll-seo-tag |
site.owner.bing-verify | obsoleto , reemplazado por jekyll-seo-tag |
site.owner.google.analytics ahora es site.google_analytics . Consulte la documentación para obtener más información.
site.owner.disqus-shortname ahora es site.disqus.shortname . Ver documentación más información.
Para deshabilitar los comentarios en una publicación en particular, agregue comments: false en su portada.
Se ha cambiado el nombre search_omit a search . Para excluir una publicación o página de la búsqueda, agregue search: false al principio.
Al asignar rutas de imágenes para elementos como site.logo , page.image.path , author.picture , etc., ahora requieren una ruta completa relativa o absoluta.
En So Simple v2, todas las imágenes se colocaron en /images/ y se asignaron al principio solo con el nombre del archivo. Para que las imágenes se carguen correctamente, ahora debe anteponer todas las rutas con /images/ ... si está almacenando imágenes allí, por ejemplo, /images/your-image.jpg .
Para admitir mejor los complementos de Jekyll como jekyll-seo-tag, jekyll-feed y jekyll-sitemap, se ha cambiado el nombre de la mayoría de las claves image . Ajuste la portada de todas sus publicaciones y páginas en consecuencia.
| v2 | v3 |
|---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (Markdown permitido) |
image.creditlink | uso obsoleto **image.caption** en su lugar |
Una publicación con la siguiente presentación v2:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.comSe convertiría en la siguiente portada v3:
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "Pasos aproximados para migrar una bifurcación So Simple v2 (sin modificaciones) a la última versión.
Elimine _includes/ , _layouts/ , _sass/ , jshintrc , Gruntfile.js y search.json .
Edite Gemfile para los métodos de instalación de Ruby gem o GitHub Pages y siga esas instrucciones.
Agregue las siguientes fuentes de Google a _config.yml :
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Edite _config.yml prestando mucha atención a aquellas claves a las que se les ha cambiado el nombre o que tienen nuevos requisitos de ruta relativa. locale , logo y owner son buenos lugares para comenzar.
Cambie el nombre de todas las instancias de image.feature , image.thumb e image.credit en publicaciones/páginas que se adhieran a los cambios de imagen anteriores.
Elimine el contenido del cuerpo en index.html y cambie layout: page al layout: home . Configure la paginación si es necesario.
Elimine el contenido del cuerpo en /search/index.md y cambie layout: page al layout: search .
Elimine el contenido del cuerpo en /tags/index.md y cambie layout: page al layout: tags .
Elimine el contenido del cuerpo en /articles/index.md y cambie layout: page al layout: category y agregue taxonomy: articles .
Elimine el contenido del cuerpo en /body/index.md y cambie layout: page al layout: category y agregue taxonomy: blog .
Cambie el nombre de la portada modified en publicaciones/páginas a last_modified_at para mejorar la paridad con los complementos que lo admiten.
Agregue tag_archive_path: "/tags/#" a _config.yml para activar los enlaces de etiquetas en la meta barra lateral de la publicación.
Cambie el nombre avatar a picture en _data/authors.yml (y en cualquier publicación/página frontal) y edite las rutas siguiendo los cambios de ruta de la imagen anteriores.
Al instalar como una gema Ruby o un tema remoto, los archivos del tema principal ( _layouts , _includes , _sass , assets , etc.) estarán ausentes de su proyecto.
La estructura, el estilo y los scripts predeterminados de este tema se pueden anular y personalizar de las dos maneras siguientes:
Los archivos de temas se pueden anular colocando un archivo con el mismo nombre en el directorio _includes o _layouts de su proyecto. Por ejemplo:
_includes/social-share.html , cree un directorio _includes en su proyecto, copie _includes/social-share.html de la carpeta de gemas de So Simple a <your_project>/_includes y edite ese archivo. Consejo profesional: para localizar los archivos del tema en su computadora, ejecute bundle show jekyll-theme-so-simple . Esto devuelve la ubicación de los archivos del tema basado en gemas.
El tema viene con dos archivos para ayudar a inyectar contenido y marcado personalizado en ubicaciones predefinidas.
| Descripción | |
|---|---|
_includes/head-custom.html | Insertado dentro del elemento <head> para agregar metadatos, favicons, etc. |
_includes/footer-custom.html | Insertado dentro del elemento <footer> antes de los scripts del sitio y la información de derechos de autor. |
Para anular el Sass predeterminado (ubicado en el directorio _sass del tema), realice una de las siguientes acciones:
Copie directamente desde la gema So Simple
bundle show jekyll-theme-so-simple para obtener la ruta)./assets/css/main.scss desde allí a <your_project> .<your_project>/assets/css/main.scss .Copiar de este repositorio.
<your_project> .<your_project/assets/css/main.scss . Nota: Para personalizar los parciales de Sass reales incluidos en la gema, deberá copiar el contenido completo del directorio _sass a <your_project> . Debido a la forma en que Jekyll importa actualmente estos archivos, es todo o nada. Anular un único parcial de Sass (o dos) no funcionará como _includes y _layouts .
Para realizar ajustes básicos al estilo del tema, las variables Sass se pueden anular agregándolas a <your_project>/assets/css/main.scss . Por ejemplo, para cambiar el color de acento utilizado en todo el tema, agregue lo siguiente antes de todas las líneas @import :
$accent-color : tomato ;Para anular el JavaScript predeterminado incluido en el tema, realice una de las siguientes acciones:
Copie directamente desde la gema So Simple
bundle show jekyll-theme-so-simple para obtener la ruta)./assets/js/main.js desde allí a <your_project> .<your_project>/assets/js/main.js .Copiar de este repositorio.
/assets/js/main.js a <your_project> .<your_project>/assets/js/main.js . El archivo /assets/js/main.min.js del tema está creado a partir de complementos jQuery y otros scripts que se encuentran en /assets/js/ .
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
Para modificar o agregar sus propios scripts, inclúyalos en assets/js/main.js y luego reconstrúyalos usando npm run build:js . Consulte a continuación para obtener más detalles.
Si agrega scripts adicionales a /assets/js/plugins/ y desea concatenarlos con los demás, asegúrese de actualizar el script uglify en package.json . Lo mismo ocurre con los scripts que eliminas.
También puede agregar scripts a los elementos <head> o de cierre </body> agregando rutas a las siguientes matrices en _config.yml .
Ejemplo:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js Nota: Si asigna rutas a footer_scripts el archivo /assets/js/main.min.js del tema se desactivará. Este script incluye complementos y otros scripts que dejarán de funcionar a menos que los agregue específicamente a la matriz footer_scripts .
El tema utiliza Font Awesome SVG con la versión JS para la iconografía. Las ubicaciones destacadas en las que aparecen estos íconos se encuentran en la barra lateral del autor y en los enlaces del pie de página.
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-so-simple ).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.
En un esfuerzo por reducir las dependencias, se utiliza un conjunto de scripts npm para compilar main.min.js en lugar de ejecutores de tareas como Gulp o Grunt. Si esas herramientas son más de su estilo, entonces úselas en su lugar.
Para empezar:
cd a la raíz de su proyecto. Nota: Si actualizó desde una versión anterior del tema, asegúrese de copiar el archivo package.json antes de ejecutar npm install . Es posible que también deba eliminar su directorio node_modules .
Si todo va bien, ejecutar npm run build:js comprimirá/concaterará main.js y todos los scripts de complementos en /assets/js/main.min.js .
¿Encontró un error tipográfico en la documentación? ¿Solicita una función o corrección de errores? Busque entre los problemas abiertos y cerrados antes de enviar un problema para evitar duplicaciones.
También se agradecen las solicitudes de extracción. Si es la primera vez, puede resultar útil leer sobre GitHub Flow.
Si su contribución agrega o cambia el comportamiento del tema, asegúrese de actualizar la documentación y/o el contenido de muestra. La documentación se encuentra en README.md, mientras que las publicaciones, páginas y colecciones de muestra se encuentran en los docs y las carpetas example .
Al enviar una solicitud de extracción:
master y asígnele un nombre significativo (por ejemplo, my-awesome-new-feature ).michael rosa
La licencia MIT (MIT)
Copyright (c) 2013-2019 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.
So Simple incorpora Font Awesome, Copyright (c) 2017 Dave Gandy. Font Awesome se distribuye bajo los términos de la licencia SIL OFL 1.1 y MIT.
So Simple incorpora fotografías de Unsplash.
So Simple incorpora fotografías de WeGraphics
So Simple incorpora Breakpoint. El punto de interrupción se distribuye bajo los términos de las licencias MIT/GPL.
SO SIMPLE incorpora JQuery Smooth Scroll, Copyright (C) 2017 Karl Swedberg. JQuery Smooth Scroll se distribuye bajo los términos de la licencia MIT.
SOLO SIMPLE incorpora LUNR, Copyright (c) 2017 Oliver Nightingale. LUNR se distribuye bajo los términos de la licencia MIT.
SO SIMPLE incorpora Lity, Copyright (c) 2015-2016, Jan Sorgalla. Lity se distribuye bajo los términos de la licencia MIT] (http://opensource.org/licenses/mit).
Entonces, simple incorpora la tabla de contenido alternar, los derechos de autor (c) 2017 Timothy B. Smith. La Tabla de contenido se distribuye bajo los términos de la licencia MIT] (http://opensource.org/licenses/MIT).
