Título

Post: Fecha futura

Fri, 31 Dec 9999 00:00:00 +0000

Este post vive en el futuro y tiene fecha Fri Dec 31 00:00:00 9999. Debería aparecer únicamente cuando Jekyll genere tu proyecto incluyendo la opción --future.

jekyll build --future

Hola Hydeout

Thu, 01 Jun 2017 00:00:00 +0000

Hydeout actualiza al tema original Hyde para Jekyll 3.x y le añade nuevas funcionalidades.

Mantenlo sencillo

Siguiendo con el tema original Hyde, Hydeout busca mantener el diseño ligero sin plugins. El uso de JavaScript se limita únicamente a Disqus y Google Analytics (y sólo se incluye si las respectivas variables de configuración han sido informadas).

Hydeout hace uso extensivo de Flexbox en sus CSS. Si Flexbox no está disponible, los CSS se degradan a un layout de una sola columna.

Personalización

Hydeout reemplaza el funcionamiento de Hyde, basado en clases mediante el uso de las siguiente variables SASS:

$sidebar-bg-color: #202020 !default;
$sidebar-sticky: true !default;
$layout-reverse: false !default;
$link-color: #268bd2 !default;

Para anular estas variables, podemos crear nuestro propio fichero assets/css/main.scss. Definimos nuestras propias variables, y las importamos al SCSS de Hydeout, de la siguiente manera:

---
# Jekyll requiere encabezado para los ficheros SCSS
---

$sidebar-bg-color: #ac4142;
$link-color: #ac4142;
$sidebar-sticky: false;
@import "hydeout";

Hecha un vistazo al fichero de _variables para ver otras variables que pueden ser anuladas.

Es posible también insertar etiquetas personalizadas (e.g. para cargar nuestras propias hojas de estilos) definiendo nuestros propios _includes/custom-head.html o insertar etiquetas al final del cuerpo (e.g. para JS personalizado) definiendo nuestro propio _includes/custom-foot.html.

Nuevas Funcionalidades

Hydeout también añade una nueva página de etiquetas (accesible desde la barra lateral) y un nuevo layout de “categoría” para páginas dedicadas a una determinada categoría.
Las páginas de categoría son añadidas automáticamente a la barra lateral. Todas las demás páginas deben tener sidebar_link: true en su cabecera para ser mostradas en la barra lateral.
Una redirección simple a Google search está disponible. Para utilizar Google Custom Search o Algolia o algo diferente, debemos anular search.html.
La integración con Disqus está lista de entrada. Solamente debemos añadir lo siguiente a nuestro fichero de configuración:
```
disqus:
  shortname: my-disqus-shortname
```
Si no quieres utilizar Disqus o quieres utilizar otro sistema, deberás anular comments.html.
Para soportar la integración con Google Analytics, define una variable google_analytics con tu ID de propiedad en tu fichero de configuración.

Hay también un montón de ajustes menores por todo el tema. Espero que encaje con tus necesidades!

Presentando a Hyde

Sat, 28 Dec 2013 00:00:00 +0000

Hyde es un descarado tema Jekyll de dos columnas que acompaña una barra lateral con contenido sencillo. Está basado en Poole, el mayordomo de Jekyll.

Hecho con Poole

Poole es el mayordomo de Jekyll, que sirve como respetable y efectiva fundación a los temas Jeckyll de @mdo. Poole, y cada tema hecho a partir de él (como Hyde) incluye lo siguiente:

Configuración Jekyll completa incluída (layouts, configuración, 404, feed RSS, posts, y acerca de)
Diseño y desarrollo mobile friendly
Escalado de texto y calibración de componentes sencilla, a través de las unidades rem en los CSS
Soporte para una amplia gama de elementos HTML
Posts relacionados (ten función del tiempo, gracias a Jekyll) bajo cada post
Resaltado de sintaxis, cortesía de Pygments (la herramienta de resaltado de trozos de código basada en Python)

Funcionalidades de Hyde

Además de las funcionalidades de Poole, Hyde añade las siguientes:

La barra lateral incluye soporte para móculos textuales y un sistema de navegación generado de forma dinámica con soporte de enlaces activos
Dos orientaciones para contenido y barra lateral, por defecto (barra lateral izquierda) y reverse (barra lateral derecha), disponible vía clases <body>
Ocho esquemas de color opcionales, disponibles también vía clases <body>

Llévame al leeme para conocer más.

Soporte a navegador

Hyde es un proyecto ideado a largo plazo. Es compatible a las últimas versiones de Chrome, Safari (mobile y escritorio), y Firefox, sólo compatible con Internet Explorer 9 y superiores.

Descarga

Hyde se desarrolla y aloja en GitHub. Dirígete al repositorio Github para descargas, informes de errores, y petición de funcionalidades.

Gracias!

Ejemplos de contenido

Tue, 07 Feb 2012 00:00:00 +0000

Como va! Testo es un ejemplo de entrada de blog que muestra varios tipos de contenido HTML soportados por este tema.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Elementos HTML inline

HTML define una larga lista de etiquetas inline disponibles, para las que podemos ver una lista completa en Mozilla Developer Network.

Para texto en negrita, utiliza <strong>.
Para texto en cursiva, usa <em>.
Abreviaturas, como HTML deberían utilizar <abbr>, con un atributo title opcional para la frase entera.
Citas, como — Mark otto, deberían usar <cite>.
~~Texto borrado~~ debería usar <del> y texto insertado debería utilizar <ins>.
Texto ^superíndice utiliza <sup> y texto _subíndice utiliza <sub>.

Heading

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Code

