permalink - ¿Cómo ajustar el diseño de una página/publicación en particular en Jekyll?

jekyll where

Question

Me gustaría hacer algunos cambios en el diseño de Jekyll. Los cambios son pequeños y diferentes. Por ejemplo, vinculando un archivo CSS o JavaScript adicional. O agregar alguna información en el encabezado. O sintonizando el título de la página. Importante que estos cambios dependen de una página / publicación.

Como los cambios son pequeños y diversos, crear un diseño especial para cada uno de ellos parece ser demasiado costoso.

Intenté crear mi propia solución, pero me es imposible usar variables para incluir instrucciones .

¿Alguien ha resuelto algo similar? Por ejemplo, ¿vincular un CSS especial a una publicación en particular?

Answer 1

Alguna vez he intentado crear una página independiente en el sitio estático jekyll-bootstrap. Por ejemplo, my_cv.html que necesita un estilo CSS independiente. En lugar de crear un nuevo repositorio github con gh-pages (lo siento GitHub), simplemente rellené todos los contenidos html finales en un post my_cv.md ya que el formato markdown es realmente compatible con html , creo, y afortunadamente funciona.

Answer 2

Puede usar la materia frontal de YAML para ajustar cualquier cosa que desee para cualquier publicación / página. Cualquier información que proporcione allí será accesible a través de diseños e incluye en la page variable o en una publicación específica en cualquier lista de ellos.

Esto suena como una solución para su caso: podría usar la materia delantera de YAML así:

---
extra_css:
  - foo.css
  - dir/bar.css
  - /s/baz.css
---

Y luego use esto en el encabezado de su diseño de esta manera:

{% for css_name in page.extra_css %}
    <link rel="stylesheet" href="{{ css_name }}">
{% endfor %}

De esta manera, podría agregar cualquier lógica basada en los datos que proporcione con una publicación en la parte frontal de YAML.

Si desea abstraer parte de esa lógica en módulos, puede usar un truco alrededor de las inclusiones, asignando una variable antes de incluirla y luego usarla dentro. Aquí hay un enlace con una descripción de cómo se realizó en el proyecto Jekyll Bootstrap (por cierto, el sitio tiene mucha información útil sobre Jekyll).

Y, sí, Jekyll no permite el uso de variables en las inclusiones, por lo que si desea incluir algo condicional, necesitará una lista de todas las inclusiones disponibles en algún lugar y luego crear todas las condiciones para insertar una u otra cuando Los necesitaré.

Otra solución es dividir todo en el diseño para incluir, y hacer diseños con diferentes niveles de complejidad, de esta manera usted podría configurar cualquiera de esos diseños básicos para la publicación y luego escribir cualquier código adicional con inclusión de cualquier bloque que necesite de los básicos. Diseños, por lo que publicar podría tener este aspecto:

---
layout: custom
---
<aside class="sidebar">
    {% include comments.html %}
    {% include sidebar.html %}
</aside>
<div class="content" role="main">
    Foo bar baz
</div>

Allí puede usar un diseño personalizado que no incluya un diseño básico para la página y no incluya la barra lateral y los comentarios, por lo que podría, por cada publicación, decidir qué nivel de diseño desea y luego redefinir todo lo que necesita ser redefinido.

Además, si necesitas ajustar diferentes lugares pero con un contenido desconocido, puedes usar YAML front materia con bloques, como

extra_head: |
    <style>
    * {background: red}
    </style>

luego puede llamar a dicha variable desde la cabecera: {{ page.extra_head }} y obtener cualquier contenido que haya colocado allí. Sin embargo, no puede usar ninguna etiqueta líquida dentro de YAML, pero luego podría usar cualquier etiqueta YAML en tales variables, por lo que podría marcarlas o reemplazar cualquier cadena dentro con cualquier otra cosa simplemente reemplazando el filtro.

Y si nada de eso te sienta bien, entonces Jekyll no lo hará, como escribí en un comentario, Jekyll es solo un motor de blog y no deberías esperar a que sea complejo como XSLT.