motor de plantillas jade (bajo node.js): bloque multi-línea sin símbolo de canalización

StackOverflow https://stackoverflow.com/questions/4717703

  •  12-10-2019
  •  | 
  •  

Pregunta

Actualmente estoy usando Jade en un nuevo proyecto. Parece bien adaptado a la composición de los diseños de webapp, pero no para escribir el contenido estático, como una página web de

Los elementos que contienen texto.

Por ejemplo, para crear un párrafo tal, creo que necesito hacer esto:

p
  | This is my long,
  | multi-line
  | paragraph.

En una página web estática completa de los párrafos reales de texto, utilizando el jade se convierte en una carga, debido a que la barra vertical al comienzo de cada línea.

¿Hay algún tipo de azúcar sintáctico para el marcado de todo el bloque como un nodo de texto, como el símbolo de canalización hace sobre una base de línea por línea? O un filtro existente que soy consciente de?

Una solución que estoy explorando es la creación de un: filtro de bloque o algo así, que antepone cada línea con un | y luego pasa a Jade, pero la documentación de jade en la creación de filtros es escasa por no decir más, así que puede tomar un tiempo para averiguar. Si alguien puede proporcionar orientación en cuanto a la solución de este tipo una te lo agradecería.

¿Fue útil?

Solución

Desde el jade github página :

p.
foo asdf
asdf
 asdfasdfaf
 asdf
asd.

produce una salida:

<p>foo asdf
asdf
  asdfasdfaf
  asdf
asd
.
</p>

El punto final después de la p es lo que estás buscando.

Otros consejos

Después de algunos retoques, trabajé en los detalles de un filtro que logra esto. Publicar la respuesta aquí, ya que me imagino que esto será útil para otras personas que utilizan el jade.

El código para crear el filtro resulta ser bastante simple:

var jade = require ("jade");

jade.filters.text = function(block, compiler){
    return new TextBlockFilter(block).compile();
};

function TextBlockFilter(node) {
    this.node = node;
}

TextBlockFilter.prototype.__proto__ = jade.Compiler.prototype;

TextBlockFilter.prototype.visit = function(node){

    // first this is called with a node containing all the block's lines
    // as sub-nodes, with their first word interpreted as the node's name
    //
    // so here, collect all the nodes' text (including its name)
    // into a single Text node, and then visit that instead.
    // the child nodes won't be visited - we're cutting them out of the
    // parse tree

    var text = new jade.nodes.Text();
    for (var i=0; i < node.length; i++) {
        text.push (node[i].name + (node[i].text ? node[i].text[0] : ""));
    }
    this.visitNode (text);
};

y después las miradas de marcado de este tipo. Nota que le permite incluir otras cosas de jade en el medio: los bloques de texto:

p
  :text
    This is my first line of text,
    followed by another
    and another.  Now let's include a jade link tag:
  a(href="http://blahblah.com")
  :text
    and follow it with even more text 
    and more,
    etc
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top