Cum sociis natoque penatibus et magnis dis code element montes, nascetur ridiculus mus.

// Ejemplo que puede ser ejecutado directamente en tu consola JavaScript

// Crear una función que toma dos argumentos y devuelve la suma de esos argumentos
var adder = new Function("a", "b", "return a + b");

// Llamar a la función
adder(2, 6);
// > 8

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

Gists vía GitHub Pages

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.

Lists

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec id elit non mi porta gravida at eget metus.
Nulla vitae elit libero, a pharetra augue.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

Vestibulum id ligula porta felis euismod semper.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas sed diam eget risus varius blandit sit amet non magna.

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

HyperText Markup Language (HTML): The language used to describe and define the content of a Web page
Cascading Style Sheets (CSS): Used to describe the appearance of Web content
JavaScript (JS): The programming language used to build advanced Web sites and applications

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.

Imágenes

Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at.

Tablas

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nombre	Votos positivos	Votos negativos
Totales	21	23
Alice	10	11
Bob	4	3
Charlie	7	9

Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.

¿Quieres que se añada otra funcionalidad? Abre un ticket.

¿Qué es Jekyll?

Mon, 06 Feb 2012 00:00:00 +0000

Jekyll es un generador de sitios estáticos, una herramienta open-source para la creación de sitios web simples pero potentes, de todos los tamaños y formas. Según el léeme del proyecto:

Jekyll is a simple, blog aware, static site generator. It takes a template directory […] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.

Es una herramienta muy útil, todavía más al utilizarla con Hyde.

Para saber más, visita el proyecto en GitHub.

Markup: Syntax Highlighting

Sun, 05 Feb 2012 00:00:00 +0000

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.¹

GFM Code Blocks

GitHub Flavored Markdown fenced code blocks are supported by default with Jekyll. You may need to update your _config.yml file to enable them if you’re using an older version.

kramdown:
  input: GFM

Here’s an example of a CSS code snippet written in GFM:

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

Yet another code snippet for demonstration purposes:

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Jekyll Highlight Liquid Tag

Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, using a dedicated Liquid tag as follows:

{% highlight scss %}
.highlight {
  margin: 0;
  padding: 1em;
  font-family: $monospace;
  font-size: $type-size-7;
  line-height: 1.8;
}
{% endhighlight %}

And the output will look like this:

.highlight {
  margin: 0;
  padding: 1em;
  font-family: $monospace;
  font-size: $type-size-7;
  line-height: 1.8;
}

Here’s an example of a code snippet using the Liquid tag and linenos enabled.

1
2
3
4
5
6
7
8
<nav class="pagination" role="navigation">
  {% if page.previous %}
    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
  {% endif %}
  {% if page.next %}
    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
  {% endif %}
</nav><!-- /.pagination -->

Code Blocks in Lists

Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., 1.). Usually this will mean indenting 3 spaces instead of 4.

Do step 1.

Now do this:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Now you can do this.

GitHub Gist Embed

GitHub Gist embeds can also be used:

<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>

Which outputs as:

http://en.wikipedia.org/wiki/Syntax_highlighting ↩

Layout: Excerpt (Defined)

Sat, 04 Feb 2012 00:00:00 +0000

This is the start of the post content.

This paragraph should be absent from an index page where post.excerpt is shown.

Layout: Excerpt (Generated with Separator Tag)

Fri, 03 Feb 2012 00:00:00 +0000

This is the post content. Archive-index pages should display an auto-generated excerpt of all the content preceding the excerpt_separator, as defined in the YAML Front Matter or globally in _config.yml.

Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn’t create any layout problems.

Lorem ipsum dolor sit amet, dicant nusquam corpora in usu, laudem putent fuisset ut eam. Justo accusam definitionem id cum, choro prodesset ex his. Noluisse constituto intellegebat ea mei. Timeam admodum omnesque pri ex, eos habemus suavitate aliquando cu. Dico nihil delectus quo cu. Ludus cetero cu eos, vidit invidunt dissentiet mea ne.

Usu delenit vocibus elaboraret ex. Scripta sapientem adversarium ei pri, pri ex solet democritum. Nam te porro impedit, ei doctus albucius cotidieque pri, ea mutat causae lucilius has. Pri omnis errem labore ut. An aperiam tibique est, mei te dolore veritus, nam nulla feugait ut. In vis labitur eripuit contentiones.

Markup: Title with Special --- Characters

Tue, 31 Jan 2012 00:00:00 +0000

Putting special characters in the title should have no adverse effect on the layout or functionality.

The title above has none-breaking spaces before and after the m-dash.

&nbsp;---&nbsp;

Latin Character Tests

This is a test to see if the fonts used in this theme support basic Latin characters.

!	“	#	$	%	&	‘	(	)	*
+	,	–	.	/		1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~

Markup: Title with Markdown

Mon, 30 Jan 2012 00:00:00 +0000

Using Markdown in the title should have no adverse effect on the layout or functionality.

page.title example:

title: "Markup: Title *with* **Markdown**""

!	“	#	$	%	&	‘	(	)	*
+	,	–	.	/		1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~

!	“	#	$	%	&	‘	(	)	*
+	,	–	.	/		1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~

!	“	#	$	%	&	‘	(	)	*
+	,	–	.	/		1	2	3	4
5	6	7	8	9	:	;	>	=	<
?	@	A	B	C	D	E	F	G	H
I	J	K	L	M	N	O	P	Q	R
S	T	U	V	W	X	Y	Z	[
]	^	_	`	a	b	c	d	e	f
g	h	i	j	k	l	m	n	o	p
q	r	s	t	u	v	w	x	y	z
{	\|	}	~